-
公司信息
- · 網(wǎng)站介紹
- · 聯(lián)系我們
- · 加入我們
- · 服務(wù)條款
-
快速入口
- · 365軟件
- · 杰創(chuàng)官網(wǎng)
- · 建站工具
- · 網(wǎng)站大全
-
其它欄目
- · 建站教程
- · 365學(xué)習(xí)
-
業(yè)務(wù)咨詢
- · 技術(shù)支持
- · 服務(wù)時間：9:00-18:00
網(wǎng)站常常以多列顯示內(nèi)容（就像雜志和報紙）。
注釋：<div> 元素常用作布局工具，因為能夠輕松地通過 CSS 對其進(jìn)行定位。
這個例子使用了四個 <div> 元素來創(chuàng)建多列布局：
<body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Copyright 365jz.com.cn </div> </body>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
HTML5 提供的新語義元素定義了網(wǎng)頁的不同部分：
| header | 定義文檔或節(jié)的頁眉 |
| nav | 定義導(dǎo)航鏈接的容器 |
| section | 定義文檔中的節(jié) |
| article | 定義獨立的自包含文章 |
| aside | 定義內(nèi)容之外的內(nèi)容（比如側(cè)欄） |
| footer | 定義文檔或節(jié)的頁腳 |
| details | 定義額外的細(xì)節(jié) |
| summary | 定義 details 元素的標(biāo)題 |
這個例子使用 <header>, <nav>, <section>, 以及 <footer> 來創(chuàng)建多列布局：
<body> <header> <h1>City Gallery</h1> </header> <nav> London<br> Paris<br> Tokyo<br> </nav> <section> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </section> <footer> Copyright 365jz.com.cn </footer> </body>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
注釋：<table> 元素不是作為布局工具而設(shè)計的。
<table> 元素的作用是顯示表格化的數(shù)據(jù)。
使用 <table> 元素能夠取得布局效果，因為能夠通過 CSS 設(shè)置表格元素的樣式：
<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>
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp td {
width:40px;
}
</style>
如對本文有疑問，請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答??！ 點擊進(jìn)入論壇
