HTML+CSS

<div class="tools">

    <strong>转载至：<a href="http://blog.csdn.net/zghekuiwu/article/details/53715457#t24"></a></strong>

</div>

<div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post">
<div class="tools">
<br />
</div>
<h3 id="第一部分-HTML" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal; font-size:16px"><a name="t0" target="_blank"></a>第一部分 HTML</h3><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第一章-职业规划和前景" style="margin:28px
 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2;
 font-weight:normal"><a name="t1" target="_blank"></a><a target="_blank" name="t1" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第一章-职业规划和前景"
 class="headerlink" title="第一章 职业规划和前景" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第一章 职业规划和前景</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">职业方向规划定位：</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">web</code>前端开发工程师</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">web</code>网站架构师</li><li style="list-style:none; position:relative;
 padding-left:14px">自己创业</li><li style="list-style:none; position:relative; padding-left:14px">转岗管理或其他<a target="_blank" id="more" style="color:rgb(26,188,156); background-color:transparent"></a></li></ul></li><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">web</code><a target="_blank" href="http://lib.csdn.net/base/javascript"
 class="replace_word" title="JavaScript知识库" style="text-decoration:none; color:rgb(223,52,52); font-weight:bold">前端开发</a>的前景展望：</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px">未来<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">IT</code>行业企业需求最多的人才</li><li style="list-style:none; position:relative; padding-left:14px">结合最新的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">html5</code>抢占移动端的市场</li><li style="list-style:none; position:relative;
 padding-left:14px">自己创业做老板</li><li style="list-style:none; position:relative; padding-left:14px">随着互联网的普及<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">web</code>开发成为企业的宠儿和核心</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">web</code>职业发展目标：</span></p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">第一、梳理知识<a target="_blank" href="http://lib.csdn.net/base/architecture" class="replace_word"
 title="大型网站架构知识库" style="text-decoration:none; color:rgb(223,52,52); font-weight:bold">架构</a></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">负责内容的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">HTML</code></li><li
 style="list-style:none; position:relative; padding-left:14px">负责外观的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>（层叠样式表）</li><li style="list-style:none; position:relative; padding-left:14px">负责行为的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">js</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ps</code>切图</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">第二、分解目标（起步阶段、提升阶段、成型阶段）</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">起步阶段：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">基本知识的掌握</li><li style="list-style:none; position:relative; padding-left:14px">常用工具的掌握</li><li
 style="list-style:none; position:relative; padding-left:14px">沟通技巧的掌握（围绕客户的需求）</li><li style="list-style:none; position:relative; padding-left:14px">良好的开发习惯（加注释、对齐方式）</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">提升阶段：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">熟悉掌握<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">HTML</code>基本标签和属性</li><li
 style="list-style:none; position:relative; padding-left:14px">熟练掌握<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>的基本语法和使用</li><li style="list-style:none; position:relative; padding-left:14px">浏览器兼容和w3c标准的掌握</li><li style="list-style:none; position:relative;
 padding-left:14px">结合<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">html</code>+<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>+<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">js</code>开始系统项目的开发</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">成型阶段：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">精通<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">DIV</code>+<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CCS</code>布局</li><li style="list-style:none; position:relative; padding-left:14px">精通<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>样式表控制<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">html</code>标签</li><li
 style="list-style:none; position:relative; padding-left:14px">熟悉运用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">js</code>制作动态网站的效果</li><li style="list-style:none; position:relative; padding-left:14px">能独立开发完成网站</li></ul></li></ul></li></ul></li></ul><hr style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px;
 border:none"><h4 id="第二章-html基本结构" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro
 Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t2" target="_blank"></a><a target="_blank" name="t2" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第二章-html基本结构"
 class="headerlink" title="第二章 html基本结构" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第二章 html基本结构</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">认识HTML：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">html</code>不是一种编程语言，是一种标志语言</li><li style="list-style:none; position:relative; padding-left:14px">标记语言是由一套标识标签组成的</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">html</code>使用标签来描述网页</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">html</code>结构：</p></li></ul><table style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px;
 width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent;
 padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px;
 width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><html></div><div class="line"> <head></head></div><div class="line"> <body></body></div><div class="line"></html></div></pre></td></tr></tbody></table><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">不成对出现的标签<br><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><br></code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><hr></code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><meta></code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)"><img></code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><input..></code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><option..></code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><link></code></li></ul><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">HTML 基本标签的讲解：</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><html></code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><head></code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><body></code>标签</li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><h1></code>—-<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><h6></code>仅仅用于标题文本，不要为了产生粗体文本使用它们</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><p></code>标签
 段落标签</li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><strong><b></code>标签</p></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">都会让文字产生加粗效果</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><strong></code>用于强调文本，强度更深，表示重要文本—>用于<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">SEO</code>优化</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)"><b></code>只是视觉加粗效果—>单纯为了产生加粗</li></ul></li></ul><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><em></code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)"><i></code>标签<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">em</code>用于强调文本</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">i</code>只是视觉斜体效果</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><strong></code>比<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><em></code>强调更强</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px">特殊符号：<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">&nbsp</code>;
 —->空格</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">&gt</code>; —>大于号</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">&lt</code>；—>小于号</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">&quot</code>；—>引号</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">&copy</code>;–>版权号</li></ul></li></ul></li></ul><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><h4 id="第三章-html基本标签" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t3" target="_blank"></a><a target="_blank" name="t3" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第三章-html基本标签"
 class="headerlink" title="第三章 html基本标签" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第三章 html基本标签</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">HTMl</code>基本标签：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">span</code>标签<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">对被用来组合文档中的行内元素</li><li
 style="list-style:none; position:relative; padding-left:14px">注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><pre></code>标签<ul style="line-height:1.8em;
 padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">文字的格式按源码的排版来显示，我们称之为预处理格式</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><a></code>标签—>他有一个必不可少的属性 href</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">target</code>属性：</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">_self</code>(在原来页面打开)</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">_blank</code>（新窗口打开）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">_top</code>（打开时忽略所有的框架）</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">_parent</code>（在父窗口中打开）</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">创建锚点和锚链接</p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">锚点也是一种超链接，是页面内进行跳转的超链接<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">第一步：创建锚点 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)"><a name="锚点名称"></a></code></li><li style="list-style:none; position:relative; padding-left:14px">第二步：使用创建好的锚点名称 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><a href="#锚点名称">内容</a></code></li></ul></li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">marquee</code>标签<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">可以创建一个内容滚动效果</li></ul></li></ul></li></ul><table
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse;
 border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap;
 word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">direction</code> 表示滚动方向，取值有（left,right,up,down,默认left）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">loop</code>表示滚动循环的次数，默认为无限循环</li></ul><table
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse;
 border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap;
 word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line">οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滚动速度)</div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px">表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动</li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第四章-img图片标签与路径" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t4" target="_blank"></a><a target="_blank" name="t4" style="color:rgb(12,137,207)"></a><a target="_blank"
 href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第四章-img图片标签与路径" class="headerlink" title="第四章 img图片标签与路径" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第四章
 img图片标签与路径</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2;
 widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro
 Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">图片标签与路径：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">常见图片格式 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">jpg</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">png</code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">gif</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Gif</code> （只支持全透明）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Jpeg</code> /<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">jpg</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Png</code> 半/全透明都支持</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">图片标签写法 ：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><img src="" alt=""
 width="" height="" /></code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">图片四要素：</p><ul style="line-height:1.8em; padding:0px;
 list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">src=""</code> 图片路径</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">alt=""</code> 图片含义</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">width=""</code> 图片宽度 和图片大小保持一致</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">height=""</code> 图片高度
 和图片大小保持一致</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title=""</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">路径知识：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">相对路径、绝对路径：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">相对路径：(Relative Path) 相对于该文件的路径；</li><li style="list-style:none; position:relative;
 padding-left:14px">绝对路径：(Absolute Path) 从磁盘出发的路径；</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><img src="" ……
 align="" /></code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">align</code>属性–设置图片与后面文字的位置关系<br>值–<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">top</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">bottom</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">middle</code>、<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">absmiddle</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">left</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">right</code></p></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">在静态页面中：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">/</code>开头表示根目录；</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">./</code>表示当前目录；（斜画线前面一个点）</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">../</code>上级目录；（斜画线前面两个点）</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">直接用文件名不带/也表示同一目录</p></li></ul><ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。</li></ul></li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第五章-三种列表的讲解" style="margin:28px
 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2;
 font-weight:normal"><a name="t5" target="_blank"></a><a target="_blank" name="t5" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第五章-三种列表的讲解"
 class="headerlink" title="第五章 三种列表的讲解" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第五章 三种列表的讲解</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px">三种列表的知识讲解：<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><ul></code>无序列表<ul style="line-height:1.8em; padding:0px;
 list-style:none"><li style="list-style:none; position:relative; padding-left:14px">无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识</li></ul></li></ul></li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px;
 line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div
 class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word;
 overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px;
 margin-bottom:0px; background-color:transparent"><div class="line"><ul></div><div class="line"> <li></li></div><div class="line"> <li></li></div><div class="line"> <li></li></div><div class="line"></ul></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li
 style="list-style:none; position:relative; padding-left:14px"><ol style="padding-left:20px">有序列表<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">有序列表也是一列项目，只是列表项目使用的是数字进行标记。 有序列表始于 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)"><ol></code> 标签。每个列表项始于 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><li></code>标签。</li></ul></ol></li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px;
 line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div
 class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word;
 overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px;
 margin-bottom:0px; background-color:transparent"><div class="line"><ol></div><div class="line"> <li>内容一</li></div><div class="line"> <li>内容二</li></div><div class="line"> <li>内容三</li></div><div class="line"></ol></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">列表符号</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">无序列表-列表符号:</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="circle"</code> 空心圆 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type=“disc”</code> 实心圆 默认值 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="square"</code> 方块符</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">有序列表-列表符号</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="A"</code> A B C D</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="a"</code> a
 b c d</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="1"</code> 1 2 3 4 默认值type=”I” I II III type=”i” i ii iii</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">列表嵌套</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">无序列表-嵌套</p></li></ul></li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre
 style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div
 class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word;
 overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px;
 margin-bottom:0px; background-color:transparent"><div class="line"><ul></div><div class="line"> <li>柚子</div><div class="line"> <ul></div><div class="line"> <li>沙田柚</li></div><div class="line"> <li>蜜柚</li></div><div class="line"> </ul></div><div class="line">
 </li></div><div class="line"> <li>荔枝</li></div><div class="line"> <li>苹果</li></ul></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">有序列表-嵌套</li></ul><table style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px;
 width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent;
 padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td
 class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><ol></div><div class="line">
 <li>茶</div><div class="line"> <ul></div><div class="line"> <li>红茶</li></div><div class="line"> <li>绿茶</li></div><div class="line"> </ul></div><div class="line"> </li></div><div class="line"> <li>果汁</li></div><div class="line"> <li>牛奶</li></ol></div></pre></td></tr></tbody></table><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">定义列表<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)"><dl></code> 标签开始。每个定义列表项以 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><dt></code>开始。每个自定义列表项的定义以 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><dd></code> 开始。</li></ul></li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td
 class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div
 class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px;
 width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><dl> </div><div class="line"> <dt>pc网页制作</dt> </div><div class="line"> <dd>学习DIV+CSS JS JQ 项目实战</dd> </div><div
 class="line"> <dt>手机网页制作</dt> </div><div class="line"> <dd>手机网页制作实战</dd></div><div class="line"></dl></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">dd</code>是对<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">dt</code>的解释</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">< dl>< /dl></code>用来创建一个普通的列表,</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">< dt>< /dt></code>用来创建列表中的上层项目，</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">< dd>< /dd></code>用来创建列表中最下层项目，</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">< dt>< /dt></code>和<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">< dd>< /dd></code>都必须放在<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">< dl>< /dl></code>标志对之间。</li></ul></li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px;
 line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div
 class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code" style="padding:0px;
 line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:680px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><dl></div><div class="line"> <dt>中国城市</dt></div><div
 class="line"> <dd>北京 </dd></div><div class="line"> <dd>上海 </dd></div><div class="line"> <dd>广州 </dd></div><div class="line"> <dt>美国城市</dt></div><div class="line"> <dd>华盛顿 </dd></div><div class="line"> <dd>芝加哥 </dd></div><div class="line"> <dd>纽约 </dd></div><div
 class="line"></dl></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">dl</code>是d<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">efinition list</code>的缩写</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">dt</code>是<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">definition title</code>的缩写</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">dd</code>是d<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">efinition description</code>的缩写</li></ul><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans
 GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list-style</code>属性具有三个属性分量：</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list-style-position</code> ：设置列表项图标的位置，位于文本内或者文本外</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list-style-type</code>：
 设置列表项图标的类型</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list-style-image</code>：使用图像设置列表项图标</li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica
 Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第六章-表单元素-上" style="margin:28px 0px 15px;
 padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a
 name="t6" target="_blank"></a><a target="_blank" name="t6" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第六章-表单元素-上" class="headerlink"
 title="第六章 表单元素(上)" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第六章 表单元素(上)</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica
 Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">表单标签:</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><form></code>表单标签</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)"><form></code>表单是一个包含表单元素的区域，包括起来的都是表单的内容<table style="border-collapse:collapse; border-spacing:0px; width:686px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px;
 line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div
 class="line">2</div><div class="line">3</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:647px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent"><div class="line"><form></div><div class="line"> <input type="text"/></div><div class="line"></form></div></pre></td></tr></tbody></table></li></ul></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">HTML标签 - <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Action</code>和确认按钮：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px">当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。</li></ul></li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica
 Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td
 class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div
 class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word;
 overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px;
 margin-bottom:0px; background-color:transparent"><div class="line"><form action="html.do" method="get"> </div><div class="line"> username: <input type="text" name="user" /> </div><div class="line"> <input type="submit" value="提 交" /></div><div class="line"></form></div></pre></td></tr></tbody></table><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">HTML</code>标签
 - 隐藏域隐藏标签：</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器</p></li></ul><table
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse;
 border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px;
 width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><form> </div><div class="line"> <input type="hidden" name="hid" value="value"></div><div class="line"></form></div></pre></td></tr></tbody></table><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><input></code>标签的掌握</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">常用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type</code>类型：</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><input type="" name="" value="" /></code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">type="text"</code> 单行文本输入框</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="password"</code> 密码（<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">maxlength=""</code>）</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="radio"</code> 单项选择（<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">checked="checked"</code>）</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">type="checkbox"</code> 多项选择</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="button"</code> 按钮</li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="submit"</code> 提交 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="image"</code>图片提交</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">type="file"</code> 上传文件</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">type="reset"</code>重置</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">type="hidden"</code> 隐藏</li></ul></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">关于表单中的设置默认值：</p><table
 style="border-collapse:collapse; border-spacing:0px; width:714px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"><pre style="white-space:pre-wrap;
 word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code" style="padding:0px;
 line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:675px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><input type="text" name=""
 value="今天心情不错" /></div><div class="line"><input type="radio" name="" value="" checked="checked"></div><div class="line"><input type="checkbox" name="" value="" checked="checked"></div></pre></td></tr></tbody></table></li></ul><table style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px;
 width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent;
 padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px;
 width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><select name="" ></div><div class="line"> <option value=""></option></div><div class="line"> <option value=""
 selected="selected"></option></div><div class="line"><select></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">textarea</code>没有默认值</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)"><label></code>标签的使用</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><label></label></code></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">label</code> 元素不会向用户呈现任何特殊效果。</li><li style="list-style:none; position:relative; padding-left:14px">不过，它为鼠标用户改进了可用性。</li><li style="list-style:none; position:relative; padding-left:14px">如果您在 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">label</code> 元素内点击文本，就会触发此控件。</li><li
 style="list-style:none; position:relative; padding-left:14px">就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)"><label></code> 标签的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">for</code> 属性应当与相关元素的 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">id</code>属性相同。</p></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">例子：（重要—注册表单–用户体验–必做）</p><table style="border-collapse:collapse; border-spacing:0px; width:700px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter"
 style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div
 class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:661px"><pre style="white-space:pre-wrap; word-wrap:break-word;
 overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px;
 margin-bottom:0px; background-color:transparent"><div class="line"><p>单向选择</p></div><div class="line"><label for="male">男：</label><input type="radio" name="sex" id="male"/></div><div class="line"><label for="nv">女：</label><input type="radio" name="sex"checked="check"/></div></pre></td></tr></tbody></table></li></ul></li></ul><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><h4 id="第七章-表单和表格-下" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t7" target="_blank"></a><a target="_blank" name="t7" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第七章-表单和表格-下"
 class="headerlink" title="第七章 表单和表格(下)" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第七章 表单和表格(下)</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px">表单和表格标签：<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><textarea></code>文本域标签</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)"><textarea></code>标签：</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><textarea></textarea></code>是文本域标签，可以在其中插入一段文字内容，它有两个常用属性<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">rows</code>和<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">cols</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">注意：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">rows</code>表示这个文本域有多少行</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">cols</code>表示这个文本域有多少列</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">除了这两个属性它还有<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">readonly</code>（只读，文本域的内容无法改变，相当于协议）和<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code>（鼠标放上提示）</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)"><select></code>标签的掌握</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)"><select></code> 表单数据提交给服务器时包括 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">name</code>属性<table style="border-collapse:collapse; border-spacing:0px; width:700px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px;
 line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div
 class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:661px"><pre
 style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><form> </div><div class="line"> <select name="" id=""></div><div class="line"> <option value="1">1月</option> </div><div class="line"> <option
 value="2">2月</option> </div><div class="line"></select></div><div class="line"></form></div></pre></td></tr></tbody></table></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">常用到的属性：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">disabled=“disabled” name="sel" size="2"</code></p></li></ul><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><table></code>表格标签</li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><table></code>表格标签：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><table></code>是表格标签，可以用它定义一个表格。</p><table
 style="border-collapse:collapse; border-spacing:0px; width:714px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"><pre style="white-space:pre-wrap;
 word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div
 class="line">6</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:675px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div
 class="line"><table border="1"></div><div class="line"> <tr></div><div class="line"> <td>姓名</td></div><div class="line"> <td>性别</td></div><div class="line"> </tr></div><div class="line"></table></div></pre></td></tr></tbody></table></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">注意：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><table></code>的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code>属性不能少</p></li></ul><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><tr></code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)"><td></code>标签的使用</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)"><tr></code>行标签：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><tr></code>可以定义表格中的一行，一个<<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">tr></tr></code>表示一行。</li></ul></li></ul></li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px;
 font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div
 class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code" style="padding:0px; line-height:1.5;
 vertical-align:top; border:0px; font-size:14px; width:680px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><table border="1"></div><div class="line"><tr></div><div class="line">
 <td>姓名</td></div><div class="line"> <td>性别</td></div><div class="line"></tr></div><div class="line"></div><div class="line"><tr></div><div class="line"> <td>姓名</td></div><div class="line"> <td>性别</td></div><div class="line"></tr></div><div class="line"></table></div></pre></td></tr></tbody></table><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><td></code>单元格标签:</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><td></code>可以定义表格中的一个单元格，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><td></td></code>表示一个单元格。<table
 style="border-collapse:collapse; border-spacing:0px; width:700px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"><pre style="white-space:pre-wrap;
 word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div
 class="line">6</div><div class="line">7</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:661px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent"><div class="line"><table border="1"></div><div class="line"><tr></div><div class="line"><td >姓名</td></div><div class="line"><td>性别</td></div><div class="line"><td>爱好</td></div><div class="line"></tr></div><div class="line"></table></div></pre></td></tr></tbody></table></li></ul><ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border-collapse</code> 属性设置是否将表格边框折叠为单一边框：</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">border-collapse:collapse</code>;</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">colspan</code>左右合并</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">rowspan</code>上下合并</li></ul></li></ul><p style="margin-top:25px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica
 Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"><span style="color:rgb(0,0,0)">第一部分总结</span>：</p><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px">非可视化标签：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">head</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">meta</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">style</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">scrpit.</code>..</li><li
 style="list-style:none; position:relative; padding-left:14px">可视化标签：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">img</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">div</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">span</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a</code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">ul</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px;
 vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">li</code>…</li><li style="list-style:none; position:relative; padding-left:14px">只有可视化标签，才能用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>改变它</li><li style="list-style:none; position:relative;
 padding-left:14px">单标签：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">meta</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">link</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">base</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">img</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">input</code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">br</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px;
 vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">hr</code></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">双标签：<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">html</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">head</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">body</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">div</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a</code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">p</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px;
 vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">span</code> ..<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ul</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">li</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ol</code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">dl</code> ….</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">常用可视化标签</span></p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">div</code></span><ul style="line-height:1.8em; padding:0px;
 list-style:none"><li style="list-style:none; position:relative; padding-left:14px">一般用它来布局</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">a</span> 超链接标签<ul style="line-height:1.8em; padding:0px;
 list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">href</code>*属性：设置跳转的网页地址</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">target</code>属性：设置跳转的目标</li><li
 style="list-style:none; position:relative; padding-left:14px">结论：凡事页面可以点击跳转或者表单提交的文字，都用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a</code>标签</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">img</code></span><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">src</code>*属性用来设置图片的url数据</li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">alt</code>提供给搜索引擎搜索的</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">width</code></li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">height</code></li><li style="list-style:none; position:relative; padding-left:14px">结论 ：显示图片</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><span
 style="color:rgb(0,0,0)">ul li</span><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">列表</li><li style="list-style:none; position:relative; padding-left:14px">结论：只要将来设计页面中有固定样式的列表，就用ul和li</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">table</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">caption</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tr</code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">td (th)</code></span><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">慢慢已经被淘汰了 被ul li代替</li><li style="list-style:none; position:relative; padding-left:14px">如果是合并竖排的就是合并行（<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">rowspan</code>）</li><li style="list-style:none; position:relative; padding-left:14px">如果是合并横排的就是合并列（<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">colspan</code>）</li></ul></li></ul></li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2;
 font-size:15px; line-height:2em"><span style="color:rgb(0,0,0)">HTML部分导图总结</span></p><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans
 CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank"
 href="http://www.html5star.com/manual/html5label-meaning/" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">HTML5标签集合</a></li></ul><p style="margin-top:25px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"><img
 src="http://upload-images.jianshu.io/upload_images/1480597-1950ccf50810a92b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" style="border:0px; max-width:100%; max-height:100%; height:auto"></p><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px;
 line-height:2em"><img src="http://upload-images.jianshu.io/upload_images/1480597-3d15eb9c7be0cb65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" style="border:0px; max-width:100%; max-height:100%; height:auto"></p><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 orphans:2; widows:2; font-size:15px; line-height:2em"><img src="http://upload-images.jianshu.io/upload_images/1480597-4b0073fd050ba4f3.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" style="border:0px; max-width:100%; max-height:100%; height:auto"></p><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><h3 id="第二部分-CSS" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal; font-size:16px"><a name="t8" target="_blank"></a><a target="_blank" name="t8" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第二部分-CSS"
 class="headerlink" title="第二部分 CSS" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第二部分 CSS</h3><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第八章-css基础知识" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t9" target="_blank"></a><a
 target="_blank" name="t9" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第八章-css基础知识" class="headerlink" title="第八章 css基础知识" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent"></a>第八章 css基础知识</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans
 GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>基础知识：<ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>样式表的定义</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">css</code>：（Cascading Style Sheets）层叠样式表；</li></ul></li><li style="list-style:none; position:relative; padding-left:14px">分类及位置：内部样式<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">-head</code>区域<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">style</code>标签里面<ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">外部样式-<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">link</code>调用</li><li style="list-style:none; position:relative; padding-left:14px">内联样式-标签元素里面</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>内的注释：/<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">*</code>注释内容<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">*</code>/</li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>样式表的语法</p><ul style="line-height:1.8em; padding:0px;
 list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。</p></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">盒子名或者标签名{属性:值;}</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">CSS中几种颜色的表示方法</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><span
 style="color:rgb(0,0,0)">用颜色名表示</span><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">有17个预先确定的颜色，它们是<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">aqua</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">black</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">blue</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">fuchsia</code>, <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">gray</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">green</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">lime</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">maroon</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">navy</code>,<br>　　<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">olive</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">orange,</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">purple</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">red</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">silver</code>, <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">teal</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">white</code>, and <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">yellow</code></li></ul></li></ul></li></ul><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">用十六进制的颜色值表示(红、绿、蓝)</span></p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">#FF0000</code>或者<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">#F00</code></li></ul></li><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">用rgb(r,g,b)函数表示</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px">如：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">rgb(255,255,0)</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px">如：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">hsl(120,100%,100%)</code>,色调0代表红色，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">120</code>代表绿色，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">240</code>代表<br>蓝色</li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">rgba(r,g,b,a)</code>函数表示</span></p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">其中<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a</code>表示的是改颜色的透明度，取值范围是<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">0~1</code>，其中<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">0</code>代表完全透明</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">用hsla(Hue,Saturation,Lightness,alpha)函数表示</span></p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">色调、饱和度、亮度、透明度</li></ul></li><li style="list-style:none; position:relative; padding-left:14px">例子</li></ul></li></ul></li></ul><table style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px;
 width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent;
 padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td
 class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"> <span class="tag" style="color:rgb(41,115,183)"><<span
 class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">style</span>=<span class="string" style="color:rgb(26,188,156)">"position:absolute;top:0px"</span>></span></div><div class="line"> <span class="tag" style="color:rgb(41,115,183)"><<span
 class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">style</span>=<span class="string" style="color:rgb(26,188,156)">"background-color:gray;"</span>></span>background-color:gray<span class="tag" style="color:rgb(41,115,183)"></<span class="name"
 style="color:rgb(82,82,82)">div</span>></span></div><div class="line"> <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">style</span>=<span class="string" style="color:rgb(26,188,156)">"background-color:#F00;"</span>></span>background-color:#F00<span
 class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">div</span>></span></div><div class="line"> <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">style</span>=<span
 class="string" style="color:rgb(26,188,156)">"background-color:#ffff00;"</span>></span>background-color:#ffff00<span class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">div</span>></span></div><div class="line"> <span
 class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">style</span>=<span class="string" style="color:rgb(26,188,156)">"background-color:rgb(255,0,255);"</span>></span>background-color:rgb(255,0,255)<span
 class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">div</span>></span></div><div class="line"> <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">style</span>=<span
 class="string" style="color:rgb(26,188,156)">"background-color:hsl(120,80%,50%);"</span>></span>background-color:hsl(120,80%,50%)<span class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">div</span>></span></div><div class="line">
 <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">style</span>=<span class="string" style="color:rgb(26,188,156)">"background-color:rgba(255,0,255,0.5);"</span>></span>background-color:rgba(255,0,255,0.5)<span
 class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">div</span>></span></div><div class="line"> <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">style</span>=<span
 class="string" style="color:rgb(26,188,156)">"background-color:hsla(120,80%,50%,0.5);"</span>></span>background-color:hsla(120,80%,50%,0.5)<span class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">div</span>></span></div><div
 class="line"><span class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">div</span>></span></div></pre></td></tr></tbody></table><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"><img src="http://upload-images.jianshu.io/upload_images/1480597-39e61a813f637282.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
 alt="" style="border:0px; max-width:100%; max-height:100%; height:auto"></p><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">内部样式表<ul style="line-height:1.8em; padding:0px; list-style:none"><li
 style="list-style:none; position:relative; padding-left:14px">当单个页面需要设置样式时，就应该使用内部样式表。</li><li style="list-style:none; position:relative; padding-left:14px">使用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><style></style></code>标签在文档<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><head></head></code>里面定义内部样式表</li></ul></li></ul><table
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse;
 border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code" style="padding:0px; line-height:1.5;
 vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><head></div><div class="line"> <style type="text/css" ></div><div class="line">
 p{color:red;}</div><div class="line"> </style></div><div class="line"></head></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">从外部引入到样式分为两种：（注意写在<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">head</code>标签里面）</li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>文件，然后引用到我们的页面中。</p></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Link</code>样式表式： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><link rel=”stylesheet”
 type=”text/css” href=”my.css”(href表示路径)></code></p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Html</code>式： <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)"><style type="text/css">@import url("css.css");></style></code></p></li></ul><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">内联样式表（优先级高）</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">写在标签里面的样式</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">如：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><p style="color:red;"></p></code></p></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">表示给<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">p</code>标签里面的文字颜色设置为红色</p></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">区别：外链样式与导入样式</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">link</code>标签是属于<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">xhtml</code>范畴，而<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">@import</code>则是<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css2.1</code>中特有的。<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">link</code>标签除了可以加载<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>外，还可以做很多其它的事情，比如定义<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">RSS</code>，定义<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">rel</code>连接属性等，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">@import</code>就只能加载<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>了。</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">加载的顺序的区别，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">link</code>加载的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>时，是一种并行(没有尝试是否是这样)加载<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>方式，而<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">@impor</code>则在整个页面加载完成后才加载。</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">兼容性的区别，因<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">@import``CSS2.1</code>才特有的，所以对于不兼容<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">CSS2.1</code>的浏览器来说，无效。</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">在样式控制上(比如动态改变网页的布局时,使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><a target="_blank"
 href="http://lib.csdn.net/base/javascript" class="replace_word" title="JavaScript知识库" style="text-decoration:none; color:rgb(223,52,52); font-weight:bold">JavaScript</a></code>操作<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">DOM</code>)的区别，此时<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">@import</code>就无能为力了。</p></li></ul></li></ul><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">样式的优先级补充</span><ul style="line-height:1.8em; padding:0px; list-style:none"><li
 style="list-style:none; position:relative; padding-left:14px">相同权值情况下，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">内联样式表（标签内部）</code> > <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">嵌入样式表（当前文件中）</code>> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">外部样式表（外部文件中）</code></li></ul></li></ul></li><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">权值不同时，浏览器是根据权值来判断使用哪种<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>样式的，哪种样式权值高就使用哪种样式</p></li><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">层叠优先级是:</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">浏览器缺省</code>< <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">外部样式表</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">内部样式表</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">内联样式</code></li></ul></li><li style="list-style:none; position:relative;
 padding-left:14px">其中样式表又有:<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">类选择器</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">类派生选择器</code><<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ID选择器</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ID派生选择器</code></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">派生选择器以前叫上下文选择器，所以完整的层叠优先级是:</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">浏览器缺省</code> <<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">外部样式表</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">外部样式表类选择器</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">外部样式表类派生选择器</code>< <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">外部样式表ID选择器</code>< <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">外部样式表ID派生选择器</code>< <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">内部样式表</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">内部样式表类选择器</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">内部样式表类派生选择器</code> < <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">内部样式表ID选择器</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">内部样式表ID派生选择器</code> < <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">内联样式</code>…共<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">12</code>个优先级</li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">另外，如果同一个元素在没有其他样式的作用影响下，其<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Class</code>定义了多个并以空格分开，其优先级顺序为：</p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">一个元素同时应用多个<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">class</code>，后定义的优先（即近者优先），加上<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">!important</code>者最优先！</li></ul></li></ul><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><h4 id="第九章-css选择器-上" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t10" target="_blank"></a><a target="_blank" name="t10" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第九章-css选择器-上"
 class="headerlink" title="第九章 css选择器(上)" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第九章 css选择器(上)</h4><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>选择器：<ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">class</code>类选择器可以重复利用</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">id</code>选择器唯一</li></ul></li><li style="list-style:none; position:relative; padding-left:14px">标签选择器<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">什么是选择器：css选择器就是要改变样式的对象</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">选择器<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">{属性:值;属性:值;}</code></p></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">标签选择器：页面中所有的标签都是一个选择器 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">p{color:red;}</code></p></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ID</code>选择器</p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">选择<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">id</code>命名的元素 以 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">#</code> 开头 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">#p1{color:#0f0;}</code></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">类选择器</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">class</code>选择器，选择<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">clas</code>命名的元素 以<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.</code>开头 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.first{color:#00f;}</code></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>代码写完后上线前要经过压缩处理</li><li style="list-style:none; position:relative; padding-left:14px">本地和服务器分两个<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>版本（备份）</li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">压缩后注释都清除，空间体积减少</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">群组选择器</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">选择多个元素,以逗号隔开 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">#main,.first,span,a,h1{color:red;}</code></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px">包含选择器<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">p</code><ul style="line-height:1.8em;
 padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">span{color:red;}</code></li></ul></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">属性选择器</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">选择包含某一属性的元素</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a[title]{color:red;}</code> 选择包含<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code>的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a</code>标签</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a[title][href]{color:red;}</code> 选择包含<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code>和<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">href</code>的<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">a</code>标签</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">></code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">+</code> 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">p > span{color:red;}</code></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px">相邻兄弟选择器：只选择后面的相邻兄弟元素<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">p + span{color:red;}</code></li></ul></li></ul><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><h4 id="第十章-css选择器-下" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t11" target="_blank"></a><a target="_blank" name="t11" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第十章-css选择器-下"
 class="headerlink" title="第十章 css选择器(下)" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第十章 css选择器(下)</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)"><a></code>伪类选择器<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:link {color:#FF0000;}</code> / 未访问的链接 /
 （只用于a标签）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:visited {color:#00FF00;}</code> / 已访问的链接 / （只用于a标签）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:hover {color:#FF00FF;}</code>/*
 鼠标移动到链接上</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">*/</code>（可和其他标签结合一起用）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:active {color:#0000FF;}</code> / 选定的链接 /</li><li
 style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">注意</span><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">伪类选择器的排序很重要，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:link</code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">a:visited</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:hover</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:active</code>，记作<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">lvha</code></li></ul></li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">输入伪类选择器（针对表单）</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">input:focus{color:red;}</code> / 键盘输入焦点 /</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">其他伪类选择器</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">p:first-child{color:red;}</code> /<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">* 第一个p *</code>/</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">:before</code> 在元素之前添加内容。</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">:after</code> 在元素之后添加内容。</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>优先规则</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">内联样式表-> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ID</code> 选择器—> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Class</code> 类选择器->标签选择器</li></ul></li></ul><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><h4 id="第十一章-背景属性" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t12" target="_blank"></a><a target="_blank" name="t12" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第十一章-背景属性"
 class="headerlink" title="第十一章 背景属性" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第十一章 背景属性</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">背景属性：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">背景的添加 ：</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">背景颜色的添加:</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background:red;</code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">backgronnd-color:red;</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">背景图片的添加：</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background:url(“images/1.jpg”);</code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">backgronnd-image:url(“images/1.jpg”);</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px">背景的平铺</li><li style="list-style:none; position:relative; padding-left:14px">什么是平铺？平铺就是图片是否重复出现<ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">不平铺：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-repeat:no-repeat;</code></li><li style="list-style:none; position:relative; padding-left:14px">水平方向平铺：<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">background-repeat:repeat-x;</code></li><li style="list-style:none; position:relative; padding-left:14px">垂直方向平铺：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-repeat:repeat-y;</code></li><li style="list-style:none; position:relative;
 padding-left:14px">完全平铺：默认为完全平铺</li></ul></li><li style="list-style:none; position:relative; padding-left:14px">背景图片的定位<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">背景图片的定位就是可以设置显示背景图片的位置，通过属性<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">background-position</code>来实现</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-position</code>的取值可为英文单词或者数值和百分值。</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">background-positon</code>的英文单词取值</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">top left</code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">top center</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">top right</code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">center left</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">center center</code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">center right</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">bottom left</code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">bottom center</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ottom right</code></li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-positon</code>的数值取值<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-position:x
 y;</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">positon</code>的百分值取值<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">background-position:x% y%;</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">背景图片的大小</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">背景图片的大小可以通过属性<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-size</code>来设置<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-size</code>的取值可为数值和百分值。</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-size</code>的数值取值</p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-size:x y;</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-size</code>的数值取值</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-size:x% y%;</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">背景图片的滚动</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">背景图片是否随着内容的滚动而滚动由<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-attachment</code>设置</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">background-attachment:fixed;</code> 固定，不随内容的滚动而滚动</p></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background-attachment:scroll;</code> 滚动，随内容的滚动而滚动</li></ul></li></ul></li></ul><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><h4 id="第十二章-文字文本属性" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t13" target="_blank"></a><a target="_blank" name="t13" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第十二章-文字文本属性"
 class="headerlink" title="第十二章 文字文本属性" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第十二章 文字文本属性</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>文字文本属性：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">文字属性</span></p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">color:red;</code> 文字颜色</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">font-size:12px</code>;
 文字大小</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">font-weight:“bold”</code> 文字粗细(<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">bold/normal</code>)</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">font-family:“宋体”</code> 文字字体</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">font-variant:small-caps</code>小写字母以大写字母显示</li></ul></li></ul></li></ul><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">文本属性</span></p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">text-align:center;</code> 文本对齐(<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">right</code>/<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">left</code>/<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">center</code>)</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">line-height:10px;</code> 行间距(可通过它实现文本的垂直居中)</li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">text-indent:20px;</code> 首行缩进</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">text-decoration:none;</code><ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">文本线(<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">none</code>/<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">underline</code>/<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">overline</code>/<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">line-through</code>)</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">letter-spacing</code>: 字间距</li></ul></li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第十三章-盒子模型" style="margin:28px
 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2;
 font-weight:normal"><a name="t14" target="_blank"></a><a target="_blank" name="t14" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第十三章-盒子模型"
 class="headerlink" title="第十三章 盒子模型" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第十三章 盒子模型</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><span style="color:rgb(0,0,0)">盒子模型</span><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">盒子模型就是一个有高度和宽度的矩形区域</li><li style="list-style:none; position:relative;
 padding-left:14px">所有<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">html</code>标签都是盒子模型</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">div</code>标签自定义盒子模型</li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">所有的标签都是盒子模型</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">class</code>和<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">id</code>的主要差别是：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">class</code>用于元素组（类似的元素，或者可以理解为某一类元素），而<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">id</code>用于标识单独的唯一的元素。</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">盒子模型的组成</span></p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">盒子模型组成部分：<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">自身内容：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">width</code>、h<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">eight</code> 宽高</li><li style="list-style:none; position:relative; padding-left:14px">内边距： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code></li><li style="list-style:none; position:relative; padding-left:14px">盒子边框： <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">border</code> 边框线</li><li style="list-style:none; position:relative; padding-left:14px">与其他盒子距离： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin</code>外边距</li><li style="list-style:none; position:relative; padding-left:14px">内容+内边距+边框+外边距=面积</li></ul></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code> 边框</p><ul style="line-height:1.8em; padding:0px;
 list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">常见写法 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border:1px solid #f00;</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">单独属性：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">border-width</code>:</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border-style:</code><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">dotted</code> 点状虚线</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">dashed</code>（虚线）</li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">solid</code>（实线）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">double</code>（双实线）</li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border-color</code> (颜色)</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code> 内边距</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em">值：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">像素</code>/<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">厘米</code>等长度单位、百分比</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding:10px;</code> 上下左右</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding:10px
 10px;</code> 上下 左右</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding:10px 10px 10px;</code> 上 左右 下</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding:10px
 10px 10px 10px;</code> 上 右 下 左（设置4个点–>顺时针方向）</li></ul></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">单独属性：</p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding-top:</code></li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">padding-right:</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding-bottom:</code></li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">padding-left:</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">width</code>和<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">height</code>减小</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">margin 外边距</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">值：与<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code>相同</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">单独属性：与<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">padding</code>相同</p></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并</p></li></ul><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"><span style="color:rgb(0,0,0)">补充盒子模型内容</span></p><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">标准盒子模型</span></p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">盒子模型是<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ie</code>盒子模型和标准 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">w3c</code> 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型</li></ul></li></ul><p
 style="margin-top:25px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"><img src="http://upload-images.jianshu.io/upload_images/1480597-320bad065d62c499.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" style="border:0px; max-width:100%;
 max-height:100%; height:auto"></p><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2;
 widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">从上图可以看到标准 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">w3c</code> 盒子模型的范围包括 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">content</code>，并且 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">content</code>部分不包含其他部分</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">IE盒子模型</span></p></li></ul><p
 style="margin-top:25px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"><img src="http://upload-images.jianshu.io/upload_images/1480597-693242e2f03506f8.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" style="border:0px; max-width:100%;
 max-height:100%; height:auto"></p><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2;
 widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">从上图可以看到 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ie</code>盒子模型的范围也包括 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin</code>、<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">border</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">content</code></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em">和标准 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">w3c</code> 盒子模型不同的是：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ie</code> 盒子模型的 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">content</code> 部分包含了 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code>和 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">padding</code></p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">IE</code>盒子模型<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">width</code> = <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code>+<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code>+<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">内容</code></p></li><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">标准盒子模型 = 内容的宽度（不包含<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code>+<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code>）</p></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">例：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px">一个盒子的 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin</code>为 20px，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code> 为 1px，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code>为 10px，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">content</code> 的宽为
 200px、高为 50px，假如用标准 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">w3c</code> 盒子模型解释，那么这个盒子需要占据的位置为：宽 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">20*2+1*2+10*2+200=262px</code>、高 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">20*2+1*2*10*2+50=112px</code>，盒子的实际大小为：宽 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">1*2+10*2+200=222px</code>、高 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">1*2+10*2+50=72px</code>；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">20*2+200=240px</code>、高 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">20*2+50=70px</code>，盒子的实际大小为：宽 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">200px</code>、高 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">50px</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">那应该选择哪中盒子模型呢？当然是“标准 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">w3c</code> 盒子模型”了。怎么样才算是选择了“标准 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">w3c</code>盒子模型”呢？很简单，就是在网页的顶部加上 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">doctype</code> 声明。</p></li><li
 style="list-style:none; position:relative; padding-left:14px">假如不加<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">doctype</code> 声明，那么各个浏览器会根据自己的行为去理解网页，即 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ie</code>浏览器会采用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ie</code> 盒子模型去解释你的盒子，而 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">ff</code>会采用标准<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">w3c</code> 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。</li><li style="list-style:none; position:relative; padding-left:14px">反之，假如加上了 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">doctype</code> 声明，那么所有浏览器都会采用标准 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">w3c</code>盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。</li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans
 GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">jquery</code> 做的例子来证实一下</li></ul><table
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse;
 border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div
 class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:680px"><pre style="white-space:pre-wrap;
 word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><html></div><div class="line"><head></div><div class="line"><title>你用的盒子模型是？</title></div><div class="line"><script language="javascript" src="jquery.min.js"></script></div><div
 class="line"><script language="javascript"></div><div class="line">var sbox = $.boxmodel ? "标准w3c":"ie";</div><div class="line">document.write("您的页面目前支持："+sbox+"盒子模型");</div><div class="line"></script></div><div class="line"></head></div><div class="line"><body></div><div
 class="line"></body></div><div class="line"></html></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans
 CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">　上面的代码没有加上 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">doctype</code> 声明，在 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">ie</code> 浏览器中显示 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ie</code>盒子模型，在 ff 浏览器中显示“标准<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">w3c</code>盒子模型”。</li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td
 class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div
 class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div
 class="line">12</div><div class="line">13</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:680px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div
 class="line"><!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"></div><div class="line"><html></div><div class="line"><head></div><div class="line"><title>你用的盒子模型是标准w3c盒子模型</title></div><div
 class="line"><script language="javascript" src="jquery.min.js"></script></div><div class="line"><script language="javascript"></div><div class="line">var sbox = $.boxmodel ? "标准w3c":"ie";</div><div class="line">document.write("您的页面目前支持："+sbox+"盒子模型");</div><div
 class="line"></script></div><div class="line"></head></div><div class="line"><body></div><div class="line"></body></div><div class="line"></html></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px">　代码2 与代码1 唯一的不同的就是顶部加了 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">doctype</code>声明。在所有浏览器中都显示“标准 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">w3c</code>盒子模型”</li></ul><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">所以为了让网页能兼容各个浏览器，让我们用标准 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">w3c</code> 盒子模型</p></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">扩展</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank"
 href="http://www.jianshu.com/p/e2eb0d8c9de6" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">学会使用box-sizing布局</a></li></ul></li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第十四章-块元素、行元素与溢出" style="margin:28px
 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2;
 font-weight:normal"><a name="t15" target="_blank"></a><a target="_blank" name="t15" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第十四章-块元素、行元素与溢出"
 class="headerlink" title="第十四章 块元素、行元素与溢出" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第十四章 块元素、行元素与溢出</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px">基本概念<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；</li><li style="list-style:none; position:relative; padding-left:14px">行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">行块转换</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:none</code>; 不显示</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:block</code>; 变成块级元素</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:inline</code>; 变成行级元素</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:inline-block</code>;
 以块级元素样式展示，以行级元素样式排列</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">溢出</p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">overflow:hidden</code>; 溢出隐藏</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">overflow:scroll</code>;
 内容会被修剪，浏览器会显示滚动条</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">overflow:auto</code>; 如果内容被修剪，则产生滚动条</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">文本不换行：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">white-space:nowrap</code>;</p></li><li style="list-style:none; position:relative; padding-left:14px">长单词换行：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">word-wrap:break-word</code>;</li></ul><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">行内元素和快级元素小结</p><ul style="line-height:1.8em; padding:0px;
 list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">一、<span style="color:rgb(0,0,0)">块级元素</span>：block element</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">float</code>浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；</li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。</p></li><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">DIV</code> 是最常用的块级元素，元素样式的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:block</code>都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。</p></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">二、<span style="color:rgb(0,0,0)">行内元素</span>：inline element</p><ul style="line-height:1.8em; padding:0px;
 list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">SPAN</code>元素，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">IFRAME</code>元素和元素样式的<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">display : inline</code>的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">三、<span
 style="color:rgb(0,0,0)">block（块）元素的特点:</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">①、总是在新行上开始；</li><li style="list-style:none; position:relative;
 padding-left:14px">②、高度，行高以及外边距和内边距都可控制；</li><li style="list-style:none; position:relative; padding-left:14px">③、宽度缺省是它的容器的100%，除非设定一个宽度。</li><li style="list-style:none; position:relative; padding-left:14px">④、它可以容纳内联元素和其他块元素</li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">四、<span style="color:rgb(0,0,0)">inline元素的特点</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px">①、和其他元素都在一行上；</li><li style="list-style:none; position:relative; padding-left:14px">②、高，行高及外边距和内边距不可改变；</li><li style="list-style:none; position:relative; padding-left:14px">③、宽度就是它的文字或图片的宽度，不可改变</li><li
 style="list-style:none; position:relative; padding-left:14px">④、内联元素只能容纳文本或者其他内联元素</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span
 style="color:rgb(0,0,0)">对行内元素，需要注意如下</span>:</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">设置宽度<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">width</code> 无效。
 设置高度<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">height</code>无效，可以通过<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">line-height</code>来设置。 设置<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin</code></li><li style="list-style:none; position:relative; padding-left:14px">只有左右<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin</code>有效，上下无效。</li><li
 style="list-style:none; position:relative; padding-left:14px">设置<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code>只有左右<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code>有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。</li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">五、<span style="color:rgb(0,0,0)">常见的块状元素</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">address</code> – 地址</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">blockquote</code> –
 块引用</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">center</code> – 举中对齐块</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">dir</code> –
 目录列表</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">div</code> – 常用块级容易，也是<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS layout</code>的主要标签</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">dl</code> – 定义列表</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">fieldset</code> – <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">form</code>控制组</li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">form</code> – 交互表单</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">h1</code> – 大标题</li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">h2</code> – 副标题</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">h3</code> – 3级标题</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">h4</code> – 4级标题</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">h5</code> – 5级标题</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">h6</code> – 6级标题</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">hr</code> – 水平分隔线</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">isindex</code> – <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">input prompt</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">menu</code> –
 菜单列表</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">noframes</code> – <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">frames</code>可选内容，（对于不支持frame的浏览器显示此区块内容</li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">noscript</code> – 可选脚本内容（对于不支持<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">script</code>的浏览器显示此内容）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ol</code> – 有序表单</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">p</code> – 段落</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">pre</code> –
 格式化文本</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">table</code> – 表格</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ul</code> – 无序列表</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">六、<span style="color:rgb(0,0,0)">常见的内联元素</span></p><ul style="line-height:1.8em; padding:0px;
 list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a</code> – 锚点</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">abbr</code> –
 缩写</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">acronym</code> – 首字</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">b</code> – 粗体(不推荐)</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">bdo</code> – <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">bidi override</code></li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">big</code> – 大字体</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">br</code> – 换行</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">cite</code> –
 引用</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">code</code> – 计算机代码(在引用源码的时候需要)</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">dfn</code> –
 定义字段</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">em</code> – 强调</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">font</code> –
 字体设定(不推荐)</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">i</code> – 斜体</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">img</code> –
 图片</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">input</code> – 输入框</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">kbd</code> –
 定义键盘文本</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">label</code> – 表格标签</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">q</code> – 短引用</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">s</code> – 中划线(不推荐)</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">samp</code> –
 定义范例计算机代码</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">select</code> – 项目选择</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">small</code> –
 小字体文本</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">span</code> – 常用内联容器，定义文本内区块</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">strike</code> –
 中划线</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">strong</code> – 粗体强调</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sub</code> –
 下标</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sup</code> – 上标</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">textarea</code> –
 多行文本输入框</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tt</code> – 电传文本</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">u</code> – 下划线</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">七，<span style="color:rgb(0,0,0)">可变元素</span></p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">可变元素为根据上下文语境决定该元素为块元素或者内联元素。</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">applet</code> - <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">java applet</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">button</code> - 按钮</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">del</code>- 删除文本</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">iframe</code> - <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">inline frame</code></li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">ins</code> - 插入的文本</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">map</code> - 图片区块(<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">map</code>)</li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">object</code> - <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">object</code>对象</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">script</code> -
 客户端脚本</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">八、<span style="color:rgb(0,0,0)">行内元素与块级元素有什么不同</span></p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">区别一：</p><ul style="line-height:1.8em; padding:0px;
 list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度</li><li style="list-style:none; position:relative; padding-left:14px">行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">区别二：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px">块级：块级元素可以设置宽高</li><li style="list-style:none; position:relative; padding-left:14px">行内：行内元素不可以设置宽高</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em">区别三：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">块级：块级元素可以设置<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin</code>，<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">padding</code></li><li style="list-style:none; position:relative; padding-left:14px">行内：行内元素水平方向的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin-left;</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin-right;</code></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding-left;</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding-right</code>;可以生效。但是竖直方向的<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">margin-bottom</code>; <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin-top</code>; <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding-top</code>; <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding-bottom</code>;却不能生效。</p></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">区别四：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px">块级：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:block</code>;</li><li style="list-style:none; position:relative; padding-left:14px">行内：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:inline</code>;</li></ul></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">替换元素有如下：（和<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">img</code>一样的设置方法）</p><ul style="line-height:1.8em; padding:0px;
 list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><img></code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><input></code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><textarea></code>、<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)"><select></code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><object></code>都是替换元素，这些元素都没有实际的内容</li></ul></li></ul></li><li style="list-style:none; position:relative;
 padding-left:14px">可以通过修改<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">display</code>属性来切换块级元素和行内元素</li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第十五章-定位" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t16" target="_blank"></a><a target="_blank" name="t16" style="color:rgb(12,137,207)"></a><a
 target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第十五章-定位" class="headerlink" title="第十五章 定位" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第十五章
 定位</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2;
 height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">static</code>静态定位（不对它的位置进行改变，在哪里就在那里）</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">默认值。没有定位，元素出现在正常的流中（忽略 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">top</code>,<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">bottom,</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">left, right</code> 或者 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">z-index</code> 声明）。</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">fixed</code>固定定位（参照物–浏览器窗口）—做 弹窗广告用到</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px">生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"left"</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"top"</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"right"</code>以及 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">"bottom"</code>属性进行规定。</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">relative</code>（相对定位
 ）（参照物以他本身）</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">生成相对定位的元素，相对于其正常位置进行定位。</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">absolute</code>（绝对定位）(除了<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">static</code>都可以，找到参照物–>与它最近的已经有定位的父元素进行定位)</p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">生成绝对定位的元素，相对于 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">static</code> 定位以外的第一个父元素进行定位。</li><li style="list-style:none; position:relative;
 padding-left:14px">元素的位置通过 “<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px;
 vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">left"</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"top"</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"right"</code> 以及 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"bottom"</code> 属性进行规定</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">z-index</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">z-index</code> 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。</li><li style="list-style:none; position:relative; padding-left:14px">定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">一切皆为框</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px">块级元素: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">div</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">h1</code>或<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">p</code>元素 即：显示为一块内容称之为 “块框“ ;</li><li style="list-style:none;
 position:relative; padding-left:14px">行内元素: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">span</code>,<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">strong</code>,<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a</code>等元素 即：内容显示在行中称 “行内框”;</li><li style="list-style:none;
 position:relative; padding-left:14px">使用display属性改变成框的类型 即：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:block</code>; 让行内元素设置为块级元素，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:none;</code> 没有框</li></ul></li><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">相对定位：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">如果对一个元素进行相对定位，它将出现在它所在的位置上。</li><li
 style="list-style:none; position:relative; padding-left:14px">通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.adv_relative { position: relative; left: 30px; top: 20px;
 }</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">绝对定位：</p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">元素的位置相对于最近的已定位祖先元素，如果元素没有已定位 的祖先元素，它的位置相对于最初的包含块。 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.adv_absolute { position: absolute; left: 30px; top: 20px; }</code></li></ul></li></ul><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"><img src="http://upload-images.jianshu.io/upload_images/1480597-f72c1c8486445df1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
 alt="" style="border:0px; max-width:100%; max-height:100%; height:auto"><br><img src="http://upload-images.jianshu.io/upload_images/1480597-7ab9cda0bbd7e62f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" style="border:0px; max-width:100%; max-height:100%;
 height:auto"></p><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2;
 widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第十六章-框架" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t17" target="_blank"></a><a target="_blank" name="t17" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第十六章-框架"
 class="headerlink" title="第十六章 框架" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第十六章 框架</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">frameset</code>框架：<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><frameset></code> —-
 用来定义一个框架；双标签<br>不能和 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)"><body></code> 一起使用</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">rows</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">cols</code>属性</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">rows</code> 定义行表示框架有多少行（取值 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">px</code>/<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px;
 vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">%</code>/ <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">*</code> ）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">cols</code> 定义列表示框架有多少列（取值<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">px</code>/ <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">%</code>/ <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">*</code> ）</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">frame子框架</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">frame</code>> —- 表示框架中的某一个部分；单标签，要跟结束标志</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">src</code> 显示的网页的路径</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">name</code> 框架名</li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">frameborder</code> 边框线（取值 0 / 1）</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em"><<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">noframes</code>>属性</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">noframes</code>> 提供不支持框架的浏览器显示<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">body</code>的内容；双标签</p></li></ul></li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td
 class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div
 class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code" style="padding:0px; line-height:1.5;
 vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><frameset></div><div class="line"> <frame src=“” /></div><div class="line">
 <frame src=“” /></div><div class="line"> <frame src=“” /></div><div class="line"> <noframes></div><div class="line"> <body>内容</body></div><div class="line"> </noframes></div><div class="line"></frameset></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><iframe></code>内联框架<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">iframe</code>元素会创建包含另外一个文档的内联框架（即行内框架）</li><li style="list-style:none; position:relative; padding-left:14px">允许和 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">body</code> 一起使用</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">width</code> 宽（取值 px / %）</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">height</code> 高（取值 px / %）</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">name</code> 框架名</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">frameborder</code> 边框线（取值 0 / 1）</li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">src</code> 显示的网页的路径</li></ul></li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="第十七章-css高级属性" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t18" target="_blank"></a><a target="_blank" name="t18" style="color:rgb(12,137,207)"></a><a target="_blank"
 href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第十七章-css高级属性" class="headerlink" title="第十七章 css高级属性" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第十七章
 css高级属性</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2;
 height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">opacity</code>透明属性<ul style="line-height:1.8em; padding:0px;
 list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro
 Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">opacity</code><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative;
 padding-left:14px">对于<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">IE6/7/</code>，使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">filter:alpha(opacity:值;</code>) 值为<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">0-100</code></li><li style="list-style:none; position:relative;
 padding-left:14px">对于<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">Webkit</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Opera</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Firefox</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">IE9+</code>，使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">opacity</code>:值;
 值为<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">0-1</code></li><li style="list-style:none; position:relative; padding-left:14px">对于早期火狐，使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">-moz-opacity</code>:值; 值为<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">0-1</code></li><li style="list-style:none;
 position:relative; padding-left:14px">所以写透明属性时，一般写法是</li></ul></li></ul></li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans
 CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top;
 border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div
 class="line">4</div><div class="line">5</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div
 class="line"> { </div><div class="line"> opacity:0.5;</div><div class="line"> filter:alpha(opacity：50);/*0-100*/</div><div class="line"> -moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐兼容问题的解决</div><div class="line">}</div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border-radius</code>圆角边框属性</p><ul style="line-height:1.8em;
 padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">向 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">div</code> 元素添加圆角边框<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border-radius:10px</code>;</li></ul></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">box-shadow</code>阴影属性</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">box-shadow</code>属性向框添加阴影效果,后面跟4个参数。</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">box-shadow:0px 0px 10px #000;</code></p></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><embed></code>属性</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">是<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><a target="_blank" href="http://lib.csdn.net/base/html5" class="replace_word" title="HTML5知识库"
 style="text-decoration:none; color:rgb(223,52,52); font-weight:bold">HTML5</a></code>中新增的标签,媒体嵌入插件标签，可以通过<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><embed></code>插入音频或视频</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><embed src=“media/music.mp3” /></code></p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em">格式<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.mid</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.wav</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.mp3</code>等</p></li></ul></li></ul><hr style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px;
 border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em;
 padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">CSS部分导图总结</span></li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica
 Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2;
 font-size:15px; line-height:2em"><img src="http://upload-images.jianshu.io/upload_images/1480597-4b55b5085a7d0c56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" style="border:0px; max-width:100%; max-height:100%; height:auto"></p><ul style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li
 style="list-style:none; position:relative; padding-left:14px"><br></li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"><img src="http://upload-images.jianshu.io/upload_images/1480597-a893d4023c39c78a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
 alt="" style="border:0px; max-width:100%; max-height:100%; height:auto"></p><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans
 GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>常见简写</li></ul><p
 style="margin-top:25px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"><img src="http://upload-images.jianshu.io/upload_images/1480597-cbce5ef927ab2589.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="css简写速查" style="border:0px; max-width:100%;
 max-height:100%; height:auto"></p><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px;
 orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h3 id="第三部分-附录" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans
 GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal; font-size:16px"><a name="t19" target="_blank"></a><a target="_blank" name="t19" style="color:rgb(12,137,207)"></a><a target="_blank"
 href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#第三部分-附录" class="headerlink" title="第三部分 附录" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>第三部分
 附录</h3><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2;
 height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="附录一-DIV命名规范" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t20" target="_blank"></a><a target="_blank" name="t20" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#附录一-DIV命名规范"
 class="headerlink" title="附录一 DIV命名规范" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>附录一 DIV命名规范</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">企业<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">DIV</code>使用频率高的命名方法</p></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">网页内容类</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">标题: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px">摘要: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">summary</code></li><li style="list-style:none; position:relative; padding-left:14px">箭头： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">arrow</code></li><li
 style="list-style:none; position:relative; padding-left:14px">商标： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">label</code></li><li style="list-style:none; position:relative; padding-left:14px">网站标志： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">logo</code></li><li
 style="list-style:none; position:relative; padding-left:14px">转角/圆角：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">corner</code></li><li style="list-style:none; position:relative; padding-left:14px">横幅广告： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">banner</code></li><li
 style="list-style:none; position:relative; padding-left:14px">子菜单： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">subMenu</code></li><li style="list-style:none; position:relative; padding-left:14px">搜索： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">search</code></li><li
 style="list-style:none; position:relative; padding-left:14px">搜索框： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">searchBox</code></li><li style="list-style:none; position:relative; padding-left:14px">登录： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">login</code></li><li
 style="list-style:none; position:relative; padding-left:14px">登录条：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">loginbar</code></li><li style="list-style:none; position:relative; padding-left:14px">工具条： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">toolbar</code></li><li
 style="list-style:none; position:relative; padding-left:14px">下拉： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">drop</code></li><li style="list-style:none; position:relative; padding-left:14px">标签页： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tab</code></li><li
 style="list-style:none; position:relative; padding-left:14px">当前的： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">current</code></li><li style="list-style:none; position:relative; padding-left:14px">列表： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list</code></li><li
 style="list-style:none; position:relative; padding-left:14px">滚动： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">scroll</code></li><li style="list-style:none; position:relative; padding-left:14px">服务： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">service</code></li><li
 style="list-style:none; position:relative; padding-left:14px">提示信息： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">msg</code></li><li style="list-style:none; position:relative; padding-left:14px">热点：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">hot</code></li><li
 style="list-style:none; position:relative; padding-left:14px">新闻： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">news</code></li><li style="list-style:none; position:relative; padding-left:14px">小技巧： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tips</code></li><li
 style="list-style:none; position:relative; padding-left:14px">下载： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">download</code></li><li style="list-style:none; position:relative; padding-left:14px">栏目标题： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code></li><li
 style="list-style:none; position:relative; padding-left:14px">热点： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">hot</code></li><li style="list-style:none; position:relative; padding-left:14px">加入：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">joinus</code></li><li
 style="list-style:none; position:relative; padding-left:14px">注册： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">regsiter</code></li><li style="list-style:none; position:relative; padding-left:14px">指南： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">guide</code></li><li
 style="list-style:none; position:relative; padding-left:14px">友情链接： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">friendlink</code></li><li style="list-style:none; position:relative; padding-left:14px">状态： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">status</code></li><li
 style="list-style:none; position:relative; padding-left:14px">版权： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">copyright</code></li><li style="list-style:none; position:relative; padding-left:14px">按钮： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">btn</code></li><li
 style="list-style:none; position:relative; padding-left:14px">合作伙伴： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">partner</code></li><li style="list-style:none; position:relative; padding-left:14px">投票： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">vote</code></li><li
 style="list-style:none; position:relative; padding-left:14px">左右中：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">left</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">right</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">center</code></li></ul><hr style="height:1px;
 max-width:400px; margin-top:-1px; border:none"></li><li style="list-style:none; position:relative; padding-left:14px">注释的写法: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">/* Footer */</code> 内容区<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">/* End Footer */</code></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">id的命名:</span></p><ul style="line-height:1.8em; padding:0px; list-style:none;
 margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">页面结构</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px">容器: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">container</code></li><li style="list-style:none; position:relative; padding-left:14px">页头：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">header</code></li><li
 style="list-style:none; position:relative; padding-left:14px">内容：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">content</code>/<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">container</code></li><li style="list-style:none; position:relative; padding-left:14px">页面主体：<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">main</code></li><li style="list-style:none; position:relative; padding-left:14px">页尾：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">footer</code></li><li style="list-style:none; position:relative; padding-left:14px">导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">nav</code></li><li
 style="list-style:none; position:relative; padding-left:14px">侧栏：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sidebar</code></li><li style="list-style:none; position:relative; padding-left:14px">栏目：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">column</code></li><li
 style="list-style:none; position:relative; padding-left:14px">页面外围控制整体布局宽度：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">wrapper</code></li><li style="list-style:none; position:relative; padding-left:14px">左右中：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">left</code> <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">right</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">center</code></li></ul></li></ul><hr style="height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">导航</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px">导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">nav</code></li><li style="list-style:none; position:relative; padding-left:14px">主导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">mainbav</code></li><li style="list-style:none; position:relative; padding-left:14px">子导航：<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">subnav</code></li><li style="list-style:none; position:relative; padding-left:14px">顶导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han
 Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">topnav</code></li><li style="list-style:none; position:relative; padding-left:14px">边导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sidebar</code></li><li
 style="list-style:none; position:relative; padding-left:14px">左导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">leftsidebar</code></li><li style="list-style:none; position:relative; padding-left:14px">右导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">rightsidebar</code></li><li
 style="list-style:none; position:relative; padding-left:14px">菜单：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">menu</code></li><li style="list-style:none; position:relative; padding-left:14px">子菜单：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">submenu</code></li><li
 style="list-style:none; position:relative; padding-left:14px">标题: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code></li><li style="list-style:none; position:relative; padding-left:14px">摘要: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">summary</code></li></ul></li></ul><hr
 style="height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">功能</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">标志：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">logo</code></li><li style="list-style:none; position:relative;
 padding-left:14px">广告：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">banner</code></li><li style="list-style:none; position:relative; padding-left:14px">登陆：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">login</code></li><li style="list-style:none; position:relative;
 padding-left:14px">登录条：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">loginbar</code></li><li style="list-style:none; position:relative; padding-left:14px">注册：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">regsiter</code></li><li style="list-style:none; position:relative;
 padding-left:14px">搜索：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">search</code></li><li style="list-style:none; position:relative; padding-left:14px">功能区：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">shop</code></li><li style="list-style:none; position:relative;
 padding-left:14px">标题：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code></li><li style="list-style:none; position:relative; padding-left:14px">加入：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">joinus</code></li><li style="list-style:none; position:relative;
 padding-left:14px">状态：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">status</code></li><li style="list-style:none; position:relative; padding-left:14px">按钮：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">btn</code></li><li style="list-style:none; position:relative;
 padding-left:14px">滚动：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">scroll</code></li><li style="list-style:none; position:relative; padding-left:14px">标签页：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tab</code></li><li style="list-style:none; position:relative;
 padding-left:14px">文章列表：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">list</code></li><li style="list-style:none; position:relative; padding-left:14px">提示信息：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">msg</code></li><li style="list-style:none; position:relative;
 padding-left:14px">当前的:<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">current</code></li><li style="list-style:none; position:relative; padding-left:14px">小技巧：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tips</code></li><li style="list-style:none; position:relative;
 padding-left:14px">图标: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">icon</code></li><li style="list-style:none; position:relative; padding-left:14px">注释：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">note</code></li><li style="list-style:none; position:relative; padding-left:14px">指南：<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">guild</code></li><li style="list-style:none; position:relative; padding-left:14px">服务：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">service</code></li><li style="list-style:none; position:relative; padding-left:14px">热点：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">hot</code></li><li
 style="list-style:none; position:relative; padding-left:14px">新闻：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">news</code></li><li style="list-style:none; position:relative; padding-left:14px">下载：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">download</code></li><li
 style="list-style:none; position:relative; padding-left:14px">投票：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">vote</code></li><li style="list-style:none; position:relative; padding-left:14px">合作伙伴：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">partner</code></li><li
 style="list-style:none; position:relative; padding-left:14px">友情链接：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">link</code></li><li style="list-style:none; position:relative; padding-left:14px">版权：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">copyright</code></li></ul></li></ul><hr
 style="height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><span style="color:rgb(0,0,0)"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">class</code>的命名:</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">颜色:使用颜色的名称或者16进制代码,如</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">.red { color: red; }</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.f60 { color: #f60; }</code></li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">.ff8600 { color: #ff8600; }</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">字体大小,直接使用”font+字体大小”作为名称,如</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.font12px { font-size: 12px; }</code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">.font9px {font-size: 9pt; }</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">对齐样式,使用对齐目标的英文名称,如</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.left { float:left; }</code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">.bottom { float:bottom; }</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">标题栏样式,使用”类别+功能”的方式命名,如</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.barnews { }</code></li><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">.barproduct { }</code></li></ul></li></ul><hr style="height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">注意事项::</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px">一律小写;</li><li style="list-style:none; position:relative; padding-left:14px">尽量用英文;</li><li style="list-style:none; position:relative; padding-left:14px">不加中杠和下划线;</li><li style="list-style:none; position:relative; padding-left:14px">尽量不缩写，除非一看就明白的单词.</li></ul></li></ul><hr
 style="height:1px; max-width:400px; margin-top:-1px; border:none"></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">推荐的 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">CSS</code> 书写顺序：</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">显示属性</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display</code></li><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list-style</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">position</code></li><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">float</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">clear</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">自身属性</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">width</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">height</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em">文本属性</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">color</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">font</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">text-decoration</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">text-align</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">vertical-align</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">white-space</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">other text</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">content</code></li></ul></li></ul></li></ul><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica
 Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h4 id="附录二-CSS精灵" style="margin:28px 0px 15px;
 padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a
 name="t21" target="_blank"></a><a target="_blank" name="t21" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#附录二-CSS精灵" class="headerlink"
 title="附录二 CSS精灵" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>附录二 CSS精灵</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica
 Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><span
 style="color:rgb(0,0,0)">CSS精灵原理以及应用</span><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。<ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">该图片使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background和background-position</code>属性渲染，这也就意味着你的标签变得更加复杂了，图片是在<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">CSS</code>中定义，而非<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><img></code>标签。</li></ul></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">一个简单的例子</span>：<ul style="line-height:1.8em;
 padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">一张图片作出一个按钮的三个状态</li><li style="list-style:none; position:relative; padding-left:14px">一个链接用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">a:link</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:hover</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:active</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><a class="button" href="#">链接</a></code></li><li style="list-style:none;
 position:relative; padding-left:14px">加入右侧的图片为：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">200px 65px</code>的三个按钮图拼合而成的图片<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">button.png</code>，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>进行定义。</li></ul></li></ul><table
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse;
 border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div
 class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div
 class="line">18</div><div class="line">19</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:680px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div
 class="line">a {</div><div class="line"> display:block; </div><div class="line"> width:200px; </div><div class="line"> height:65px; </div><div class="line"> line-height:65px; /*定义状态*/</div><div class="line"> text-indent:-2015px; /*隐藏文字*/</div><div class="line">
 background-image:url(button.png); /*定义背景图片*/</div><div class="line"> background-position:0 0;</div><div class="line"> /*定义链接的普通状态，此时图像显示的是顶上的部分*/</div><div class="line">}</div><div class="line"></div><div class="line">a:hover {</div><div class="line"> background-position:0
 -66px;</div><div class="line"> /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/</div><div class="line">}</div><div class="line">a:active {</div><div class="line"> background-position:0 -132px; </div><div class="line"> /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/</div><div class="line">}</div></pre></td></tr></tbody></table><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">更多的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none;
 position:relative; padding-left:14px">如：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background:url(nav.png) -180px 24pxno-repeat</code>; 来达到更精确的定位</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">优点：</span><ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">减少加载网页图片时对服务器的请求次数</li><li style="list-style:none; position:relative; padding-left:14px">可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。</li><li
 style="list-style:none; position:relative; padding-left:14px">提高页面的加载速度</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sprite</code>技术的其中一个好处是图片的加载时间(在有许多 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sprite</code> 时，单张图片的加载时间)。由所需图片拼成的一张 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">GIF</code>图片的尺寸会明显小于所有图片拼合前的大小。单张的 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">GIF</code>只有相关的一个色表，而单独分割的每一张 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">GIF</code> 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">JPEG</code> 或者 <code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">PNG</code><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px;
 vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sprite</code> 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。</li><li style="list-style:none; position:relative; padding-left:14px">减少鼠标滑过的一些<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">bug</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">IE6</code>不会主动预加载鼠标滑过即<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:hover</code>中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>雪碧，由于一张图片即可，所以不会出现这种现象。</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">不足：</span><ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>雪碧的最大问题是内存使用</li><li
 style="list-style:none; position:relative; padding-left:14px">影响浏览器的缩放功能</li><li style="list-style:none; position:relative; padding-left:14px">拼图维护比较麻烦</li><li style="list-style:none; position:relative; padding-left:14px">使<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>的编写变得困难</li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> 雪碧调用的图片不能被打印</li><li style="list-style:none; position:relative; padding-left:14px">错误得使用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Sprites</code> 影响可访问性</li></ul></li></ul><h4
 id="附录三-一些tips解决方案" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t22" target="_blank"></a><a target="_blank" name="t22" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#附录三-一些tips解决方案"
 class="headerlink" title="附录三 一些tips解决方案" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>附录三 一些tips解决方案</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><h5 id="页面优化实践" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"><a name="t23" target="_blank"></a><a
 target="_blank" name="t23" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#页面优化实践" class="headerlink" title="页面优化实践" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent"></a>页面优化实践</h5><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro
 Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em">从下面的几个方面可以进行页面的优化：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">减少请求数</li><li style="list-style:none;
 position:relative; padding-left:14px">图片合并</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>文件合并</li><li style="list-style:none; position:relative; padding-left:14px">减少内联样式</li><li
 style="list-style:none; position:relative; padding-left:14px">避免在 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>中使用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">import</code></li><li style="list-style:none; position:relative; padding-left:14px">减少文件大小</li><li
 style="list-style:none; position:relative; padding-left:14px">选择适合的图片格式</li><li style="list-style:none; position:relative; padding-left:14px">图片压缩</li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> 值缩写（<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">Shorthand Property</code>)</li><li style="list-style:none; position:relative; padding-left:14px">文件压缩</li><li style="list-style:none; position:relative; padding-left:14px">页面性能</li><li style="list-style:none; position:relative; padding-left:14px">调整文件加载顺序</li><li
 style="list-style:none; position:relative; padding-left:14px">减少标签数量</li><li style="list-style:none; position:relative; padding-left:14px">调整选择器长度</li><li style="list-style:none; position:relative; padding-left:14px">尽量使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> 制作显示表现</li><li
 style="list-style:none; position:relative; padding-left:14px">增强代码可读性与可维护性</li><li style="list-style:none; position:relative; padding-left:14px">规范化</li><li style="list-style:none; position:relative; padding-left:14px">语义化</li><li style="list-style:none; position:relative;
 padding-left:14px">模块化</li></ul></li></ul><h5 id="写DIV-CSS-的一些常识" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"><a name="t24" target="_blank"></a><a target="_blank" name="t24" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#写DIV-CSS-的一些常识"
 class="headerlink" title="写DIV+CSS 的一些常识" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>写DIV+CSS 的一些常识</h5><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">不要使用过小的图片做背景平铺</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px">这就是为何很多人都不用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px;
 vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">1px</code> 的原因，这才知晓。宽高 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">1px</code> 的图片平铺出一个宽高 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">200px</code> 的区域，需要 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">200200=40, 000</code> 次，占用资源</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">无边框</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px">推荐的写法是 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border:none</code>;，哈哈，我一直在用这个。 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft
 YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border:0;</code> 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源</li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">慎用 通配符</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px">所谓通配符，就是将<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px;
 vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>的十六进制颜色代码缩写</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">样式放头上，脚本放脚下。不内嵌，只外链</p></li><li style="list-style:none; position:relative; padding-left:14px"><p
 style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">坚决不用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>表达式</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em">使用 引用样式表，而不是通过<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">@import</code> 导入。</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">一般来说，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">PNG</code>比 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">GIF</code> 要小，小得多。再者，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">GIF</code> 中有多少颜色是被浪费的，很值得优化。</p></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">千万不要在 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">HTML</code>中缩放图片，一者不好看，二者占资源。</p></li><li style="list-style:none;
 position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">正文字体最好用偶数</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">12px</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">14px</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">16px</code>，效果非常好。特例，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">15px</code>。</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">block</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ul</code>、<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">ol</code>等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">段落之间，至少要有一倍行距</p></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">强行指定某些元素的 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">line-height</code>，正文 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">1.6</code>倍于文字大小，标题<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">1.3</code>倍。</p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">中文标点用全角</p><ul style="line-height:1.8em; padding:0px;
 list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">英文夹杂在中文中，左右空格，半角。</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">中文字体的粗体和斜体，远离较好</p></li></ul><h5 id="常用代码片段" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"><a name="t25" target="_blank"></a><a target="_blank" name="t25" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#常用代码片段"
 class="headerlink" title="常用代码片段" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>常用代码片段</h5><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px">雅虎工程师提供的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>初始化示例代码【仅供参考】<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">可以在<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">html</code>头文件中直接引用，从而避免浏览器的不兼容带来的错误。</li></ul></li></ul><table
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse;
 border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div
 class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div
 class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div
 class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div
 class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div
 class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div
 class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div
 class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div
 class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div
 class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div></pre></td><td class="code"
 style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:680px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line">body,</div><div class="line">div,</div><div
 class="line">dl,</div><div class="line">dt,</div><div class="line">dd,</div><div class="line">ul,</div><div class="line">ol,</div><div class="line">li,</div><div class="line">h1,</div><div class="line">h2,</div><div class="line">h3,</div><div class="line">h4,</div><div
 class="line">h5,</div><div class="line">h6,</div><div class="line">pre,</div><div class="line">code,</div><div class="line">form,</div><div class="line">fieldset,</div><div class="line">legend,</div><div class="line">input,</div><div class="line">button,</div><div
 class="line">textarea,</div><div class="line">p,</div><div class="line">blockquote,</div><div class="line">th,</div><div class="line">td { </div><div class="line"> margin:0; padding:0; </div><div class="line">}</div><div class="line">body {</div><div class="line">
 background:#fff; </div><div class="line"> color:#555; </div><div class="line"> font-size:14px; </div><div class="line"> font-family: Verdana, Arial, Helvetica, sans-serif; </div><div class="line">}</div><div class="line">td,</div><div class="line">th,</div><div
 class="line">caption { </div><div class="line"> font-size:14px;</div><div class="line">}</div><div class="line">h1, </div><div class="line">h2, </div><div class="line">h3, </div><div class="line">h4, </div><div class="line">h5, </div><div class="line">h6 {
 </div><div class="line"> font-weight:normal; </div><div class="line"> font-size:100%; </div><div class="line">}</div><div class="line"></div><div class="line">address, </div><div class="line">caption,</div><div class="line">cite, </div><div class="line">code,
 </div><div class="line">dfn, </div><div class="line">em, </div><div class="line">strong,</div><div class="line">th, </div><div class="line">var { </div><div class="line"> font-style:normal; </div><div class="line"> font-weight:normal;</div><div class="line">}</div><div
 class="line">a { </div><div class="line"> color:#555; </div><div class="line"> text-decoration:none; </div><div class="line">}</div><div class="line">a:hover { </div><div class="line"> text-decoration:underline; </div><div class="line">}</div><div class="line">img
 {</div><div class="line"> border:none;</div><div class="line">}</div><div class="line">ol,ul,li { </div><div class="line"> list-style:none; </div><div class="line">}</div><div class="line">input, </div><div class="line">textarea, </div><div class="line">select,
 </div><div class="line">button { </div><div class="line"> font:14px Verdana,Helvetica,Arial,sans-serif; </div><div class="line">}</div><div class="line">table { </div><div class="line"> border-collapse:collapse; </div><div class="line">}</div><div class="line">html
 {</div><div class="line"> overflow-y: scroll;</div><div class="line">} </div><div class="line">.clearfix:after {</div><div class="line"> content: "."; </div><div class="line"> display: block; </div><div class="line"> height:0; </div><div class="line"> clear:both;
 </div><div class="line"> visibility: hidden;</div><div class="line">}</div><div class="line">.clearfix { </div><div class="line"> *zoom:1; </div><div class="line">}</div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">mobile meta</code>标签</li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han
 Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top;
 border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div></pre></td><td class="code" style="padding:0px;
 line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><span class="tag" style="color:rgb(41,115,183)"><<span
 class="name" style="color:rgb(82,82,82)">meta</span> <span class="attr">name</span>=<span class="string" style="color:rgb(26,188,156)">”viewport”</span> <span class="attr">content</span>=<span class="string" style="color:rgb(26,188,156)">”width</span>=<span
 class="string" style="color:rgb(26,188,156)">320,target-densitydpi</span>=<span class="string" style="color:rgb(26,188,156)">dpi_value,initial-scale</span>=<span class="string" style="color:rgb(26,188,156)">1,</span> <span class="attr">user-scalable</span>=<span
 class="string" style="color:rgb(26,188,156)">no”/</span>></span></div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">表格不被撑开</li></ul><table style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px;
 width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent;
 padding-right:30px; text-align:right; border:0px"><div class="line">1</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word;
 overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px;
 margin-bottom:0px; background-color:transparent"><div class="line"><span class="selector-tag" style="color:rgb(233,105,0)">table-layout</span>: <span class="selector-tag" style="color:rgb(233,105,0)">fixed</span>; <span class="selector-tag" style="color:rgb(233,105,0)">word-break</span>:
 <span class="selector-tag" style="color:rgb(233,105,0)">break-all</span>;;<span class="selector-tag" style="color:rgb(233,105,0)">border-collapse</span>: <span class="selector-tag" style="color:rgb(233,105,0)">collapse</span></div></pre></td></tr></tbody></table><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">不设宽高居中</li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5;
 vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div
 class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent"><div class="line"><span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">id</span>=<span class="string" style="color:rgb(26,188,156)">”abc”</span> <span class="attr">style</span>=<span
 class="string" style="color:rgb(26,188,156)">”display:table;text-align:center;width:100%;height:100%;”</span>></span></div><div class="line">      <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">span</span> <span
 class="attr">style</span>=<span class="string" style="color:rgb(26,188,156)">”background:#f00;</span> <span class="attr">display:table-cell</span>; <span class="attr">vertical-align:middle</span>;”></span></div><div class="line">            <span class="tag"
 style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">input</span> <span class="attr">type</span>=<span class="string" style="color:rgb(26,188,156)">”button”</span> <span class="attr">value</span>=<span class="string" style="color:rgb(26,188,156)">”item1″</span>
 /></span></div><div class="line">      <span class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">span</span>></span></div><div class="line"><span class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">div</span>></span></div></pre></td></tr></tbody></table><ul
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px;
 list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px">透明度的兼容代码</li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft
 YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5;
 vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div
 class="line">3</div><div class="line">4</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden;
 font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div
 class="line">filter:alpha(opacity=50); /*1-100*/</div><div class="line">-moz-opacity:0.5; /*0-1.0*/</div><div class="line">-khtml-opacity:0.5; /*0-1.0*/</div><div class="line">opacity:0.5; /*0-1.0*/</div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li
 style="list-style:none; position:relative; padding-left:14px">文字溢出点点省略</li></ul><table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px;
 font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td
 class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica
 Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><span class="selector-tag"
 style="color:rgb(233,105,0)">white-space</span><span class="selector-pseudo" style="color:rgb(41,115,183)">:nowrap</span>;</div><div class="line"><span class="selector-tag" style="color:rgb(233,105,0)">text-overflow</span><span class="selector-pseudo" style="color:rgb(41,115,183)">:ellipsis</span>;</div><div
 class="line"><span class="selector-tag" style="color:rgb(233,105,0)">overflow</span><span class="selector-pseudo" style="color:rgb(41,115,183)">:hidden</span>;</div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">清除浮动的几种方法</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">方法一：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source
 Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">投机取巧法</code> – 不推荐</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px">直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em">方法二：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle;
 background-color:rgb(247,247,247); color:rgb(233,105,0)">overflow + zoom</code>方法 –不推荐<br><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.fix{overflow:hidden; zoom:1;}</code></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px">此方法优点在于代码简洁，涵盖所有浏览器</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">方法三：<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">after + zoom</code>方法 -推荐–此方法可以说是综合起来最好的方法了</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">clearfix</code>只应用在包含浮动子元素的父级元素上</li></ul></li></ul></li></ul><table
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse;
 border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"><tbody><tr><td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;
 overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px;
 background-color:transparent; padding-right:30px; text-align:right; border:0px"><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div
 class="line">8</div></pre></td><td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"><pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"><div class="line"><span class="selector-class"
 style="color:rgb(41,115,183)">.fix</span>{<span class="attribute" style="color:rgb(233,105,0)">zoom</span>:<span class="number" style="color:rgb(174,129,255)">1</span>;}</div><div class="line"><span class="selector-class" style="color:rgb(41,115,183)">.fix</span><span
 class="selector-pseudo" style="color:rgb(41,115,183)">:after</span>{</div><div class="line"> <span class="attribute" style="color:rgb(233,105,0)">display</span>:block; </div><div class="line"> <span class="attribute" style="color:rgb(233,105,0)">content</span>:<span
 class="string" style="color:rgb(26,188,156)">'clear'</span>; </div><div class="line"> <span class="attribute" style="color:rgb(233,105,0)">clear</span>:both;</div><div class="line"> <span class="attribute" style="color:rgb(233,105,0)">line-height</span>:<span
 class="number" style="color:rgb(174,129,255)">0</span>; </div><div class="line"> <span class="attribute" style="color:rgb(233,105,0)">visibility</span>:hidden;</div><div class="line">}</div></pre></td></tr></tbody></table><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px">更多代码片段详情<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.jianshu.com/p/e878122a92a3" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">实用的60个CSS代码片段</a></li></ul></li></ul><h5 id="一些总结" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"><a name="t26" target="_blank"></a><a target="_blank" name="t26" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#一些总结"
 class="headerlink" title="一些总结" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>一些总结</h5><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans
 GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">自动继承属性：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">color</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans
 CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">font</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">text-align</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list-style</code><br>…</li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em">非继承属性：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">position</code><br>…</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">具有破坏性的元素：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">float</code></li><li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:none;</code></li><li
 style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">position:absoblute/fixed/sticky;</code></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">具有包裹性的元素：</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px;
 margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:inline-block/table-cell</code></p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px;
 padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">position:absolute/fixed/sticky</code></p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">overflow:hidden/scroll</code></p></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">消除图片底部间隙的方法</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">图片块状化-无基线对齐<br><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">img{display:block;}</code></p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">图片底线对齐<br><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">img{vertical-align:bottom;}</code></p></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px;
 padding-bottom:0px; line-height:2em">行高足够小 - 基线位置上移<br><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.box{line-height:0;}</code></p></li></ul></li></ul><h5 id="一些概念" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"><a name="t27" target="_blank"></a><a target="_blank" name="t27" style="color:rgb(12,137,207)"></a><a
 target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#一些概念" class="headerlink" title="一些概念" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>一些概念</h5><hr
 style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px;
 max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">BFC</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px">BFC全称<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans
 GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">”Block Formatting Context”</code> 中文为“块级格式化上下文”</li></ul><ul
 style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">记住这么一句话：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open
 Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">BFC</code>元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素</p></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">BFC</code>就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此</p></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">扩展阅读</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><a target="_blank" href="https://github.com/dwqs/blog/issues/22" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">CSS中的BFC</a></li></ul></li></ul></li><li style="list-style:none;
 position:relative; padding-left:14px">优雅降级(<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px
 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">graceful degradation</code>)<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">一开始就构建完整的功能，然后再针对低版本浏览器进行兼容</li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px">渐进增强 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif;
 font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">progressive enhancement</code>：<ul style="line-height:1.8em; padding:0px; list-style:none"><li style="list-style:none; position:relative; padding-left:14px">是在浏览器开启<code
 style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247);
 color:rgb(233,105,0)">JavaScript</code>功能后，如果浏览器版本不支持某些 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em;
 padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">JavaScript</code> 能力，我们解决这种问题的方式</li></ul></li><li style="list-style:none; position:relative; padding-left:14px">平稳退化<ul style="line-height:1.8em; padding:0px;
 list-style:none"><li style="list-style:none; position:relative; padding-left:14px">是在浏览器没有<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi
 Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">JavaScript</code>功能，或没有开启<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino
 Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">JavaScript</code>功能情况下，我们解决这种问题的方式；</li></ul></li></ul><h5
 id="方案荟萃扩展阅读" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 orphans:2; widows:2; font-weight:normal"><a name="t28" target="_blank"></a><a target="_blank" name="t28" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#方案荟萃扩展阅读"
 class="headerlink" title="方案荟萃扩展阅读" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>方案荟萃扩展阅读</h5><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"><span style="color:rgb(0,0,0)">关于布局</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><a target="_blank" href="http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">垂直居中</a></li><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://codepen.io/shshaw/full/gEiDt" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">css完全居中</a></li><li style="list-style:none;
 position:relative; padding-left:14px"><a target="_blank" href="http://www.w3cplus.com/collective-5.html" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">居中之美</a></li><li style="list-style:none; position:relative;
 padding-left:14px"><a target="_blank" href="http://www.zhihu.com/question/35290742#answer-20340542" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">网页中的底部foot定位</a></li><li style="list-style:none; position:relative;
 padding-left:14px"><a target="_blank" href="http://www.webhek.com/css-100-percent-height" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">页面高度100%</a></li><li style="list-style:none; position:relative; padding-left:14px"><a
 target="_blank" href="https://github.com/phoetry/textareaAutoHeight" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">textarea高度自适应</a></li><li style="list-style:none; position:relative; padding-left:14px"><a
 target="_blank" href="http://dotdotdot.frebsite.nl/" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">多行溢出省略</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://jinlong.github.io/2015/05/24/css-retina-hairlines/"
 rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">Retina屏1px线</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/philipwalton/flexbugs" rel="external"
 style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">Flexbugs</a></li></ul></li><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px;
 line-height:2em"><span style="color:rgb(0,0,0)">其他</span></p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.stepday.com/topic/?690"
 rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">IF IE ENDIF条件判断之IE10</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.zhihu.com/question/20158063"
 rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">Chrome 翻译插件</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://blog.netsh.org/posts/website-retina_1779.netsh.html"
 rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">网页retina优化</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://segmentfault.com/a/1190000002407912" rel="external"
 style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">常用meta</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.cnblogs.com/mq0036/p/3531848.html" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">树状菜单</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.w3ctrain.com/2015/07/24/comprehensive-guide-when-to-use-em-vs-rem/" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">em vs rem</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/classicemi/blog/issues/3#issuecomment-113861251" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">css vs js</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.w3cplus.com/solution/index/index.html" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">css解决方案（w3cplus）</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://riccardoscalco.github.io/textures/" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">Textures生成纹理</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://una.im/CSSgram/" rel="external" style="text-decoration:none; color:rgb(26,188,156);
 background-color:transparent">CSSgram</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://zmoazeni.github.io/csscss/" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">Csscss（检查重复声明等）</a></li></ul></li></ul><h4
 id="附录四-部分工具资源" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t29" target="_blank"></a><a target="_blank" name="t29" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#附录四-部分工具资源"
 class="headerlink" title="附录四 部分工具资源" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>附录四 部分工具资源</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><a target="_blank" href="http://blog.poetries.top/2016/03/14/Emmet%EF%BC%9AHTML-CSS%E4%BB%A3%E7%A0%81%E5%BF%AB%E9%80%9F%E7%BC%96%E5%86%99%E7%A5%9E%E5%99%A8/" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">学会使用Emmet插件快速编码</a></li><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://blog.poetries.top/2016/09/09/Emmet%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/#more" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">Emmet常用快捷键</a></li><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/poetries/mywiki/blob/master/bookmark/sublime-text.md" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">Sublime专题</a></li><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/poetries/mywiki/blob/master/bookmark/Sublime%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E6%80%BB%E7%BB%93.md" rel="external" style="text-decoration:none; color:rgb(26,188,156);
 background-color:transparent">Sublime常用插件总结</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/poetries/mywiki/blob/master/bookmark/Front-End%20-Develop%20-Tools.md" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">Front-End -Develop -Tools</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/poetries/mywiki/blob/master/bookmark/Tools.md" rel="external"
 style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">ToolsBox-自己整理的一份工具列表</a></li></ul><h4 id="附录五-编码规范" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica
 Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t30" target="_blank"></a><a target="_blank" name="t30" style="color:rgb(12,137,207)"></a><a
 target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#附录五-编码规范" class="headerlink" title="附录五 编码规范" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>附录五
 编码规范</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2;
 height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/poetries/mywiki/blob/master/bookmark/%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83.md"
 rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">编码规范</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://front-end-standards.com/" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">前端规范</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/poetries/mywiki/wiki/web-develop-standard" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">web develop standard</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://codecloud.net/5622.html" rel="external" style="text-decoration:none; color:rgb(26,188,156);
 background-color:transparent">Web 前端开发规范文档</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://zhibimo.com/read/Ashu/front-end-style-guide/index.html" rel="external" style="text-decoration:none; color:rgb(26,188,156);
 background-color:transparent">前端开发规范手册</a></li></ul><h4 id="附录六-进阶学习" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source
 Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t31" target="_blank"></a><a target="_blank" name="t31" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#附录六-进阶学习"
 class="headerlink" title="附录六 进阶学习" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>附录六 进阶学习</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino
 Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open
 Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative;
 padding-left:14px"><a target="_blank" href="http://www.jianshu.com/p/1e638b7da640" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">DOM编程之API学习</a></li><li style="list-style:none; position:relative; padding-left:14px"><a
 target="_blank" href="http://www.jianshu.com/p/1f2314552e23" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">JavaScript基础学习</a></li></ul><h4 id="附录七-其他资源" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85);
 font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t32" target="_blank"></a><a
 target="_blank" name="t32" style="color:rgb(12,137,207)"></a><a target="_blank" href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#附录七-其他资源" class="headerlink" title="附录七 其他资源" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent"></a>附录七 其他资源</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi
 Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans
 GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/poetries/mywiki"
 rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">Github上前端学习资源汇总</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/poetries/mywiki/tree/master/front-end"
 rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">WEB 前端开发学习笔记</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://github.com/poetries/mywiki/wiki/%E6%94%B6%E9%9B%86%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7"
 rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">前端开发工具箱</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://segmentfault.com/a/1190000006689923" rel="external"
 style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">148个资源让你成为CSS专家</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://zh.learnlayout.com/" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">学习CSS布局-经典必看</a></li></ul><h4 id="附录八-常见问题" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans
 GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"><a name="t33" target="_blank"></a><a target="_blank" name="t33" style="color:rgb(12,137,207)"></a><a target="_blank"
 href="http://blog.poetries.top/2016/09/06/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE/#附录八-常见问题" class="headerlink" title="附录八 常见问题" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent"></a>附录八
 常见问题</h4><hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2;
 height:1px; max-width:400px; margin-top:-1px; border:none"><ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif;
 orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"><li style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">前端指路</p><ul
 style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.w3cplus.com/css/write-to-front-end-developer-interview.html" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">写给前端面试者（w3cplus）</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://jiongks.name/blog/how-to-become-a-great-front-end-engineer/" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">如何成为一名卓越的前端工程师（勾三股四博客）</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.epubit.com.cn/article/144" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">什么是全栈工程师</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://uptodate.frontendrescue.org/zh/" rel="external" style="text-decoration:none; color:rgb(26,188,156);
 background-color:transparent">如何跟上前端开发的最新前沿</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://blog.jobbole.com/12749/" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">浏览器的工作原理</a></li><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.zhihu.com/question/20269059#answer-19718763" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">移动前端开发和 Web 前端开发的区别</a></li><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://segmentfault.com/q/1010000003723038?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly" rel="external" style="text-decoration:none; color:rgb(26,188,156);
 background-color:transparent">大型网站CSS编写与维护</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://segmentfault.com/q/1010000003059724" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">CSS核心技术关键字</a></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">性能/规范/实践</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.chinaw3c.org/how-to-read-spec-wxx.html" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">如何阅读W3c规范(王晓轩)</a></li><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.chinaw3c.org/how-to-read-spec-gb.html" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">如何阅读W3c规范(高博)</a></li><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="https://developer.yahoo.com/performance/rules.html" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">雅虎web性能优化军规</a></li><li
 style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://browserdiet.com/zh/" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">权威前端性能指南</a></li><li style="list-style:none;
 position:relative; padding-left:14px"><a target="_blank" href="http://www.html-js.com/article/Front-end-home-best-practice-in-front-of-the-web-high-performance-CSS" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">高性能css</a></li></ul></li><li
 style="list-style:none; position:relative; padding-left:14px"><p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em">一些问答社区</p><ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"><li style="list-style:none;
 position:relative; padding-left:14px"><a target="_blank" href="https://www.quora.com/" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">quora</a></li><li style="list-style:none; position:relative; padding-left:14px"><a
 target="_blank" href="http://stackoverflow.com/" rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">stackoverflow</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.zhihu.com/"
 rel="external" style="text-decoration:none; color:rgb(26,188,156); background-color:transparent">知乎</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://www.html-js.com/qa" rel="external" style="text-decoration:none;
 color:rgb(26,188,156); background-color:transparent">前端乱炖问答区</a></li><li style="list-style:none; position:relative; padding-left:14px"><a target="_blank" href="http://segmentfault.com/questions/newest" rel="external" style="text-decoration:none; color:rgb(26,188,156);
 background-color:transparent">segmentfault问答区</a></li></ul></li></ul> </div>