Html5 布局方式

原文链接： https://www.mk2048.com/blog/blog.php?id=h0jicjbcckaa&title=Html5+%E5%B8%83%E5%B1%80%E6%96%B9%E5%BC%8F

在Html5之前，统一采用的是Div css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。布局效果如下：

涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分：

HTML5 语义元素

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article 扫描二维码关注公众号，回复： 7608274 查看本文章	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

具体不多说，布局对应的Html代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>关于Web页的Html5布局</title>
  5     <style type="text/css">
  6     header
  7     {
  8         background-color:orange;
  9         color:White;
 10         text-align:center;
 11         height:120px;
 12         padding:5px;
 13      }
 14      nav 
 15      {
 16          line-height:30px;
 17          background-color:Lime;
 18          height:400px;
 19          width:15%;
 20          float:left;
 21          padding:0px;
 22        }
 23        aside
 24        {
 25            background-color:Gray;
 26            width:15%;
 27            height:400px;
 28            float:right;
 29            padding:0px;
 30        }
 31        section
 32        {
 33            width:70%;
 34            height:400px;
 35            background-color:Purple;
 36            float:left;
 37            padding:0px;
 38        }
 39        footer
 40        {
 41            background-color:Fuchsia;
 42            height:120px;
 43            color:White;
 44            clear:both;
 45            text-align:center;
 46            padding:5px;
 47         }
 48         ul
 49         {
 50             list-style-type:none;
 51         }
 52         .sp
 53         {
 54             width:15px;
 55             padding:5px;
 56         }
 57         a
 58         {
 59             text-decoration:blink;
 60         }
 61     </style>
 62 </head>
 63 <body>
 64     <header>
 65         <h1>这里是Header,一号标题</h1>
 66         <div>
 67             <a href="#">菜单1</a><span class="sp">|</span>
 68             <a href="#">菜单2</a><span class="sp">|</span>
 69             <a href="#">菜单3</a><span class="sp">|</span>
 70             <a href="#">菜单4</a><span class="sp">|</span>
 71             <a href="#">菜单4</a><span class="sp">|</span>
 72             <a href="#">菜单5</a><span class="sp">|</span>
 73             <a href="#">菜单6</a><span class="sp">|</span>
 74             <a href="#">菜单7</a><span class="sp">
 75         </div>
 76     </header>
 77     <nav>
 78         <ul>
 79             <li><a href="#">链接1</a></li>
 80             <li><a href="#">链接2</a></li>
 81             <li><a href="#">链接3</a></li>
 82             <li><a href="#">链接4</a></li>
 83         </ul>
 84     </nav>
 85     <section>
 86         <h1>
 87             这里是正文</h1>
 88         <p>
 89             这里是段落1</p>
 90         <p>
 91             这里是段落2</p>
 92     </section>
 93     <aside>
 94         <h1>
 95             这里是侧边框</h1>
 96         <p>
 97             这里是段落1</p>
 98         <p>
 99             这里是段落2</p>
100     </aside>
101     <footer>
102         这里是页脚
103     </footer>
104 </body>
105 </html>

View Code

关于Padding , Border,Margin之间的关系，如下图所示：

关于样式的层叠顺序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

更多专业前端知识，请上【猿2048】www.mk2048.com

关于样式的层叠顺序

猜你喜欢