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}
一起來看靜態網頁製作的效果！
