傳智播客模板頁
下面先來看一下效果圖
首先分析一下，該頁面有3個部分頭部，主體部分，尾部
下面我們來看一下頭部，首先，頭部的背景是漸變效果，我們光靠代碼無法編輯出來，只能使用fireworks軟件切圖
傳智播客的logo和banner廣告詞
也要切下來，這樣既提高了網頁在瀏覽器上的加載效率，也減少了開發難度。
切圖界面如下：
現在可以開始寫代碼了，首先建立一個html和css文件，分別命名為index.html和style.css
首先設置頭部的背景色
清除界面中所需標簽的默認樣式。
通過效果圖可知logo和廣告詞水平居中，我們可以把它們兩個的圖片放在<h1>標簽內，也可以直接建立兩個div容器，然后把圖片設置為背景，再在css中設置margin值使其水平居中，我每個都使用了一個；
兩相鄰元素設置左浮動，兩元素不相鄰，一左浮動，一右浮動，本界面中logo和廣告詞圖片相鄰，所以都設置左浮動。
下面輸入導航條文字，
然后設置第一個文字（首頁）距界面邊緣的距離，由firework中的效果圖可知為94px;而文字與文字之間相差20px; 可設置nav的padding-left值為84px;li標簽的padding值為padding:0 10正好滿足需求。
設置行高和導航條高度一致，使文字居中。使用偽類選擇器去掉超鏈接的默認樣式，設置其顏色為白色。
下面兩部分很簡單直接寫就行了。
下面是運行效果圖：
下面分別是index.html和style.css的完整代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1><a href="index.html"><img src="images/logo.jpg" width="228" height="116" /></a></h1>
<div class="headerR"></div>
</div>
<ul id="nav">
<li><a href="index.html">首頁</a></li>
<li><a href="java.html">Java培訓</a></li>
<li><a href="#">.net培訓</a></li>
<li><a href="#">php培訓</a></li>
<li><a href="pm.html">網頁平面</a></li>
<li><a href="#">人才服務</a></li>
<li><a href="#">視頻下載</a></li>
<li><a href="#">校園生活</a></li>
<li><a href="#">師資力量</a></li>
<li><a href="#">就業宣言</a></li>
<li><a href="#">報名流程</a></li>
</ul>
<div id="content">內容</div>
<!-- InstanceEndEditable -->
<div id="footerwrap">
<div class="footer">
<p>傳智播客，致力於專業IT培訓，傳智播客，學有所得</p>
<p>0789-138463-5522</p>
<p>itcast©copyright_Reserved</p>
</div>
</div>
</body>
@charset "utf-8";
/* CSS Document */
body{margin:0; padding:0; font-size:14px; background:url(../images/body_bg.jpg) repeat-x;}
h1,ul,li,div{margin:0; padding:0; list-style:none; border:0;}
/*header*/
#header{width:980px; height:116px; margin:0 auto;}
h1{float:left;}
.headerR{width:752px; height:116px; background:url(../images/headerR.jpg) no-repeat; float:left;}
#nav{width:896px;height:47px; margin:0 auto;line-height:47px;padding-left:84px;}
#nav li{float:left; font-weight:bold;font-size:14px;padding:0 10px}
#nav li a:link,#nav li a:visited{color:white; text-decoration:none}
/*#content*/
#content{width:980px;height:460px; margin:0 auto;background:#ccc;}
/*footerwrap*/
#footerwrap{width:100%;height:79px;border-top:6px solid #666; background:#000;}
.footer{width:980px;height:80px;margin:0 auto;text-align:center}
.footer p{color:#fff; font-size:12px;margin-top:3px}