HTML代码，复制即可。
<!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>奔梦向前</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/huaxia.css"/>
<body>
<div id="header">
<img src="../img/images/images/华夏_03.jpg" />
<ul>
<li><a href="#">关于创正</a><span>|</span></li>
<li><a href="#">新闻动态</a><span>|</span></li>
<li><a href="#">产品中心</a><span>|</span></li>
<li><a href="#">营销网络</a><span>|</span></li>
<li><a href="#">人力资源</a><span>|</span></li>
<li><a href="#">客户服务</a><span>|</span></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div id="center">
<img src="../img/hua_11.jpg" />
</div>
<div id="body">
<div id="left">
<img src="../img/images/华夏_11.jpg" />
<span>more>></span>
<hr />
<ul>
<li><a href="#" class="a">奔梦向前为了梦想前进</a><font>11-03</font></li><hr id="hr"/>
<li><a href="#" class="a">奔梦向前为了梦想前进</a><font>11-03</font></li><hr id="hr" />
<li><a href="#" class="a">奔梦向前为了梦想前进</a><font>11-03</font></li><hr id="hr" />
<li><a href="#" class="a">奔梦向前为了梦想前进</a><font>11-03</font></li><hr id="hr" />
<li><a href="#" class="a">奔梦向前为了梦想前进</a><font>11-03</font></li><hr id="hr" />
</ul>
</div>
<div id="right">
<img src="../img/images/images/华夏_14.jpg" id="img1"/>
<span>MORE>></span>
<hr style="color:#e6e6e6"/>
<div id="left1"><font>奔梦向前是一个为了梦想前进的一个人！</font></div>
<img src="../img/images/images/华夏_19.jpg" id="img2" style="float:right"/>
</div>
</div>
<div id="leg">
<img src="../img/images/images/华夏_22.jpg" />
<span id="span1">MORE>></span>
<hr />
<ul>
<li><img src="../img/images/images/华夏_24.jpg" /><span id="span2">奔梦向前</span></li>
<li><img src='../img/images/images/华夏_26.jpg' /><span id="span2">奔梦向前</span></li>
<li><img src='../img/images/images/华夏_32.jpg' /><span id="span2">奔梦向前</span></li>
<li><img src='../img/images/images/华夏_30.jpg' /><span id="span2">奔梦向前</span></li>
<li><img src='../img/images/images/华夏_32.jpg' /><span id="span2">奔梦向前</span></li>
</ul>
</div>
<div id="bottom">
<ul>
<li>企业简介</li>
<li>新闻动态</li>
<li>产品展示</li>
<li>人才招聘</li>
<li>客户服务</li>
<li>联系我们</li>
<li>网站管理</li>
</ul>
<img src="../img/images/华夏_40.jpg" />
</div>
</body>
</html>
CSS代码复制即可。
/* CSS Document */
*{
margin:0;
padding:0;
} /* 通用选择器，清楚标签默认的内外边距*/
body{
font-size:12px; /*文字大小的属性设置 网页正文中巨大多数都是12px*/
font-family:"宋体"; /*宋体是所有人电脑都有的字体*/
width:901px;
margin:0 auto; /* 以上2行代码设置布局的盒子居中对齐*/
}
ul{
list-style:none; /*清楚列表的项目符号类型*/
}
a{
text-decoration:none; /*去掉超级链接的下划线*/
}
/*头*/
#header{ width:901; height:86px;}
#header img{ margin-left:26px; margin-top:38px; float:left}
#header ul{ float:left; background:url(../img/hua_03.jpg); width:705px; height:53px; margin-top:34px; margin-left:20px}
#header ul li{ float:left; color:#FFF; text-align:center; line-height:50px; margin-left:21px}
#header a{ color:#FFF}
#header a:hover{ color:#F00}
#header span{ margin-left:25px}
/*大图*/
#center{ width:901px; height:281px; margin-top:19px}
/*中间*/
#body{ width:901px; height:162px; margin-top:12px ;}
#left{ width:349px; height:161px; float:left }
#left img{ margin-left:9px}
#left span{ float:right; margin-top:12px; margin-right:12px}
#hr{ color:#e6e6e6; border:1px dashed}
#left ul{ margin-left:11px; }
#left ul li{ background:url(../img/images/images/hua_19.jpg) no-repeat left center; padding-left:14px; line-height:24px;}
#left font{ float:right; margin-right:3px}
#left a{ color:#3e3e3e};
#left a:hover{ color:#F00}
#right{ width:532px; height:161px;float:right}
#img1{ margin-left:9px}
#right span{ float:right ;margin-top:12px; margin-right:12px}
#right left1{ float:left}
#right font{ width:320px; height:120px;float:left; line-height:22px; padding-top:11px; padding-left:5px}
#img2{ float:right; margin-top:10px; margin-right:2px}
/*图片*/
#leg{ width:901px; height:190px; margin-top:6px;}
#leg img{}
#span1{ float:right; margin-top:12px; margin-right:12px}
#leg ul{ height:151px}
#leg ul li{ width:138px; height:151px; float:left; background-color:#f7f7f7; margin-right:35px; margin-top:10px}
#span2{ float:left; margin-left:35px; margin-top:5px;}
/*尾*/
#bottom{ width:901px; height:59px; margin-top:39px; border:solid 1px #CCC}
#bottom ul{ margin-left:40px; float:left; margin-top:25px; width:590px}
#bottom ul li{ border-right:1px solid; float:left; width:70px; margin-right:10px}
#bottom img{ float:right; margin-right:20px; margin-top:17px}
一起来看静态网页制作的效果！
