Html5 布局方式

概述

在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。本文以一个简单的小例子，简述Html5的布局相关知识，仅供学习分享使用，如有不足之处，还请指正。

HTML5 语义元素

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

示例效果图

布局效果如下：

布局源码

布局对应的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>