实现的效果图：
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=gb2312" />
<title>云端建站</title>
<link href="css/style1.css" rel='stylesheet'/>
</head><body>
<!--头部-->
<div class="top1"></div>
<div class="top2">
<div class="top2-1"><img src="images/logo..png" /></div><div class="top2-2">
<ul>
<li><a href="#">首页</a> </li>
<li><a href="#"> 新闻网页 </a> </li>
<li><a href="#"> 联系我们 </a> </li>
<li>
<a href="#"> 关于我们</a>
<ul>
<li><a href="#"> 企业简介</a> </li>
<li><a href="#"> 品牌介绍</a> </li></ul></li>
<li><a href="#"> 留言板</a> </li>
</ul></div>
</div>
<div class="top3"><img src="images/tp..png" /></div>
<!--中部-->
<div class="t">
<!--中部第一行-->
<div class="t1">
<ul>
<li><img src="images/1.png" /> </li>
<li><img src="images/2.png" /> </li>
<li><img src="images/3.png" /> </li>
<li><img src="images/4.png" /> </li>
<li><img src="images/5.png" /> </li>
</ul>
</div>
<!--中部第二行-->
<div class="t2">
<!--中间第二行左边-->
<div class="t2-left">
<!--中间第二行左边第一行-->
<div class="t2-left-1">
<div class="t2-1eft-1-1">关于我们</div>
<div class="t2-left-1-2"><a href="#"><img src="images/more.gif" /></a></div>
</div>
<!--中间第二行左边第二行-->
<div class="t2-left-2">
<div class=" t2-left-2-1eft"><img src="images/gywm.gif" /> </div>
<div class=" t2-left-2-right"><p>XX科技股份有限公司（股票代码：002315），成立于1996年1月9日，是国内领先的综合型第三方B2B电子商务平台运营商，
其开发及运营的中国制造网（Made-in-China.com）位列国内B2B电子商务领域前三甲。该平台现已成为全球采购商采购中国制造
产品的重要渠道。</p></div></div>
<!--中间第二行左边第三行-->
<div class=" t2-left3">
<div class=" t2-left-3"><p> XX科技专注服务于全球贸易领域，在帮助中国中小企业应用互联网络开展国际营销、产品推广方面拥有超过十年的成功经验。公司积极平衡中国供应商与全球采购商，注册免费会员与注册收费会员之间的服务与利益以维持中国制造网电子商务平台的持续稳定发展，并获得公司营业收入及盈利持续增长2010年，XX科技成功收购台湾本土最大的B2B电子商务平台文笔国际股份有限公司，实现两岸行业内首度牵手，借此番收购，XX科技成功整合两岸B2B行业资源...</p></div>
<div class=" t2-left-4"></div></div> </div>
<!--中间第二行右边-->
<div class="t2-right">
<div class="c1">为什么会选择我们</div>
<table width="318" height="210" border="0" style="color: #333" ><tr ><td height="21" style="font-size:16px" style="font-family:'微软雅黑'">宗旨与使命</td></tr><tr> <td height="21" >弘扬中国制造，服务中小企业，促进全球贸易</td></tr><tr><td height="21" > </td></tr><tr><td height="21" style="font-size:16px" style="font-family:'微软雅黑'">愿景与目标</td></tr><tr> <td height="21" >愿景：成为全球领先的电子商务服务提供商 </td></tr><tr> <td height="21" >目标：未来3－5年的行业第一</td></tr><tr><td height="21" > </td></tr><tr><td height="21" style=" font-size:16px" style="font-family:'微软雅黑'">价值观</td></tr><tr> <td height="21" >核心价值观：努力创造客户认可的产品和服务</td></tr><tr> <td height="21" >四个基本理念：客户、务实、创新、团队</td></tr>
</table></div></div>
<!--中部第三行-->
<div class="t3">
<div class="t3-1"><a>服务项目</a></div>
<div class="t3-2"><ul><li><img src="images/f1.gif" /><a>对于知识产权的保护，×××更是高度重视</a></li><li><img src="images/f2.gif" /><a>每一个客户传递正确的解决方法，为每个客户争取最大的I.T.价值。包括适当的设计可以提硬件的效能的布线解决方案</a></li><li><img src="images/f3.gif" /><a> 电话已经诞生100年了，但它的发展却从未有停止，例如VOIP、Skype、3G、iphone更高级的功能，更弹性的配套不断的应运而生。</a></li> <li><img src="images/f4.gif" /><a>我们的团队会为您提供一周七天，一天24小时的在线服务，并在第一时间内满足您的要求。</a></li></ul>
</div>
</div>
</div>
<!-- 底部-->
<div class="foot">
<p>首页|关于我们|联系我们</p>
<p>@2015 lijie 版权所有</p>
<p>技术支持：缘 源 园 建站}手机版}管理登陆</p>
</div>
</body>
</html>
CSS样式表
@charset "gb2312";
/* CSS Document */
*{ margin:0; padding:0;}
img{ border:none;}
ul,ol,li{ list-style:none;}
div{ height:auto; /*overflow:hidden;*/ font-family: "宋体"; font-size:14px; text-align: left;display:block; margin:0 auto }
a{ text-decoration:none;}
a:link{ text-decoration:none;}
a:visited{ text-decoration:none;}
a:hover{ text-decoration:none;}
a:active{ text-decoration:none;}
.body{background:#FFF; width:100%; height:auto}
/*头部*/
.top1{width:100%; height:40px; background:url(../images/top.png)top center repeat }
.top2{ height:105px; width:100%; }
.top2-1{ width:317px; height:105px; float:left; }
.top2-1 img{width:167px; height:62px;margin :25px 252px 20px 141px;}
.top2-2{width:770px; height:105px; float:right; }
.top2-2 ul{width:600px;height:40px; float:left; margin:45px 0 20px 0 ;text-align:center; }
.top2-2 ul li{width:104px; height:40px; line-height:40px; float:left; }
.top2-2 ul li a{ font-size:19px; color:#333 ;font-weight:800; margin-left:3px; display:block}
.top2-2 ul li span{float:right}
.top2-2 ul li a:hover{ color:#000; border-bottom:#000 solid 4px; }
.top2-2 ul li ul{visibility:hidden;width:100px; height:auto; position: absolute; background:#333}
.top2-2 ul li;hover ul{ visibility:visible; background:#333; }
.top2-2 ul li:hover ul li{visibility:visible; display:block;color:#CCC; border-top:solid 1px #000; height:36px}
.top2-2 ul li:hover ul li a{ color: #CCC; font-size:14px; display:block}
.top2-2 ul li:hover ul li a;hover{color: #FFF;}.top3{width:100%; heigt:432px}/*中部*/
.t{width:1095px; height:855px; margin: 0 auto }
/*中部第一行*/
.t1 {width:1095px; height:194px;margin:35px 0;}
.t1 ul{width:1095px; height:194px;float:left;}
.t1 ul li{width:187px; height:194px; float:left; margin:0 15px}
.t1 img{width:187px; height:194px; margin:0 auto}
/*中部第二行*/
.t2{width:1095px; height:305px; }
/*中间第二行左边*/
.t2-left{width:753px; height:305px; float:left}
/*中间第二行左边第一行*/
.t2-left-1{width:752px; height:35px; border-bottom:#999 1px solid; float:left}
.t2-1eft-1-1{width:100px; height:35px; line-height:35px; float:left; font-family:"微软雅黑"; font-size:16px; border-bottom: #000 2px solid; text-align:center}
.t2-left-1-2{width:80px; height:35px;float:right; }
.t2-left-1-2 img{width:49px; height:16px; margin:10px 20px 9px auto}
/*中间第二行左边第二行*/
.t2-left-2{ width:752px; height:155px; border-right:1px dotted #000; margin-top:45px; }
.t2-left-2-1eft {width:267px;height:132px;margin:12px 8px 10px 6px; float:left; }
.t2-left-2-1eft img { width:267px;height:132px; }
.t2-left-2-right{ width:446px; height:111px;margin-top:37px; margin-right:15px; float:right; }
.t2-left-2-right p{ text-indent:28px; font-size:16px; color:#333 ;line-height:21px;}
/*中间第二行左边第三行*/
.t2-left3{width:752px; height:105px;}
.t2-left-3{width:735px; height:105px; float:left; }
.t2-left-3 p{ text-indent:28px;font-size:16px; color:#333 ;line-height:21px; }
.t2-left-4{width:15px; height:105px; border-right:1px dotted #000; float:right; }
/*中间第二行右边*/
.t2-right{width:324px; height:305px; float: right}
.c1{font-size:16px; font-weight:600; text-align:left; margin-top:6px; margin-bottom:10px}
/*中部第三行*/
.t3{width:1094px; height:300px; float:left; }
.t3-1{width:1094px; height:35px; float:left; font-family:"微软雅黑"; font-size:16px; border-bottom:#999 1px solid;}
.t3-1 a{width:94px; height:35px;line-height:35px; display:block;border-bottom: #000 2px solid;text-align:center}
.t3-2{width:1094px; height:300px; text-align:center; }
.t3-2 ul{width:1094px; height:251px; text-align:left}
.t3-2 ul li{width:220px; height:251px; float:left; margin:0 24px}
.t3-2 ul li img { width:213px; height:134px; margin-top:4px;margin-bottom:18px }
.t3-2 ul li a{line-height:22px}
/*底部*/
.foot{width:100%; height:123px; background:#EAEAEA; font-family:"微软雅黑";text-align:center; line-height:26px; padding-top:36px; border:1px solid #CCC}
切片图库：
