【HTML5】HTML5新布局元素 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>header、footer</title>
 6     <style type="text/css">
 7         body{height: 600px}
 8         header{width: 100%;height: 10%;background: red}
 9         #div0{width: 30%;height: 80%;background: green;float: left;    }
10         #div1{width: 70%;height: 80%;background: gray;float: left;    }
11         footer{width: 100%;height: 10%;background: blue;clear: left;}        
12     </style>
13 </head>
14 <body>
15     <header>头部</header>
16     <div id="div0">左</div><div id="div1">右</div>
17     <footer>底部</footer>
18 </body>
19 </html>

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>article</title>
 6 </head>
 7 <body>
 8     <article>
 9         <article>
10             <header><h1>文章一标题</h1></header>
11             <p>文章正文<br>文章正文<br>文章正文<br></p>
12             <footer><h3>文章底部文章底部文章底部</h3></footer>
13         </article>
14         <article>
15             <header><h1>文章二标题</h1></header>
16             <p>文章正文<br>文章正文<br>文章正文<br></p>
17             <footer><h3>文章底部文章底部文章底部</h3></footer>
18         </article>
19     </article>
20 </body>
21 </html>

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>nav</title>
 6     <style type="text/css">
 7         nav{width: 100%;height: 40px;background: green;text-align: center;padding: 6px}
 8         li{display: inline;}
 9         a{text-decoration: none;}
10     </style><!--display:inline作用是使无序列表显示于一行。text-decoration: none的作用是去掉超链接的下划线。-->
11 </head>
12 <body>
13     <nav>
14         <ul>
15             <li><a href="">链接1</a></li>
16             <li><a href="">链接1</a></li>            
17         </ul>
18     </nav>    
19 </body>
20 </html>

 

posted @ 2017-04-17 19:14  xiongjiawei  阅读(607)  评论(0)    收藏  举报