index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/common.css">
<style>
#banner{ position: relative;}
#banner .banner_list{ width: 100%; height: 469px; position: relative;}
#banner .banner_list li{ width: 100%;height: 100%;position: absolute;left: 0; top: 0;opacity: 0;z-index: 1;background: center 0 no-repeat;}
#banner .banner_list li.active{ opacity: 1;z-index: 2;}
#banner .banner_list a{display: block;width: 100%;height: 100%;}
#banner .banner_btn{ width: 100%; position:absolute;bottom: 19px;z-index: 3;font-size: 0;text-align: center;}
#banner .banner_btn li{ display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer;}
#banner .banner_btn li.active{ background: white;}
#serive{ overflow: hidden;min-height: 407px;}
#serive .service_list{text-align: center;margin-top: 34px;}
#serive .service_list li{float: left;width: 250px;margin: 0 10px;}
#serive .service_list:after{content: "";display: block;clear: both;}
#serive .service_list div{ width: 102px;height: 102px;margin: 0 auto;}
#serive .service_list li:nth-of-type(1) div{background: url(./images/web1.png);}
#serive .service_list li:nth-of-type(2) div{background: url(./images/graphic1.png);}
#serive .service_list li:nth-of-type(3) div{background: url(./images/e-bussiness1.png);}
#serive .service_list li:nth-of-type(4) div{background: url(./images/mail1.png);}
#serive .service_list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}
#serive .service_list p{ font-size: 14px;color: #6D6D6D;line-height: 22PX;}
#case{background: #f8f8f8;}
#case .container{min-height: 460px;overflow: hidden;}
#case .area_title{margin-top: 55px;}
#case .area_title h2{color: #66C5B4;}
#case .case_list{margin-top: 28px;}
#case .case_list li{float: left;width: 340px;margin: 0 10px;}
#case .case_btn{width: 176px;height: 37px;background: #66C5B4;margin: 0 auto;border-radius: 25px;line-height: 37px;text-align: center;font-size: 14px;margin-top: 36px;}
#case .case_btn a{display: block;width: 100%;height: 100%;color: white;}
#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;}
</style>
</head>
<body>
<div id="head" class="containter">
<div class="head_logo l">
<a href="">
<img src="./images/logo.png" alt="博文尚美" title="博文尚美">
</a>
</div>
<ul class="head_menu r">
<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 id="banner" class="containter-fluid">
<ul class="banner_list">
<li class="active" style="background-image:url(./images/banner.png)"><a href=""></a></li>
<li style="background-image: url(./images/banner.png)"><a href=""></a></li>
<li style="background-image: url(./images/banner.png)"><a href=""></a></li>
<li style="background-image: url(./images/banner.png)"><a href=""></a></li>
</ul>
<ol class="banner_btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div id="serive" class="containter">
<div class="area_title">
<h2>服务范围</h2>
<p>OUR SERVICE</p>
</div>
<div class="service_list">
<ul>
<li>
<div></div>
<h3>1.WEB DESIGN</h3>
<p>企业品牌网站设计/手机网站制作<br>动画网站创意设计</p>
</li>
<li>
<div></div>
<h3>2.GRAPHIC DESIGN</h3>
<p>标志logo设计/产品宣传册设计<br>企业广告/海报设计</p>
</li>
<li>
<div></div>
<h3>3.E-BUSINESS PLAN</h3>
<p>淘宝/天猫装修设计及运营推广<br>企业微博、微信销售</p>
</li>
<li>
<div></div>
<h3>4.MAILBOXAGENTS</h3>
<p>腾讯/网易企业邮箱品牌代理<br>个性化邮箱定制开发</p>
</li>
</ul>
</div>
</div>
<div id="case" class="containter-fluid">
<div class="containter">
<div class="area_title">
<h2>{ 客户案例 }</h2>
<p>With the best professional technology,to design the best innovative web site</p>
</div>
<ul class="case_list clear">
<li>
<a href=""><img src="./images/banner2.png" alt=""></a>
</li>
<li>
<a href=""><img src="./images/banner3.png" alt=""></a>
</li>
<li>
<a href=""><img src="./images/banner4.png" alt=""></a>
</li>
</ul>
<div class="case_btn">
<a href="">VIEW MORE</a>
</div>
</div>
</div>
<div id="news" class="containter">
<div class="area_title">
<h2>最新资讯</h2>
<p>THE 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="containter-fluid">
<div class="containter">
<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>
</body>
</html>
common.css
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
h1,h2,h3,h4,h5,h6{font-size: 16px;font-weight: normal;}
img{display: block;}
a{text-decoration: none;color: #646464;}
body{font-family: Arial;}
.l{float: left;}
.r{float:right}
.clear:after{content: "";display: block;clear: both;}
.containter{margin: 0 auto;width: 1080px;position: relative;}
.containter-fluid{width: 100%;}
#head{ height: 81px;}
#head .head_logo{ width: 162px;height: 44px;margin: 19px;}
#head .head_menu{ font-size: 14px;line-height: 81px;}
#head .head_menu li{ float: left;margin-left: 58px;}
.area_title{ margin-top: 60px;text-align: center;}
.area_title h2{ height: 20px;line-height: 20px;font-size: 20px;color: #363636;background: url("../images/title.png") no-repeat center center;}
.area_title p{ line-height: 34px;font-size: 14px;color: #9F9F9F;}
#foot{background-color: #66c5b4;}
#foot .containter{color: white;height: 54px;line-height: 54px;font-size: 12px;}
#foot div a{color: white;margin: 0 10px;}
3765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
