传智播客模板页
下面先来看一下效果图
首先分析一下，该页面有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{980px; height:116px; margin:0 auto;}
h1{float:left;}
.headerR{752px; height:116px; background:url(../images/headerR.jpg) no-repeat; float:left;}
#nav{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{980px;height:460px; margin:0 auto;background:#ccc;}
/*footerwrap*/
#footerwrap{100%;height:79px;border-top:6px solid #666; background:#000;}
.footer{980px;height:80px;margin:0 auto;text-align:center}
.footer p{color:#fff; font-size:12px;margin-top:3px}