HTML+CSS 輕鬆入門之盒子模型之邊框（下）
通常我們是很少給p標(biāo)籤來(lái)加邊框的，但是在設(shè)計(jì)的時(shí)候，我們會(huì)給div 標(biāo)籤加上邊框，這樣看起來(lái)會(huì)明顯一點(diǎn)
下面我們來(lái)做一個(gè)實(shí)例：例如網(wǎng)站首頁(yè)部分，頭部中部（分成左右兩個(gè)區(qū)塊） 底部這樣的一個(gè)佈局樣式，我們要怎麼實(shí)現(xiàn)呢
首先我們要給一個(gè)大的div ?頭部中部和底部都放在這個(gè)div 中這樣我們就要給第一個(gè)div 做一個(gè)css樣式，然後再這個(gè)div 中加入3個(gè)div 標(biāo)籤
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px;
height:500px;
border:1px solid red;
margin:0 auto; /*居中*/
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">頭部</div>
<div id="cen">中部</div>
<div id="but">底部</div>
</div>
</body>
</html>下面我們要給頭部中間底部分別加上樣式，完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px; height:500px;border:1px solid red;margin:0 auto; /*居中*/text-align:center;
}
#top{
width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px;
}
#cen{
width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px;
}
#but{
width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px;
}
#left{
width:200px;
height:198px;
border:1px solid green;
margin-left:5px;
float:left;
}
#right{
width:570px;
height:198px;
border:1px solid black;
float:right;
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">頭部</div>
<div id="cen">
<div id="left">左邊</div>
<div id="right">右邊</div>
</div>
<div id="but">底部</div>
</div>
</body>
</html>註：邊框也要分上下左右的
????border-top ?上
#????border-left ?左
