HTML实战教程2

上一章节完成了页头制作,HTML代码看起来很简洁,CSS代码有点繁,读起来很吃力。为了快速开发建议使用LESS。它是一门CSS预处理语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

进阶的CSS


LESS就像程序语言一样,写好一定的变量名和样式,快速生成CSS。LESS是不需要安装程序的,在编辑器中会有插件安装。正好Adobe Dreamweaver CC 2019最新版本自带了生成CSS工具,很方便。

创建LESS文件


创建空白LESS文件,保存根目录。

上节课创建HTML时,我们发现CSS预处理文件路径,就是CSS生成的路径。

在LESS每次编写保存时,CSS里自动生成,这不仅仅加速了CSS开发时间,更便捷了。以下LESS代码重新把页头部分重构,你就会发现这代码读起来比CSS简约多了:

/* LESS Mybook */
@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../font/iconfont.woff') format('woff'),
    url('../font/iconfont.ttf') format('truetype'),
    url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    margin-right: 5px; 
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
body,html,ul,li,h1 {
    margin: 0px;
    padding: 0px;
}
@width : 1400px;
@float-l: left;
@float-r: right;
//mybook head
header {

    .nav {
        max-width: @width;
        margin: 0px auto;
        //nav left
        .nav_l {
            float: @float-l;
            h1 {
                color: #242a31;
                font: bold 30px/65px "Microsoft YaHei";
                margin-left: 20px;
                float: @float-l;
            }
            ul {
                float: @float-l;
                margin: 23px 0 0 50px;
                li {
                    float: @float-l;
                    list-style-type: none;
                    margin: 0px 9px;
                    color: #3884ff;
                    font: bold 16px "Microsoft YaHei";
                    text-decoration: none;
                    & a:link,& a:visited,& a:hover,& a:active {
                            color: #3884ff;
                            ext-decoration: none;
                     }
                   }
               }

         }  
        .nav_r{
             float: @float-r;
               form{
                   margin-top: 25px;
                   padding-left: 24px;
                   border-left: 1px solid #E6ECF1;
               } 

               input{
                   outline:none;
                   height: 25px;
                   color: #b0b0b0;
                   font:200 16px "Microsoft YaHei";
                   letter-spacing:2px;
                   border: none;
                } 
        } 
    }  //nav end
}   //head end

如果你喜欢用LESS直接使用,就需要以下两个代码就可以用了,注意路径文件修改。

<link rel="stylesheet/less" href="index.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>     

完善页面最终效果


继续把中间内容完善,创建一个主体个main容器,再创建两个aside和article容器。如果对这个单词不了解的,可以百度参考HTML5语义化教程文章。

<main>

        <box>
                <aside>
                     <ul>
                      <li class="active">当前页面链接</li>
                      <li>其它页面链接</li>
                    </ul>
                </aside>
                <article>
                      内容
                </article>
        </box>
</main>

aside是侧栏模块(内容之外模块,用作导航),article是文章模块。最终完善:

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>
            Mybook
        </title>
        <link href="css/index.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <header>
            <div class="nav">
                <div class="nav_l">
                    <h1>
                        Mybook
                    </h1>
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">列表</a></li>
                        <li><a href="#">留言</a></li>
                        <li><a href="#">隐私</a></li>
                    </ul>
                </div>
                <div class="nav_r">
                    <form action="#" method="post">
                        <i class="iconfont"></i>
                        <input type="search" value="搜索">
                    </form>
                </div>
            </div>
        </header>
        <main>

            <box>
                <aside>
                     <ul>
                      <li class="active"><a href="jacascript::void(0)">序<span><img src="img/right.svg" alt=""/></span></a></li>
                      <li><a href="jacascript::void(0)">第一章 框架工具<span><img src="img/right.svg" alt=""/></span></a></li>
                      <li><a href="jacascript::void(0)">第二章 函数使用<span><img src="img/right.svg" alt=""/></span></a></li>
                      <li><a href="jacascript::void(0)">第三章 API调用<span><img src="img/right.svg" alt=""/></span></a></li>
                      <li><a href="jacascript::void(0)">第四章 微信接口开发<span><img src="img/right.svg" alt=""/></span></a></li>
                      <li><a href="jacascript::void(0)">第五章 鸣谢<span><img src="img/right.svg" alt=""/></span></a></li>
                    </ul>
                </aside>

                <article>

                      <div class="c_title">
                         <h1>序</h1>
                         <p>半小时前 / naokiono / 357</p>
                      </div>

                      <div class="c">
                         <p>网络很多教程都是有序的,读取来很烦躁,就像英语单词一样,遇到单词就死背诵单词。每一个文档每一个元素都要学习是最痛苦事情。所以这次以实战教程为例,需求哪个元素就使用哪个元素,学习轻松而且进步很快。当然,这个教程是免费的。</p>
                      </div>

                      <hr>

                       <blockquote>
                            <img src="img/blockquote.svg" alt="">
                            <p>网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。</p>
                       </blockquote>

                      <div class="c">

                    <p>超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准):</p>
                    <p>HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时</p>
                    <p>HTML 3.2——1997年1月14日,W3C推荐标准</p>
                    <p>HTML 4.0——1997年12月18日,W3C推荐标准</p>
                    <p>HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准</p>
                    <p>HTML 5——2014年10月28日,W3C推荐标准 [2]  (详见本处参考资料)</p>
                    <p>ISO/IEC 15445:2000(“ISO HTML”)——2000年5月15日发布,基于严格的HTML 4.01语法,是国际标准化组织和国际电工委员会的标准。</p>
                    <p>Wijmo是基于HTML5、jQuery、CSS3和SVG的一个控件包,能够满足构建当今Web系统的需求。基于Wijmo,您的系统运行将更加快速和流畅,外观也会更加引人入胜。Wijmo中所有新的控件都是在符合最新的UI设计潮流的基础上,对新的以及改良后的主题进行封装。优美的、专业的控件外观会让您的应用程序引人注目。比如 ComponentOne Studio for ASP .NET Wijmo 控件包内置的6个主题,同时可以使用jQuery UI项目提供的 30 多个主题,甚至可以使用 ThemeRoller 创建属于您自己的系统主题。</p>
                    <p>HTML没有1.0版本是因为当时有很多不同的版本。有些人认为蒂姆·伯纳斯-李的版本应该算初版,这个版本没有IMG元素。当时被称为HTML+的后续版的开发工作于1993年开始,最初是被设计成为“HTML的一个超集”。第一个正式规范为了和当时的各种HTML标准区分开来,使用了2.0作为其版本号。HTML+的发展继续下去,但是它从未成为标准。</p>
                    <p>HTML3.0规范是由当时刚成立的W3C于1995年3月提出,提供了很多新的特性,例如表格、文字绕排和复杂数学元素的显示。虽然它是被设计用来兼容2.0版本的,但是实现这个标准的工作在当时过于复杂,在草案于1995年9月过期时,标准开发也因为缺乏浏览器支持而中止了。3.1版从未被正式提出,而下一个被提出的版本是开发代号为Wilbur的HTML 3.2,去掉了大部分3.0中的新特性,但是加入了很多特定浏览器,例如Netscape和Mosaic的元素和属性。HTML对数学公式的支持最后成为另外一个标准MathML。</p>
                    <p>HTML 4.0同样也加入了很多特定浏览器的元素和属性,但是同时也开始“清理”这个标准,把一些元素和属性标记为过时,建议不再使用它们。HTML的未来和CSS结合会更好。</p>
                    <p>HTML 5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。</p>
                    <p>XHTML1.0——发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布。</p>
                    <p>XHTML 1.1,于2001年5月31日发布,W3C推荐标准。</p>
                    <p>XHTML 2.0,W3C工作草案。</p>
                    <p>XHTML 5,从XHTML 1.x的更新版,基于HTML 5草案。</p>
                    <p>HTML4.01 是常见的版本。</p>
                      </div>
                </article>
            </box>
        </main>
    </body>
</html>

然后回到LESS上编辑CSS:

/* LESS Mybook */
@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../font/iconfont.woff') format('woff'),
    url('../font/iconfont.ttf') format('truetype'),
    url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    margin-right: 5px; 
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

*, *:before, *:after {
    outline: none;
    box-sizing: inherit;
}



body,html{

    box-sizing: border-box;
    overflow-y: hidden;
}

body,html,ul,li,h1 {
    margin: 0px;
    padding: 0px;
    height: 100%;

}



@width : 1400px;
@float-l: left;
@float-r: right;



//定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
::-webkit-scrollbar
{
    width: 3px;
    height: 5px;
    background-color: #F5F5F5;
}

//定义滚动条轨道
::-webkit-scrollbar-track
{
    background-color: #F5F5F5;
}

//定义滑块
::-webkit-scrollbar-thumb
{
    background-color: #555;
}

//mybook head
header {
    width: 100%;
    height: 69px;
    background:#FFFFFF;
    border-bottom: #d4dadf solid 1px;
    box-shadow:0px 1px 4px #f3f4f5;
    position: fixed;
    top:0;
    z-index: 999;
    .nav {
        max-width: @width;
        margin: 0px auto;
        //nav left
        .nav_l {
            float: @float-l;
            h1 {
                color: #242a31;
                font: bold 30px/65px "Microsoft YaHei";
                margin-left: 20px;
                float: @float-l;
            }
            ul {
                float: @float-l;
                margin: 23px 0 0 50px;
                li {
                    float: @float-l;
                    list-style-type: none;
                    margin: 0px 9px;
                    a{
                    color: #3884ff;
                    font: bold 16px "Microsoft YaHei";
                    text-decoration: none;
                             &:link,&:visited,&:hover,&:active{
                                    color: #3884ff;
                                    text-decoration: none;
                             }
                    }
                   }
               }
         }
        .nav_r{
             float: @float-r;
               form{
                   margin-top: 25px;
                   padding-left: 24px;
                   border-left: 1px solid #E6ECF1;
               } 

               input{
                   outline:none;
                   height: 25px;
                   color: #b0b0b0;
                   font:200 16px "Microsoft YaHei";
                   letter-spacing:2px;
                   border: none;
                } 
        } 
    }  
}  


main{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
      box{
            flex: 1;
            display: flex;
            align-items: stretch;
            margin-top: 70px;

            aside{
                  background:#F5F7F9;
                  width:calc(~"(100% - 1448px) / 2 + 298px");
                  min-width:298px;
                  padding-left:calc(~"(100% - 1448px) / 2");
                  padding-top: 32px;
                  border-right:1px solid #E6ECF1;
                  height: 100%;
                    ul{
                        width: 100%;
                        padding-left: 35px;
                        li{
                            width: 100%;
                            height: 35px;
                            list-style-type: none;
                            cursor: pointer;
                            font-size: 14px;
                            margin: 10px 0;
                            font-family:"SimSun";
                            a{
                                align-items: center;
                                text-decoration: none;
                                display: block;
                                padding: 7px 24px 7px 16px;
                                color: #5C6975;
                                line-height: 1.8em;
                                height: 100%;
                                span{
                                    float: right;
                                    line-height:2em;
                                    img{
                                        width: 18px;
                                    }
                                }
                                &:hover{
                                    background-color: rgb(230, 236, 241);display: block;
                                }
                            }

                        }
                        .active{
                                border:  1px solid #E6ECF1;
                                border-right: 0px;
                                background-color: #FFFFFF;
                            a{
                                color: #3884FF;
                                line-height: 1.5em;
                                span{
                                    display: none;
                                }
                                &:hover{
                                   background-color: #FFFFFF;
                                }
                            }
                         }
                    }
                }
             }
            article{
                  margin: 0px;
                  flex: 1 1 auto;
                  min-width: 0px;
                  display: flex;
                  flex-direction: column;
                  background: #fff;
                  max-width: 60%;
                  padding: 36px 70px 0 85px;
                  overflow-y:scroll;

                .c_title{
                    border-left: 2.5px solid #3884ff;
                    height: 65px;
                    padding-left: 25px;
                    h1{
                        font-family: 'Microsoft YaHei';
                        font-weight: 400;
                        font-size: 34px;
                        line-height: 32px;
                        height: 45px;
                        color: #3b454e;
                    }
                    p{
                        margin: 0px;
                        padding: 0px;
                        font-size: 14px;
                        color: #9daab6;
                        letter-spacing:1px
                    }
                }
                .c{
                    padding: 30px 0;
                    p{
                        font-family: 'Microsoft YaHei';
                        color: #3b454e;
                        font-size: 16px;
                        line-height: 2em;
                    }
                }
                hr{
                    border: none;
                    border-top: #e6ecf1 solid 1px;
                    width: 100%;
                }
                blockquote{
                    background: #f5f7f9;
                    border-left: 2.5px solid #3884ff;
                    margin: 50px 0 0 0;
                    padding: 15px 30px;
                    border-radius:5px 0 0 5px;
                    font-size: 16px;
                    line-height: 2em;
                    color: #3b454e;
                    img{
                        width:28px;
                        padding: 0 8px 0 0;
                        vertical-align:middle;
                        display: block;
                        float: left;
                        position: relative;
                        top:25px;
                    }
                    p{
                        display: block;
                        padding-left: 40px;
                    }
                }

            }
}

其中body,html设置:

body,html{

    box-sizing: border-box;  //为元素设定的宽度和高度决定了元素的边框盒
    overflow-y: hidden;  //隐藏竖向滚动条
}

然后主体内容采用了flex布局,注意区别。

最终效果:

响应式布局


当然还没完,一旦窗口缩小时或手机浏览情况下,布局错误百出。为了完美布局,对CSS继续对症下药。

在HTML增加使用设备的宽度作为视图宽度并禁止初始的缩放:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

再加上移动端导航三条杠

 <div class="nav_r">
     <form action="#" method="post">
         <i class="iconfont"></i>
         <input type="search" value="搜索">
     </form>
     <object data="img/menu.svg" type="image/svg+xml"></object>
 </div>

通过CSS媒介查询来设置样式:

//如果窗口小于900,那么左侧导航隐藏
@media only screen and (max-width: 900px){
    main{
        aside {
            display: none;
        }
        article{
              padding: 36px 40px 0 40px;
              max-width: 90%;
        }
    }   
}
//如果窗口小于610 隐藏菜单导航换成三个杠
@media only screen and (max-width: 610px){
    header{
        .nav {
            .nav_l{
                ul{
                    display: none;
                }
            }
            .nav_r{
                form{
                    display: none;
                }
                object{
                    display: block;
                    cursor: pointer;
                    margin: 25px 30px 0 0 ;
                }
            }
        }
    }   
}

使用谷歌浏览器模拟iphoneX预览,效果蛮不错!

所有HTML全部完工了,并且没有使用JS很赞!
下一章节完善各个浏览器兼容,JS特效和SEO优化设置。

发表评论