7
使用 <div> 元素的 HTML 布局
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <style> 6 #header { 7 background-color:black; 8 color:white; 9 text-align:center; 10 padding:5px; 11 } 12 #nav { 13 line-height:30px; 14 background-color:#eeeeee; 15 height:300px; 16 width:100px; 17 float:left; 18 padding:5px; 19 } 20 #section { 21 width:350px; 22 float:left; 23 padding:10px; 24 } 25 #footer { 26 background-color:black; 27 color:white; 28 clear:both; 29 text-align:center; 30 padding:5px; 31 } 32 </style> 33 </head> 34 35 <body> 36 37 <div id="header"> 38 <h1>City Gallery</h1> 39 </div> 40 41 <div id="nav"> 42 London<br> 43 Paris<br> 44 Tokyo<br> 45 </div> 46 47 <div id="section"> 48 <h2>London</h2> 49 <p> 50 London is the capital city of England. It is the most populous city in the United Kingdom, 51 with a metropolitan area of over 13 million inhabitants. 52 </p> 53 <p> 54 Standing on the River Thames, London has been a major settlement for two millennia, 55 its history going back to its founding by the Romans, who named it Londinium. 56 </p> 57 </div> 58 59 <div id="footer"> 60 Copyright ? W3Schools.com 61 </div> 62 63 </body> 64 </html>
1 <style> 2 #header { 3 background-color:black; 4 color:white; 5 text-align:center; 6 padding:5px; 7 } 8 #nav { 9 line-height:30px; 10 background-color:#eeeeee; 11 height:300px; 12 width:100px; 13 float:left; 14 padding:5px; 15 } 16 #section { 17 width:350px; 18 float:left; 19 padding:10px; 20 } 21 #footer { 22 background-color:black; 23 color:white; 24 clear:both; 25 text-align:center; 26 padding:5px; 27 } 28 </style>
使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <style> 6 header { 7 background-color:black; 8 color:white; 9 text-align:center; 10 padding:5px; 11 } 12 nav { 13 line-height:30px; 14 background-color:#eeeeee; 15 height:300px; 16 width:100px; 17 float:left; 18 padding:5px; 19 } 20 section { 21 width:350px; 22 float:left; 23 padding:10px; 24 } 25 footer { 26 background-color:black; 27 color:white; 28 clear:both; 29 text-align:center; 30 padding:5px; 31 } 32 </style> 33 </head> 34 35 <body> 36 37 <header> 38 <h1>City Gallery</h1> 39 </header> 40 41 <nav> 42 London<br> 43 Paris<br> 44 Tokyo<br> 45 </nav> 46 47 <section> 48 <h1>London</h1> 49 <p> 50 London is the capital city of England. It is the most populous city in the United Kingdom, 51 with a metropolitan area of over 13 million inhabitants. 52 </p> 53 <p> 54 Standing on the River Thames, London has been a major settlement for two millennia, 55 its history going back to its founding by the Romans, who named it Londinium. 56 </p> 57 </section> 58 59 <footer> 60 Copyright W3Schools.com 61 </footer> 62 63 </body> 64 </html>
使用表格的 HTML 布局
注释：<table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：
<body>
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
