HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>博文尚美</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap">
<!--top-->
<div class="top">
<div class="logo">
<img src="img/logo.png" alt=""/>
</div>
<ul class="nav">
<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>
<!--banner-->
<div class="bannerwrap">
<div class="banner">
<p>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</p>
</div>
</div>
<!--main-->
<div class="main">
<div class="main1">
<div class="tit1">
<h3>服务范围</h3>
<p>our services</p>
</div>
<ul class="design">
<li class="list1">
<img src="img/web1.png" alt="" />
<h3>1.web design</h3>
<p>企业品牌网站设计/手机网站制作<br />动画网站创意设计</p>
</li>
<li class="list2">
<img src="img/graphic1.png" alt="" />
<h3>2.graphic design</h3>
<p>标志logo设计/产品宣传册设计<br />企业广告/海报设计</p>
</li>
<li class="list3">
<img src="img/e-bussiness1.png" alt="" />
<h3>3.e-business plan</h3>
<p>淘宝/天猫装修设计及运营推广<br />企业微博、微信营销</p>
</li>
<li class="list4">
<img src="img/mail1.png" alt="" />
<h3>4.mailboxagents</h3>
<p>腾讯/网易企业邮箱品牌代理<br />个性化邮箱定制开发</p>
</li>
</ul>
</div>
<div class="main2wrap">
<div class="main2">
<div class="tit2">
<h3>{ 客户案例 }</h3>
<p>With the best professional technology, to design the best innov</p>
</div>
<div class="pic">
<img src="img/pic1.jpg" alt="" />
<img src="img/pic2.jpg" alt="" />
<img src="img/pic3.jpg" alt="" />
</div>
<div class="more">
<a href="#">view more</a>
</div>
</div>
</div>
<div class="main3">
<div class="tit3">
<h3>最新资讯</h3>
<p>TEH LATEST NEWS</p>
</div>
<div class="bottom">
<div class="left">
<img src="img/xs1.jpg" alt=""/>
</div>
<div class="right">
<dl>
<dt><p>09</p><span>jan</span></dt>
<h4>网站排名进入前三的技巧说明</h4>
<dd>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎<br />首页，更不用说进首页前三了。那么网站优...</dd>
</dl>
<dl>
<dt><p>08</p><span>jan</span></dt>
<h4>网站排名进入前三的技巧说明</h4>
<dd>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎<br />首页，更不用说进首页前三了。那么网站优...</dd>
</dl>
<dl>
<dt><p>07</p><span>jan</span></dt>
<h4>网站排名进入前三的技巧说明</h4>
<dd>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎<br />首页，更不用说进首页前三了。那么网站优...</dd>
</dl>
<dl>
<dt><p>06</p><span>jan</span></dt>
<h4>网站排名进入前三的技巧说明</h4>
<dd>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎<br />首页，更不用说进首页前三了。那么网站优...</dd>
</dl>
</div>
</div>
</div>
</div>
<!---->
</div>
<!--copy-->
<div class="copywrap">
<div class="copy">
<p>Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
<span><a href="">Home</a> | <a href="">About</a> | <a href="">Portfolio </a> | <a href="">Contact</a></span>
</div>
</div>
</body>
</html>
CSS:
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dt,dd,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*/
.top{
width:1082px;
height:81px;
margin: 0 auto;
}
.logo{
float:left;
}
.nav{
float:right;
}
.nav li{
float: left;
height:81px;
line-height: 81px;
margin-left: 55px;
}
.nav li a{
font-size:14px;
font-family: arial;
font-weight: 500;
color:#646464;
}
/*banner*/
.bannerwrap{
width:100%;
height:470px;
background: url(../img/banner.jpg) no-repeat center top;
}
.banner{
height:470px;
background: #;
position: relative;
}
.banner p{
width:92px;
position: absolute;
bottom:19px;
left:50%;
margin-left:-46px;
}
.banner p span{
float: left;
width:8px;
height:8px;
border:2px solid #fff;
border-radius: 50%;
margin: 0 6px 0 5px;
font-size: 0;
}
.banner p span:hover{
background: #fff;
}
/*main*/
.main{
width: 100%;
}
.main1{
width: 1082px;
height: 411px;
margin: 0 auto;
}
.tit1{
height: 83px;
text-align: center;
padding-top:53px;
}
.tit1 h3{
font-size: 20px;
color: #363636;
height: 36px;
line-height: 36px;
background: url(../img/形状1.png) no-repeat center center;
}
.tit1 p{
font-size: 14px;
font-family: arial;
color: #9f9f9f;
height: 20px;
line-height: 20px;
}
.design{
height: 275px;
padding:0 10px;
}
.design li{
float: left;
width: 264px;
height: 275px;
text-align: center;
}
.design img{
display: inline-block;
text-align: center;
}
.design h3{
margin-top:23px;
margin-bottom:7px;
font-size: 18px;
font-weight:bold;
height:36px;
line-height: 36px;
color: #434343;
}
.design p{
color: #6d6d6d;
font-size: 14px;
line-height: 22px;
}
.main2wrap{
width:100%;
height:456px;
background: #f8f8f8;
}
.main2{
width:1082px;
height:456px;
margin: 0 auto;
}
.tit2{
height: 83px;
text-align: center;
padding-top:53px;
}
.tit2 h3{
font-size: 20px;
height: 36px;
line-height: 36px;
color: #66c5b4;
background: url(../img/形状1.png) no-repeat center center;
}
.tit2 p{
font-size: 14px;
height: 20px;
line-height: 20px;
color: #9f9f9f;
}
.pic{
overflow: hidden;
}
.pic img{
float: left;
margin: 0 10px;
}
.more{
}
.more a{
display: block;
width: 176px;
height:37px;
margin: 36px auto 67px;
border-radius: 18px;
background: #66c5b4;
color:#ffffff;
font-size:14px;
height:36px;
line-height: 36px;
text-align: center;
}
.main3{
width: 1082px;
height: 362px;
margin: 0 auto;
margin-bottom: 90px;
}
.tit3{
height: 107px;
padding-top: 59px;
text-align: center;
}
.tit3 h3{
font-size: 20px;
height: 36px;
line-height: 36px;
background: url(../img/形状1.png) no-repeat center center;
}
.tit3 p{
font-size: 14px;
height: 20px;
line-height: 20px;
color: #9f9f9f;
}
.bottom{
overflow: hidden;
}
.left{
float: left;
}
.right{
float: none;
}
.right dl{
width: 420px;
height: 71px;
float: right;
margin-bottom: 44px;
}
.right dt{
font-size: 14px;
color: #3f3f3f;
border-right:1px solid #dcdcdc;
width: 72px;
height:71px;
margin-right: 17px;
float: left;
}
.right dt p{
font-size:39px;
line-height: 36px;
text-align: center;
color: #66c5b4;
}
.right dt span{
font-size:20px;
line-height: 36px;
display: block;
text-align: center;
color: #999999;
}
.right dl h4{
font-size:14px;
line-height: 22px;
color:#3F3F3F;
margin-bottom: 12px;
}
.right dd{
font-size: 12px;
line-height: 21px;
color: #a4a4a4;
width:327px;
height:71px;
float: left;
}
/*copy*/
.copywrap{
width: 100%;
background: #66c5b4;
}
.copy{
width: 1082px;
height: 54px;
margin: 0 auto;
}
.copy p{
float: left;
color: #fff;
font-size:12px;
line-height: 54px;
}
.copy span{
float: right;
color: #fff;
font-size:12px;
line-height: 54px;
}
.copy a{
color: #fff;
padding: 0 15px;
}
效果图：
