search

博客列表 >前端小框架&封装认识_0911

前端小框架&封装认识_0911

Jet的博客
Jet的博客原创
2019年09月14日 15:37:48642浏览

一、小框架作业

    一共分为3部分：1、首页；2、welcome页面；3、内容页


1、首页

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        h1,
        h2,
        h3,
        h4 {
            font-size: 26px;
            font-weight: normal;
        }
        
        ul,
        li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        ul,
        li,
        a {
            text-decoration: none;
            color: black;
        }
        /* 首页 */
        
        .header {
            position: block;
            overflow: hidden;
            top: 0;
            left: 0;
            width: 100%;
            height: 65px;
            background-color: lightgray;
        }
        
        .header h1 {
            margin: 0;
            padding: 0 0 0 25px;
            height: 65px;
        }
        
        .header h1 span {
            line-height: 65px;
        }
        
        .header h1 span:first-of-type {
            color: coral;
            font-size: 28px;
            text-shadow: 2px 2px 1px #333;
            font-weight: bold;
        }
        
        .header h1 span:last-of-type {
            color: #444444;
            font-size: 28px;
            padding-left: 10px;
        }
        
        .main {
            display: flex;
        }
        
        .main .nav {
            flex: 0.2;
            background-color: white;
        }
        
        .main .nav .nav-list {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        .main .nav .nav-list a {
            text-decoration: none;
            color: black;
        }
        
        .main .nav .nav-list .nav-list-title {
            margin: 25px 0 0;
            padding: 0 0 10px 45px;
            font-size: 1.2rem;
            font-weight: bold;
            color: black;
        }
        
        .main .nav .nav-list .nav-list-list {
            list-style-type: none;
            margin: 0;
            padding: 0 0 0 65px;
            font-size: 0.9rem;
        }
        
        .content {
            flex: 0.8;
        }
        /* welcome页面 */
        
        .t_title1 {
            color: #0880d7;
        }
        
        .t_title3 {
            font-size: 18px;
            /* margin: 10px 0; */
            color: gray;
            padding: 10px 0;
        }
        
        .t_title_ul .t_title_li {
            font-size: 14px;
            padding: 5px 0;
        }
        /* 2_页面结构 */
        
        .php-p-30 {
            padding: 30px;
        }
        
        .php-p-20 {
            padding: 20px;
        }
        
        .php-p-20 h3 {
            font-size: 18px;
        }
        
        .php-pl-20 {
            padding-left: 20px;
        }
        
        .php-ml-20 {
            margin-left: 20px;
        }
        
        .php-mb-10 {
            margin-bottom: 10px;
        }
        
        .php-mt-10 {
            margin-bottom: 10px;
        }
        
        .php-mt-30 {
            margin-top: 30px;
        }
        
        .php-li-disc {
            list-style-type: none;
        }
        
        .php-lh-normal {
            line-height: 1.5rem;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="header">
            <h1><span>phpcn UI</span><span>用户参考手册</span></h1>
        </div>
        <div class="main">
            <div class="nav">
                <ul class="nav-list">
                    <li class="nav-list-title">前端基础</li>
                    <ul class="nav-list-list">
                        <li><a href="welcome.html" target="content">框架安装</a></li>
                        <li><a href="2_页面结构.html" target="content">页面结构</a></li>
                        <li><a href="welcome.html" target="content">常用标签</a></li>
                    </ul>
                    <li class="nav-list-title">框架组件</li>
                    <ul class="nav-list-list">
                        <li><a href="welcome.html" target="content">栅格布局</a></li>
                        <li><a href="welcome.html" target="content">常用样式</a></li>
                        <li><a href="welcome.html" target="content">文本与背景色</a></li>
                    </ul>
                </ul>
            </div>
            <div class="content" id="content">
                <iframe src="welcome.html" frameborder="0" name="content" width="100%" height="900"></iframe>
            </div>
        </div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


2、welcome页面

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        h1,
        h2,
        h3,
        h4 {
            font-size: 26px;
            font-weight: normal;
        }
        
        ul,
        li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        ul,
        li,
        a {
            text-decoration: none;
            color: black;
        }
        /* 首页 */
        
        .header {
            position: block;
            overflow: hidden;
            top: 0;
            left: 0;
            width: 100%;
            height: 65px;
            background-color: lightgray;
        }
        
        .header h1 {
            margin: 0;
            padding: 0 0 0 25px;
            height: 65px;
        }
        
        .header h1 span {
            line-height: 65px;
        }
        
        .header h1 span:first-of-type {
            color: coral;
            font-size: 28px;
            text-shadow: 2px 2px 1px #333;
            font-weight: bold;
        }
        
        .header h1 span:last-of-type {
            color: #444444;
            font-size: 28px;
            padding-left: 10px;
        }
        
        .main {
            display: flex;
        }
        
        .main .nav {
            flex: 0.2;
            background-color: white;
        }
        
        .main .nav .nav-list {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        .main .nav .nav-list a {
            text-decoration: none;
            color: black;
        }
        
        .main .nav .nav-list .nav-list-title {
            margin: 25px 0 0;
            padding: 0 0 10px 45px;
            font-size: 1.2rem;
            font-weight: bold;
            color: black;
        }
        
        .main .nav .nav-list .nav-list-list {
            list-style-type: none;
            margin: 0;
            padding: 0 0 0 65px;
            font-size: 0.9rem;
        }
        
        .content {
            flex: 0.8;
        }
        /* welcome页面 */
        
        .t_title1 {
            color: #0880d7;
        }
        
        .t_title3 {
            font-size: 18px;
            /* margin: 10px 0; */
            color: gray;
            padding: 10px 0;
        }
        
        .t_title_ul .t_title_li {
            font-size: 14px;
            padding: 5px 0;
        }
        /* 2_页面结构 */
        
        .php-p-30 {
            padding: 30px;
        }
        
        .php-p-20 {
            padding: 20px;
        }
        
        .php-p-20 h3 {
            font-size: 18px;
        }
        
        .php-pl-20 {
            padding-left: 20px;
        }
        
        .php-ml-20 {
            margin-left: 20px;
        }
        
        .php-mb-10 {
            margin-bottom: 10px;
        }
        
        .php-mt-10 {
            margin-bottom: 10px;
        }
        
        .php-mt-30 {
            margin-top: 30px;
        }
        
        .php-li-disc {
            list-style-type: none;
        }
        
        .php-lh-normal {
            line-height: 1.5rem;
        }
    </style>
</head>

<body style="padding:50px;">
    <h1 class="t_title1">phpcn UI 框架特点:</h1>
    <h3 class="t_title3">遵循HTML5/CSS3/ES5/6编程规范, 具有如下特点:</h3>
    <ul class="t_title_ul">
        <li class="t_title_li"><strong>免费开源</strong>: 您不需要付任何费用, 就可以用在你的项目或商业应用中</li>
        <li class="t_title_li"><strong>简洁高效</strong>: 秉承大道至简原则, 一切为开发者服务, 在不失功能前提下进行最大程序的简化</li>
        <li class="t_title_li"><strong>易学好用</strong>: 开箱即用, 学习门槛极低, 优雅易记的命名规范, 方便您的二次开发与扩展</li>
    </ul>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


3、内容页

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/monokai-sublime.css">
    <link rel="stylesheet" href="css/tomorrow.css">
    <link rel="stylesheet" href="css/github.css">
    <title>2_页面结构</title>
</head>

<body class="php-p-30">
    <h1>HTML文档结构</h1>


    <div class="php-p-20">
        <h3>目录:</h3>
        <ul>
            <li class="php-pl-20"><a href="#chapter1">1. 什么是HTML文档</a></li>
            <li class="php-pl-20"><a href="#chapter2">2. 为什么要学习编写HTML文档</a></li>
            <li class="php-pl-20"><a href="#chapter3">3. HTML文档结构</a></li>
            <li class="php-pl-20"><a href="#chapter4">4. HTML标签的基本语法</a></li>
        </ul>
    </div>

    <h2 class="php-mb-10 php-mt-30" id="chapter1">1.什么是HTML文档</h2>
    <ul class="php-mt-10 php-lh-normal">
        <li class="php-pl-20 phpcn-li-disc"><strong>HTML</strong>:超文本标记编写的结构化文档</li>
        <li class="php-pl-20 phpcn-li-disc"><strong>超文本标记</strong>: 是用来描述其它数据的元数据标签</li>
        <li class="php-pl-20 phpcn-li-disc"><strong>结构化文档</strong>: 文档是由不同层级的元素组成的树形结构</li>
    </ul>

    <hr color="lightgrey">
    <h2 class="php-mb-10 php-mt-30" id="chapter2">2.为什么要学习编写HTML文档</h2>
    <ul class="php-mt-10 php-lh-normal">
        <li class="php-pl-20 php-li-disc">互联网最终呈现给用户的最终界面都是由HTML文档构成</li>
        <li class="php-pl-20 php-li-disc">HTML文档由纯文本组成, 独立于任何编程语言</li>
        <li class="php-pl-20 php-li-disc">掌握HTML文档编写是学习Web开发第一步</li>
    </ul>

    <hr color="lightgrey">




    <h2 class="php-mb-10 php-mt-30" id="chapter3">3.HTML文档结构</h2>
    <p class="php-mt-20">目前主流的是HTML5文档结构</p>
    <pre>
            <code class="html">
        <!--文档类型-->
        <!DOCTYPE html>
        <!--html文档开始, lang设置该文档的内容使用的语言,部分浏览器会依赖它进行翻译提示-->
        <!--lang属性非必须,如果页页就是提醒翻译,可以删除它,或者改成: zh-cn, 让它与你的系统语言一致-->
        <html lang="en">
        
        <!--head是文档的头部声明和页面描述信息,除标题外, 其余内容对用户不可见, 供浏览器和搜索引擎读取-->
        <head>
            <!--    meta标签用来设置页面的元数据(描述),例如关键字,页面描述,作者等-->
            <!--    charset是你在编写和存储这个html文档时, 使用的编码集-->
            <meta charset="UTF-8">
        
            <!--    title是显示在浏览器标签页内的文本内容,用来提示用户当前页面的基本信息-->
            <title>html文档的结构</title>
        </head>
        
        <!--以下内容会显示在当前浏览器的窗口中, 也是用户最感兴趣的部分-->
        <body>
        <h1>PHP中文网的小伙伴们,大家好~~</h1>
        </body>
        </html>
            </code>
        </pre>

    <hr color="lightgrey">

    <h2 class="php-mb-10 php-mt-30" id="chapter4">4.HTML标签的基本语法</h2>

    <ul class="php-mt-10 php-lh-normal">
        <li class="phpcn-ml-20 phpcn-li-disc">根据包装/描述元素的类型, HTML提供了二种标签类型: 双标签与单标签</li>
        <li class="phpcn-ml-20 phpcn-li-disc">双标签: 元素内容通常来自HTML文档本身,如各种文本, 表单,表格,列表等</li>
        <li class="phpcn-ml-20 phpcn-li-disc">单标签: 元素内容通常自外部,如图像,样式表,表单控件等, 控制排版标签也是单标签</li>
        <li class="phpcn-ml-20 phpcn-li-disc">不过也有例外, 例如JS脚本引入, 影视与音频插入等外部资源, 也使用了双标签</li>
    </ul>

    <pre>
            <code class="html">
        <!-- 1. 双标签 -->
        <!-- 语法: <起始标签 属性="值">内容</起始标签> -->
        <h2 class="red">前端真好玩</h2>
        <form>...</form>
        <ul><li>...</li></ul>
        <table>...</table>
        
        <!-- 2. 单标签 -->
        <!-- 语法: <标签 属性="值"> -->
        <img src="..." alt="...">
        <input type="text" value="">
        <link red="..."  href="...">
        <br>
        <hr>
        
        <!-- 例外: 双标签引入外部资源 -->
        <script src="..."></script>
        <video src="...">...</video>
        <audio src="...">...</audio>
            </code>
        </pre>

</body>
<!--引入代码高亮插件-->
<script src="js/highlight.pack.js"></script>
<!--初始化插件-->
<script>
    hljs.initHighlightingOnLoad();
</script>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



小结：

1、可用flex布局，分左右两边；清单，内容页；

2、iframe，跳转指定内容页id值；

3、html代码需要转义才能在网上显示出来（可在网上找在线转换）；

4、可加入插件高亮显示转义代码；须加入相关js&css

    内容页：

    css：monokai-sublime.css、tomorrow.css、github.css；

    JS：<!--引入代码高亮插件-->
            <script src="js/highlight.pack.js"></script>
            <!--初始化插件-->
            <script>
                hljs.initHighlightingOnLoad();
            </script>

5、css样式封装；可将常用样式封装起来，直接调用

ex. php-ml-30{ margin-left: 30px; }    左边距30px;

<div class="php-ml-30">box</div>


上一条：仿php中文网手机端首页界面-2019年9月14日17:00下一条：仿php中文网移动端首页_0910
框架封装
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多