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>服務(wù)范圍</h3>
<p>our services</p>
</div>
<ul class="design">
<li class="list1">
<img src="img/web1.png" alt="" />
<h3>1.web design</h3>
<p>企業(yè)品牌網(wǎng)站設(shè)計/手機網(wǎng)站制作<br />動畫網(wǎng)站創(chuàng)意設(shè)計</p>
</li>
<li class="list2">
<img src="img/graphic1.png" alt="" />
<h3>2.graphic design</h3>
<p>標志logo設(shè)計/產(chǎn)品宣傳冊設(shè)計<br />企業(yè)廣告/海報設(shè)計</p>
</li>
<li class="list3">
<img src="img/e-bussiness1.png" alt="" />
<h3>3.e-business plan</h3>
<p>淘寶/天貓裝修設(shè)計及運營推廣<br />企業(yè)微博、微信營銷</p>
</li>
<li class="list4">
<img src="img/mail1.png" alt="" />
<h3>4.mailboxagents</h3>
<p>騰訊/網(wǎng)易企業(yè)郵箱品牌代理<br />個性化郵箱定制開發(fā)</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>網(wǎng)站排名進入前三的技巧說明</h4>
<dd>很多客戶都會納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎<br />首頁，更不用說進首頁前三了。那么網(wǎng)站優(yōu)...</dd>
</dl>
<dl>
<dt><p>08</p><span>jan</span></dt>
<h4>網(wǎng)站排名進入前三的技巧說明</h4>
<dd>很多客戶都會納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎<br />首頁，更不用說進首頁前三了。那么網(wǎng)站優(yōu)...</dd>
</dl>
<dl>
<dt><p>07</p><span>jan</span></dt>
<h4>網(wǎng)站排名進入前三的技巧說明</h4>
<dd>很多客戶都會納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎<br />首頁，更不用說進首頁前三了。那么網(wǎng)站優(yōu)...</dd>
</dl>
<dl>
<dt><p>06</p><span>jan</span></dt>
<h4>網(wǎng)站排名進入前三的技巧說明</h4>
<dd>很多客戶都會納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎<br />首頁，更不用說進首頁前三了。那么網(wǎng)站優(yōu)...</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 的高度自適應(yīng)的問題的； */
}
/*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;
}
效果圖：
