!DOCTYPE html
html
head
meta charset=“utf-8” /
title></title
style type=“text/css”
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dt,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
body{font-size:16px;font-family: ‘微软雅黑’;}
ul,ol,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:16px;font-weight: normal;}
b,strong{font-weight: normal;}
i,em{font-style: normal;}
a,u,ins{text-decoration: none;}
img{border:0;display:block;}
input,fieldset{outline: none;border:0;}
.clear_fix:after{content:’.’;
clear:both;
height:0;
overflow:hidden;
display:block;
visibility: hidden;}
.clear_fix{zoom:1; /* 用来兼容IE6、7 的高度自适应的问题的； */}
.top,.nva,.main,.main2,.btomm,.copy{width: 100%;height: 100%;}
.top1{width: 1350px;height: 80px;margin: 0 auto;}
.top1 h1{float: left;width: 300px;margin-left: 130px;margin-top: 18px;}
.top1 li{float:left;width: auto;margin: 30px 27px;}
.nva1{width:1350px;height:470px;margin: 0 auto;}
.main1{margin: 0 auto;width: 1220px;height: 410px;padding-left: 130px;padding-bottom: 70px;text-align: center;}
.main1 h1{padding-top:50px;margin:0px 380px;}
.main1 li{width: 204px;height: 214px;float: left;margin: 30px 43px;}
.main1 a{display: block;font-size: 16px;color: #232323;font-weight:800}
.main1 img{margin: 20px 45px;}
.main1 span{display:block;font-size:12px;line-height: 26px;color: #7a7a7a;}
.main3{width: 1350px;height: 456px;margin: 0 auto;background: #f8f8f8;}
.main4 h1{padding-top: 50px;padding-left: 500px;width: 344px;height: 22px;}
.main4 p{font-size: 16px;color: #7A7A7A;text-align: center;}
.main5{padding-left:146px;height: 220px;}
.main5 li{margin: 20px 10px;float: left;height:185 ;width: 340px;}
.main6{background: #67c5b5;width: 184px;height: 40px;line-height: 40px;text-align: center;margin-left: 580px;margin-top: 30px;}
.main6 h2{font-size: 14px;color: #ddf0ee;}
.btomm1{width: 1350px;height: 380px;margin: 0 auto;}
.btomm2 h1{padding-top: 50px;padding-left: 500px;width: 344px;height: 22px;}
.btomm2 p{font-size: 16px;color: #7A7A7A;text-align: center;padding-bottom: 50px;}
.btomm3{height: 200px;float: left;}
.btomm3 h2{border: 4px solid #e6e4e7;width: 225px;height: 185px;margin:0px 50px;}
.btomm4{width: 392px;height: 76px;float: left;padding-right: 46px;padding-bottom: 40px;}
.btomm4 p{margin-top: 6px;float: left;border-right: 1px solid #dcdcdc;padding-right: 10px;}
.btomm4 h2{font-size: 12px;color: #232323;text-indent: 12px;line-height: 28px;}
.btomm4 span{display: block;font-size: 12px;line-height: 22px;color: #a4a4a4;padding-left: 14px;overflow: hidden;text-overflow: ellipsis;}
.btomm5{width: 392px;height: 76px;float: left;padding-bottom: 40px;}
.btomm5 p{margin-top: 6px;float: left;border-right: 1px solid #dcdcdc;padding-right: 10px;}
.btomm5 h2{font-size: 12px;color: #232323;text-indent: 12px;line-height: 28px;}
.btomm5 span{display: block;font-size: 12px;line-height: 22px;color: #a4a4a4;padding-left: 14px;overflow: hidden;text-overflow: ellipsis;}
.btomm6{width: 392px;height: 76px;float: left;padding-right: 46px;}
.btomm6 p{margin-top: 6px;float: left;border-right: 1px solid #dcdcdc;padding-right: 10px;}
.btomm6 h2{font-size: 12px;color: #232323;text-indent: 12px;line-height: 28px;}
.btomm6 span{display: block;font-size: 12px;line-height: 22px;color: #a4a4a4;padding-left: 14px;overflow: hidden;text-overflow: ellipsis;}
.btomm7{width: 392px;height: 76px;float: left;}
.btomm7 p{margin-top: 6px;float: left;border-right: 1px solid #dcdcdc;padding-right: 10px;}
.btomm7 h2{font-size: 12px;color: #232323;text-indent: 12px;line-height: 28px;}
.btomm7 span{display: block;font-size: 12px;line-height: 22px;color: #a4a4a4;padding-left: 14px;overflow: hidden;text-overflow: ellipsis;}
.copy1{width: 1350px;height: 54px;margin: auto;background:#67C5B5;}
.copy1 h2{width: 450px;color: #fffffd;font-size: 12px;line-height: 54px;padding-left: 130px;float: left;padding-right: 200px;}
.copy1 li {float:left;width:70px;margin: 16px 10px;border-right:2px solid #7A7A7A;}
.copy1 a{display: block;font-size: 12px;color: #FFFFFD;}
.copy1 .qu{border: none;}
</style>
</head>
<body>
<div class="top">
<div class="top1">
<h1><img src="img/logo.jpg"/></h1>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">PROTFOLIO</a></li>
<li><a href="">SERVICE</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<div class="nva">
<div class="nva1">
<a href=""><img src="img/bei.jpg"/></a>
</div>
</div>
<div class="main">
<div class="main1">
<h1><a href=""><img src="img/fuwu.jpg"/>OUR SERVICES</a></h1>
<ul>
<li><a href=""><img src="img/i1.jpg"/>1.WEB DESIGN</a><span>企业品牌网站设计/手机网站制作动画网站创意设计</span></li>
<li><a href=""><img src="img/i2.jpg"/>2.GRAPHIC DESIGN</a><span>标志LOGO设计/产品宣传册设计企业广告/海报设计</span></li>
<li><a href=""><img src="img/i3.jpg"/>3.E-BUSINESS PLAN</a><span>淘宝/天猫装修设计及运营推广企业微博，微信营销</span></li>
<li><a href=""><img src="img/i4.jpg"/>4.MAILABOXAGENTS</a><span>腾讯/网易企业邮箱品牌代理个性化邮箱定制开发</span></li>
</ul>
</div>
</div>
<div class="main2">
<div class="main3">
<div class="main4">
<h1><a href=""><img src="img/kehu.jpg"/></a></h1>
<p>With the best professional technology,to dest innovative web site</p>
<div class="main5">
<ul>
<li><a href=""><img src="img/t1.jpg"/></a></li>
<li><a href=""><img src="img/t2.jpg"/></a></li>
<li><a href=""><img src="img/t3.jpg"/></a></li>
</ul>
</div>
</div>
<div class="main6">
<h2>NLEW MORE</h2>
</div>
</div>
</div>
<div class="btomm">
<div class="btomm1">
<div class="btomm2">
<h1><a href=""><img src="img/zixun.jpg"/></a></h1>
<p>TEH LATEST NEWS</p>
</div>
<div class="btomm3">
<h2><a href=""><img src="img/fang.jpg"/></a></h2>
</div>
<div class="btomm4">
<p><img src="img/09.jpg"/></p>
<h2>网站排名前三的技巧说明</h2>
<span>很多客己得1网站老是优化不到搜索引擎首页，更不用说首页前三了，那么网站优...</span>
</div>
<div class="btomm5">
<p><img src="img/08.jpg"/></p>
<h2>flash网站制作的优缺点</h2>
<span>很多客户都会纳老是优化不到搜索引擎首页，更不用说首页前三了，那么网站优...</span>
</div>
<div class="btomm6">
<p><img src="img/07.jpg"/></p>
<h2>做个网站多少钱？</h2>
<span>很多客户都会得1网站老是优化不到搜索引擎首页，更不用说首页前三了，那么网站优...</span>
</div>
<div class="btomm7">
<p><img src="img/06.jpg"/></p>
<h2>那些网站优化手法属于网站过度优化</h2>
<span>很多客户都会纳闷为老是优化不到搜索引擎首页，更不用说首页前三了，那么网站优...</span>
</div>
</div>
</div>
<div class="copy">
<div class="copy1">
<h2>Copyriht 2006-2014 Bowenshangmei Culture All Rights Reservec</h2>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li class="qu"><a href="">Contact</a></li>
</ul>
</div>
</body>
/html
来源：CSDN
作者：huxinjian1
链接：https://blog.csdn.net/huxinjian1/article/details/104619819