網(wǎng)頁(yè)布局可以通過(guò)表格和div元素來(lái)實(shí)現(xiàn)(注:table布局已經(jīng)淘汰),首先我們來(lái)看看table布局
<!doctype html>
<html>
<head>
<title>表格布局</title>
<meta charset="utf-8">
</head>
<body>
<table width="100%">
<tr>
<td colspan="2" style="background-color: blue">
<h1 align="center">導(dǎo)航</h1>
</td>
</tr>
<tr>
<td style="background-color: red" width="50%">
<dl>
<dt>推薦文章</dt>
<dd>
<ul>
<li>一個(gè)猴子成長(zhǎng)史</li>
<li>你看個(gè)毛線(xiàn)</li>
<li>我就瞅你咋地</li>
<li>村里出了個(gè)半邊天</li>
</ul>
</dd>
</dl>
</td>
<td style="background-color: yellow" width="50%">
<h1>一個(gè)猴子的成長(zhǎng)史</h1>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</td>
</tr>
<tr>
<td colspan="2" style="background: black">
<h1 align="center" style="color:red">頁(yè)腳</h1>
</td>
</tr>
</table>
</body>
</html>
實(shí)現(xiàn)效果
表格布局
**表格布局的思路就是把整個(gè)網(wǎng)頁(yè)看成一個(gè)簡(jiǎn)單的表格,然后在不同的單元格內(nèi)進(jìn)行內(nèi)容填充.下面我們?cè)偈褂胐iv+css進(jìn)行布局,一般的div結(jié)構(gòu)元素如下圖
**
圖片來(lái)自實(shí)驗(yàn)樓
擼起袖子寫(xiě)代碼
<!doctype html>
<html>
<head>
<title>div布局</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>這是一個(gè)導(dǎo)航</h1>
</div>
<div id="pagebody">
<div id="sidebar">
<dl>
<dt>優(yōu)秀文章展現(xiàn)</dt>
<dd>
<ul>
<li>你好,一只雞</li>
<li>我在西河大橋看大腿</li>
<li>啊,大海好多水</li>
<li>我們走皮皮蝦</li>
</ul>
</dd>
</dl>
<!-- <br>
<br>
<br> -->
</div>
<div id="mainbody">
<h1>開(kāi)學(xué)啦</h1>
<p>坑比小學(xué)僧們?cè)僖?jiàn)啦</p>
<!-- <br>
<br>
<br>
<br> -->
</div>
</div>
<div id="footer">good good study, day day up</div>
</div>
</body>
</html>
css部分
#container{
width: 100%;
/*clear: both;*/
}
#header{
width: 100%;
background-color: blue;
text-align: center;
float: left;
/*clear: both;*/
}
#pagebody{
//float: left;
}
#sidebar{
width: 40%;
height: 500px;
background-color: red;
float: left;
/*clear: both;*/
}
#mainbody{
width: 60%;
height: 500px;
background-color: yellow;
float: left;
}
#footer{
width: 100%;
background-color: gray;
text-align: center;
font-size: 50px;
float: left;
}
實(shí)現(xiàn)效果
div+css布局
div布局的思路是是把頁(yè)面看成一個(gè)大盒子,用盒子來(lái)盛裝內(nèi)容,至于兩種布局方法的區(qū)別,看這里看這里:淺析div+css與表格布局的區(qū)別
