实现效果图：
HTML精态框架制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>深圳市恒德电子有限公司</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<!--头部-->
<div class="top">
<div class="top1">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="tel"><img src="images/tel.jpg" /></div>
<div class="function">
<div class="set"><img src="images/wzzh.jpg" /></div>
<div class="search">
<form method="get" action="#">
<input type="text" name="q" id="search-text" size="15" onblur="if(this.value=='') this.value='Keywords';" onfocus="if(this.value=='Keywords') this.value='';" value="Keywords"><input type="submit" id="search-submit" value="搜索">
</form>
</div>
</div></div>
<!--导航-->
<div class="nav">
<ul>
<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>
<li><a href="#">相关文档</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">访客留言</a></li>
</ul>
</div>
<div class="banner"></div>
</div>
<!--中部-->
<div class="zb">
<div class="zb1">
<div class="zb1-left">
<div class="zb1-left-1">
<div class="zb1-left-1-1"><a>图片新闻</a></div>
</div>
<div class="zb1-left-2"><img src="images/duanniuqing .jpg" /></div>
</div>
<div class="zb1-center">
<div class="zb1-center-1">
<div class="zb1-center-1-1"><a>仁德新闻</a></div>
</div>
<div class="zb1-center-2">
<ul>
<li><a href="#">·（活动）深圳市仁德电子科技有限公司2015年秋季趣味运动会</a><span>2015/10/24</span></li>
<li><a href="#">·（祝贺）RDE-仁德电子全体员工中秋节快乐！</a><span>2015/09/24</span></li>
<li><a href="#">·（祝贺）RDE-仁德电子全体员工端午节快乐！</a><span>2015/06/18</span></li>
<li><a href="#">·（事由）五一劳动节放假通知</a><span>2015/05/4</span></li>
<li><a href="#">·（活动）深圳市仁德电子科技有限公司2014年冬季趣味运动会</a><span>2015/05/4</span></li>
<li><a href="#">·（活动）公司管理人员及优秀员工素质拓展训练在南澳岛圆满举办'</a><span>2015/05/4</span></li>
<li><a href="#">·（祝贺）深圳市仁德电子-新站成功上线！</a><span>2015/05/4</span></li>
</ul>
</div>
</div>
<div class="zb1-right">
<div class="zb1-right-1">
<div class="zb1-right-1-1"><a>关于仁德</a></div>
</div>
<div class="zb1-right-2"><img src="images/zb1-right-2.jpg" /></div>
<div class="zb1-right-3">深圳市仁德电子科技有限公司成立于2005年, 是一家主要以提供小型电器智能控制产品的高科技企业。公司拥有多项专利,以领先的智能控制方案,创造...<a href="#">详细>></a></div>
</div>
</div>
<!--中部第二部分-->
<div class="zb2">
<div class="zb2-left">
<div class="zb2-left-1">
<div class="zb2-left-1-1"><a>技术文档</a></div></div>
<div class="zb2-left-2">
<ul>
<li><a href="#">· 仁德电子-详解线路板检修原理</a></li>
<li><a href="#">· 仁德电子-浅谈SMT是什么</a></li>
<li><a href="#">· RDE-线路板加工 手工焊接方法</a></li>
<li><a href="#">· 仁德电子-浅谈电路板的设计影响焊接质量</a></li>
<li><a href="#">· RDE-线路板清洗介质有哪几种</a></li>
<li><a href="#">· 线路板维修电容知识</a></li>
</ul>
</div>
</div>
<div class="zb2-right">
<div class="zb2-right-1">
<div class="zb2-right-1-1"><a>设备展示</a></div>
<div class="zb2-right-1-2">MORE>></div>
</div>
<div class="zb2-right-2">
<div class=" zb2-right-2-1"></div>
<div class="zb2-right-2-2">
<ul>
<li><img src="images/zsy.jpg" />设备展示一</li>
<li><img src="images/zs2.jpg" />设备展示二</li>
<li><img src="images/zs3.jpg" />设备展示三</li>
<li><img src="images/zs4.jpg" />设备展示四</li>
</ul>
</div>
<div class="zb2-right-2-3"></div>
</div>
</div>
</div>
<!--中部第三部分-->
<div class="zb3">
<div class="zb3-1">
<div class="zb3-1-1"><a>公司产品</a></div>
</div>
<div class="zb3-2">
<div class="zb3-2-1">
<div class="zb3-2-1-1"><img src="images/zb3.jpg" /></div>
<div class="zb3-2-1-2">
<ul>
<li><a>></a><span>发热管理系列</span></li>
<li><a>></a><span>电源控制系列</apan></li>
<li><a>></a><span>电机管理系</span>列</li>
<li><a>></a><span>厨房家电系列</span></li>
</ul>
</div>
</div>
<div class="zb3-2-2">
<ul>
<li><img src="images/t1.jpg" /></li>
<li><img src="images/t2.jpg" /></li>
<li><img src="images/t3.jpg" /></li>
<li><img src="images/t4.jpg" /></li>
</ul>
</div>
</div>
</div>
<!--友情链接-->
<div class="yqlj"><p><span>友情链接 ：</span><a>百度 新浪 天涯网 搜狐 站长网 百度贴吧 凤凰网 体坛网 人人网 新浪微博 雅虎 网易</a></p></div>
</div>
<!--底部-->
<div class="b-nav">网站首页 | 关于我们 | 人才招聘 | 网站地图 } 订阅RSS </div>
<div class="banquan"><p> 深圳市仁德电子科技有限公司 版权所有 All Rights Reserved</p>
<p>公司地址：深圳市光明新区圳美大道美华美工业园C7栋6楼 联系电话：0755-27883337 电子邮件：peter@r-d</p>
<p>备案号：粤ICP备09108953号 仁德电子 技术支持 ：HACKSM</p>
</div>
</body>
</html>
CSS样式表展示：
@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0;}
img{ border:none;}
ul,ol,li{ list-style:none;}
div{ margin: 0 auto; font-family: "宋体"; font-size:14px; text-align:center; 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;}
/*头部*/
.top{width:1325px; height:468px; border-top:#C00 3px solid; margin:auto}
.top1{width:1325px; height:120px; }
.logo{width:547px; height:54px; margin-left:120px; margin-top:53px; float: left}
.logo img{width:547px; height:54px}
.tel{width:145px; height:54px; margin:58px 70px 0px 70px; float:left}
.function{width:250px; height:120px; float:left}
.set{ width:230px; height:23px; }
.search{ width:238px; height:21px;margin-top:60px;}
#search-text{ width:171px; height:21px; background:url(../images/search-bg.jpg) top center repeat}
#search-submit{ width:46px; height:24px; background: #FF3}
.nav{width:1325px; height:40px; background:url(../images/nav-bg.jpg) top center repeat; margin-top:26px}
.nav ul{width:1000px; height:40px; margin:auto}
.nav ul li{width:110px; height:40px; line-height:40px; float:left}
.nav ul li a{font-size:14px; line-height:40px; font-family:"微软雅黑"; color:#FFF; font-weight:bold}
.nav ul li a:hover{background: #FC3; display:block}
.banner{width:1077px; height:287px;background:url(../images/banner.jpg) 0 0 no-repeat}
/*中部*/
.zb{width:1077px; height:785px; text-align:center; margin:0 auto;}
/*中部第一部分*/
.zb1{width:1077px; height:280px;margin-right:13px; float:left; margin-top:10px;}
.zb1-left{width:269px; height:280px; float:left; border:#CCC 1px solid}
.zb1-left-1{width:269px; height:28px;background:url(../images/xbt.jpg) top center repeat;}
.zb1-left-1-1{width:100px; height:28px; background:url(../images/nav-bg.jpg) top center repeat; float:left}
.zb1-left-1-1 a{line-height:28px; color:#FFF; font-weight:bold }
.zb1-left-2{ width:269px; height:252px;}
.zb1-left-2 img{ width:252px; height:229px; margin-top:10px}
.zb1-center{width:522px; height:280px; float:left; margin-left:12px;border:#CCC 1px solid}
.zb1-center-1{width:522px; height:28px; background:url(../images/xbt.jpg) top center repeat; float:left}
.zb1-center-1-1{width:100px; height:28px; background:url(../images/nav-bg.jpg) top center repeat; float:left}
.zb1-center-1-1 a{line-height:28px; color:#FFF; font-weight:bold }
.zb1-center-2{width:522px; height:242px; margin-top:43px;}
.zb1-center-2 ul{width:522px; height:242px; }
.zb1-center-2 ul li{width:522px; height:24px; float:left}
.zb1-center-2 ul li a{ margin-left:8px;color: #1B2217; font-family:"微软雅黑";float:left; text-align:left; font-size:10px; line-height:24px}
.zb1-center-2 ul li span{ float:right; margin-right:60px; color: #666}
.zb1-right{width:256px; height:280px; float:left; margin-left:12px; border:#CCC 1px solid}
.zb1-right-1{width:256px; height:28px;background:url(../images/xbt.jpg) top center repeat;}
.zb1-right-1-1{width:100px; height:28px; background:url(../images/nav-bg.jpg) top center repeat; float:left;}
.zb1-right-1-1 a{line-height:28px; color:#FFF; font-weight:bold }
.zb1-right-2{width:216px; height:96px; margin-top:10px}
.zb1-right-3{ width:216px; height:120px; margin:auto;color:#1B2217; font-size:13px; line-height:26px; text-align: left }
.zb1-right-3 a{color:#C30}
/*中部第二部分*/
.zb2{width:1077px; height:210px; }
.zb2-left{width:269px; height:210px; float:left; border:#CCC 1px solid; margin-top:10px}
.zb2-left-1{width:269px; height:28px;background:url(../images/xbt.jpg) top center repeat;}
.zb2-left-1-1{width:100px; height:28px; background:url(../images/nav-bg.jpg) top center repeat; float:left ; margin-bottom:10px}
.zb2-left-1-1 a{line-height:28px; color:#FFF; font-weight:bold }
.zb2-left-2{width:269px; height:170px;}
.zb2-left-2 ul{width:269px; height:170px; float:left}
.zb2-left-2 ul li{width:269px; height:28px; float:left;text-align:left}
.zb2-left-2 ul li a{ margin-left:8px;color: #1B2217; font-family:"微软雅黑";float:left; text-align:left; font-size:10px; line-height:24px}
.zb2-right{width:792px; height:210px; float:left; margin-left:12px;border:#CCC 1px solid ; margin-top:10px}
.zb2-right-1{width:792px; height:28px;background:url(../images/xbt.jpg) top center repeat;}
.zb2-right-1-1{width:100px; height:28px; background:url(../images/nav-bg.jpg) top center repeat; float:left}
.zb2-right-1-1 img{width:100px; height:28px; background:url(../images/nav-bg.jpg) top center repeat; float:left}
.zb2-right-1-1 a{line-height:28px; color: #FFF; font-weight:bold }
.zb2-right-1-2{ width:60px; height:28px; line-height:28px;float:right; font-size:8px; }
.zb2-right-2{width:792px; height:163px; margin-top:10px}
.zb2-right-2-1{width:45px; height:150px; background:url(../images/zb2-left.jpg) top center no-repeat; float:left; margin-right:2px}
.zb2-right-2-2{width:698px; height:128px; float: left;}
.zb2-right-2-2 ul{width:698px; height:128px; float:left;}
.zb2-right-2-2 ul li{width:174px; height:140px; float:left; font-size:13px; font-family:"微软雅黑";line-height:18px}
.zb2-right-2-3{width:45px; height:150px; background:url(../images/zb2-right.jpg) top center no-repeat; float:right}
/*中部第三部分*/
.zb3{width:1077px; height:250px;}
.zb3-1{width:1074px; height:28px; background:url(../images/xbt.jpg) top center repeat; margin-top:312px; margin-bottom:10px}
.zb3-1-1{width:100px; height:28px; background:url(../images/nav-bg.jpg) top center repeat; float:left}
.zb3-1-1 a{line-height:28px; color: #FFF; font-weight:bold }
.zb3-2{width:1077px; height:224px; border-bottom:1px solid #CCC; border-right:1px solid #CCC;margin-bottom:10px; }
.zb3-2-1{width:205px; height:222px; float:left;}
.zb3-2-1-2{width:193px; height:176px;float:left;}
.zb3-2-1-2 ul{width:193px; height:176px; float:left}
.zb3-2-1-2 ul li{width:193px; height:44px;text-align:left; border:#CCC 1px solid ;}
.zb3-2-1-2 ul li a{ line-height:44px; color: #F00; font-weight:600; margin-right:13px; margin-left:25px }
.zb3-2-1-2 ul li span{font-size:12px; font-family:"微软雅黑"; color: #1B2217;}
.zb3-2-2{width:855px; height:222px; float:right;}
.zb3-2-2 ul{width:855px; height:222px;}
.zb3-2-2 ul li{width:211px; height:222px; float:left; margin-top:30px; margin-bottom:22px}
/*友情链接*/
.yqlj{width:1077px; height:42px;border:#CCC 1px solid ; text-align:left; line-height:42px; margin-top:20px}
.yqlj span{float:left; font-size:13px; text-indent:10px}
.yqlj a {font-size:13px; color: #404040 }
/*底部*/
.b-nav{ width:1325px; height:30px;background: url(../images/nav-bg.jpg) top center repeat; font-family:"微软雅黑"; color:#FFF; margin-top:68px; line-height:30px; font-size:13px; margin-bottom:10px}
.banquan{ width:1325px; height:100px;line-height:25px; color:#1B2217; font-size:13px}切图图库：
更多推荐
HTML+CSS网页制作——恒德电子
发布评论