你的位置:首页 > 网页设计

[网页设计]Html5 布局方式


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

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

HTML5 语义元素

header

定义文档或节的页眉

nav

定义导航链接的容器

section

定义文档中的节

article

定义独立的自包含文章

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