做出來的最後結果
<!DOCTYPE html>
<html>
<head>
<title>layout</title>
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body>
<div id="container">
<div id="head">
<div id="head_left"><!--頭部的左邊-->
</div>
<div id="head_mid"><!--頭部的中間-->
</div>
<div id="head_right"><!--頭部的右邊-->
</div>
</div>
<div class="nav">
</div>
<div id="head_menu"> <!--頭部的導航-->
<ol>
<li><a href="#">聯繫我們</a></li>
<li class="tiao"></li> <!--做導航中間的黑條-->
<li><a href="#">聯繫我們</a></li>
<li class="tiao"></li>
<li><a href="#">聯繫我們</a></li>
<li class="tiao"></li>
<li><a href="#">聯繫我們</a></li>
<li class="tiao"></li>
<li><a href="#">聯繫我們</a></li>
</ol>
</div>
<div class="nav">
</div>
<div id="main"> <!--中間容器-->
<div id="main_left"> <!--中間左邊-->
<div id="left_one">
<div class="title">
<h3>熱門文章</h3>
</div>
<div class="content">
<ol>
<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
</ol>
</div>
</div>
<div id="left_two">
</div>
<div class="nav">
</div>
<div id="left_one">
</div>
<div id="left_two">
</div>
</div>
<div id="main_right"> <!--中間右邊-->
</div>
</div>
<div class="nav">
</div>
<div id="ad">
</div>
<div class="nav">
</div>
<div id="footer"> <!--頁腳-->
</div>
</div>
</body>
</html>body
{
margin:0px;
padding:0px;
/*清理body的內邊框與外邊框*/
}
#container
{
margin-left:auto;
margin-right:auto;
width:960px;
/*左邊距與右邊距自動，即可居中*/
}
.nav
{
width:960px;
height:10px;
clean:both;
float:left;
/*往左浮動，並且清除兩邊的浮動相等於換行了*/
}
#head
{
width:100%;
height:120;
}
#head #head_left
{
width:200px;
height:90px;
background-color:yellow;
float:left;
}
#head #head_mid
{
width:540px;
height:90px;
background-color:green;
float:left;
margin-left:10px;
margin-right:10px;
}
#head #head_right
{
width:200px;
height:90px;
background-color:blue;
float:left;
}
#head_menu
{
width:100%;
height:30px;
float:left;
background-color:gray;
}
#main
{
width:100%;
height:600px;
float:left;
}
#main #main_left
{
width:650px;
height:600px;
float:left;
}
#main #main_left #left_one
{
width:220px;
height:295px;
float:left;
background-color:yellow;
}
#main #main_left #left_two
{
width:420px;
height:295px;
float:right;
background-color:yellow;
}
#main #main_right
{
width:300px;
height:600px;
float:right;
background-color:red;
}
#ad
{
width:960px;
height:80px;
background-color:green;
float:left;
}
#footer
{
width:960px;
height:80px;
background-color:blue;
float:left;
}
ol
{
font-size:12px;
list-style:none;
margin:0px;
padding:0px;
}
#head_menu li
{
float:left;
text-align:center;
width:80px;
line-height:30px;
}
#head_menu .tiao
{
float:left;
background-color:black;
width:1px;
height:20px;
margin-top:6px;
}
#head_menu li a {
color:white;
}
#head_menu li a:hover {
position:relative;
top:1px;
left:1px;
}
.title {
float:left;
width:100%;
height:26px;
background:url(images/title.png) no-repeat right ;
/*背景從右開始，獲得右邊的圓角*/
}
.title h3 {
margin:0px;
padding:0px;
padding-left:10px;
width:100px;
line-height:26px;
font-size:14px;
background:url(images/title.png) no-repeat left ;
/*背景從左邊開始，獲得左邊的圓角，然後只顯示一部分*/
}
.content a
{
font-size:14px;
padding-left:15px;
background:url(images/li_icon.gif) no-repeat left;
line-height:18px;
}
.content li
{
background:url(images/dot.gif) repeat-x bottom;
}
