前端小框架&封装认识_0911 - HTML5+CSS3

Community Learn Tools Library Leisure

English

Home > List of blog posts > 前端小框架&封装认识_0911

Blogger Information

Blog 77

fans 0

comment 0

visits 55221

Special Recommendation

More>

Related recommendations

实例

<!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>

Correction status：qualified

Teacher's comments：同样的效果, 实现方式有多种, 很难说哪一种就是最好的, 还是要看需求吧

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

匿名函数与命名空间_0929

2019-10-08 13:01:48