<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ol,ul{list-style: none;}
a{text-decoration: none;color: #646464;}
img{display: block;}
body{font-family: ArialMT;}
.header{width:100%;height: 81px;position:fixed;background-color: white;position: relative;}
.header img{width:162px;height:44px;margin-left: 135px;margin-top:19px;margin-right:300px;}
.header ul{min-width:700px;height:81px;position: absolute;top:0;left:40%}
.header ul li{float:left;font-size: 14px; line-height: 81px;margin-left: 60px;}
.body1{width: 100%;height: 500px;position: relative;/* overflow: hidden; */}
.body1 img{width: 90%;height: 100%;margin:0 auto;}
.body1 ol{width:110px;height:12px;position: absolute;top:90%;left:45%;}
.body1 ol li{width: 12px;height:12px;border-radius: 12px;border: 2px solid white;float: left;margin-left: 10px; }
.body1 ol li:nth-of-type(1){background-color: white;}
.body2{width:90%;height:400px;margin:0 auto;text-align: center;margin-top:61px;}
.body2 div h2{height:20px;line-height:20px;font-size:20px;background:url("images/title_bg.png") no-repeat center ;}
.body2{min-width: 1280px; min-height:400px;}
.body2 div p{font-size:14px;}
.body2-list li{margin-top:44px;margin-left:90px;;float: left;}
.body2-list div img{margin:0 auto;}
.body3{width:100%;height:400px;margin:0 auto;text-align: center;background-color:#f5f5f0;}
.body3 div h2{height:20px;line-height:20px;font-size:20px;background:url("images/title_bg.png") no-repeat center ;color:rgba(102,197,180,1);}
.body3 div p{margin-bottom: 60px;}
.body3 div img{min-width:340px;float: left;margin:0 20px;top:0;left:0;margin-left: 110px;}
.body3 .tupian{min-width:1050px;height:200px;}
.body3 .anniu{width:150px;height:30px;border-radius: 15px;background-color: darkcyan;margin: 10px auto;}
.body3 .anniu a{color: black;line-height:30px;}
.body3 .anniu a:hover{color:white;}
.footer{width:100%;height: 40px;background-color:#66C5B4;position:relative;}
#news{ min-height:450px; overflow: hidden;}
#news .area_title{ margin-top:65px;}
#news dl{ margin-top:48px;}
#news dt{ width:234px;}
#news dd{ width:846px;}
#news .news_list{ width:100%;}
#news .news_list li{ width:50%; float: left; margin-bottom: 48px;}
#news .news_date{ width:71px; height:70px; border-right:1px solid #DCDCDC; text-align: center;}
#news .news_date i{ color:#66C5B4; font-size:39px; display:block; font-weight: bold;}
#news .news_date span{ color:#999999; font-size:20px; line-height: 36px;}
#news .news_text{ width:310px; margin-left:20px;}
#news .news_text h3{ font-size:14px;}
#news .news_text h3 a{ color:#3F3F3F;}
#news .news_text p{ color:#A4A4A4; font-size:12px; line-height: 21px; margin-top:17px;}
.l{ float: left;}
.r{ float: right;}
.clear:after{ content:""; display: block; clear:both;}
.container{ width:1080px; margin:0 auto; position: relative;}
.container-fluid{ width:100%;}
#head{ height:81px;}
#head .head_logo{ width:162px; height:44px; margin-top:19px;}
#head .head_menu{ font-size:14px; line-height: 81px;}
#head .head_menu li{ float:left; margin-left:58px;}
#foot{ background: #66c5b4;}
#foot .container{ height:54px; line-height: 54px; font-size:12px; color:white;}
#foot div a{ color:white; margin:0 10px;}
</style>
</head>
<body>
<div class="header">
<div>
<a href=""><img class="l"src="images/logo.png" alt="博文尚美"></a>
</div>
<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>
</ul>
</div>
<div class="body1">
<a href="">
<img src="images/banner.png" alt="">
</a>
<a href="">
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</a>
</div>
<div class="body2">
<div>
<h2>服务范围</h2>
<p>OUR SERVICES</p>
</div>
<ul class="body2-list">
<li>
<div><img src="images/e-bussiness1.png" alt=""></div>
<h3>1.web design</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
<li>
<div><img src="images/graphic1.png" alt=""></div>
<h3>2.graphic design</h3>
<p>
标志logo设计/产品宣传册设计
<br>
企业广告/海报设计
</p>
</li>
<li>
<div><img src="images/web1.png" alt=""></div>
<h3>3.e-business plan</h3>
<p>
淘宝/天猫装修设计及运营推广
<br>
企业微博、微信营销
</p>
</li>
<li>
<div><img src="images/mail1.png" alt=""></div>
<h3>4.mailboxagents</h3>
<p>
腾讯/网易企业邮箱品牌代理
<br>
个性化邮箱定制开发
</p>
</li>
</ul>
</div>
<div class="body3">
<div>
<h2>[客户案例]</h2>
<p>With the best professional technology, to design the best innovative web site</p>
</div>
<div class="tupian">
<img src="images/20141121095216750.png" alt="">
<img src="images/20141121095528549.png" alt="">
<img src="images/20141121105856226.png" alt="">
</div>
<div class="anniu">
<a href="">view more</a>
</div>
</div>
<div id="news" class="container">
<div class="area_title">
<h2>最新资讯</h2>
<p>TEH LATEST NEWS</p>
</div>
<dl>
<dt class="l">
<img src="./images/xs1.png" alt="">
</dt>
<dd class="l">
<ul class="news_list">
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div id="foot" class="container-fluid">
<div class="container">
<p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
<div class="r">
<a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a>
</div>
</div>
</div>
</body>
</html>
