展示与源码
1.效果展示
2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Title</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%;
background: center 0 no-repeat;
position: absolute;
le: 0;
top: 0;
opacity: 0;
z-index: 1;
}
#banner .banner_list li.active {
opacity: 1;
z-index: 10;
}
#banner .banner_list a {
display: block;
width: 100%;
height: 100%;
}
#banner .banner_btn {
width: 100%;
position: absolute;
bottom: 19px;
z-index: 20;
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
}
#service {
overflow: hidden;
min-width: 407px
}
#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;
}
#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: 21px;
}
</style>
</head>
<body>
<div id="head" class="container">
<div class="head_logo l">
<a href="#">
<img src="/imgs/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="container-fluid">
<ul class="banner_list">
<li class="active" style="background-image: url(./imgs/banner.png)"><a href="#"></a></li>
<li style="background-image: url(./imgs/banner.png)"><a href="#"></a></li>
<li style="background-image: url(./imgs/banner.png)"><a href="#"></a></li>
<li style="background-image: url(./imgs/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="service " class="container">
<div class="area_title">
<h2>服务范围</h2>
<p>OUR SERVICES</p>
</div>
<ul class="service_list">
<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 id="case" class="container-fluid">
<div class="container">
<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="./imgs/20141121095216750.png" alt=""></a></li>
<li><a href="#"><img src="./imgs/20141121095528549.png" alt=""></a></li>
<li><a href="#"><img src="./imgs/20141121105856226.png" alt=""></a></li>
</ul>
<div class="case_btn">
<a href="#">VIEW MORE</a>
</div>
</div>
</div>
<div id="news" class="container">
<div class="area_title">
<h2>最新咨询</h2>
<p>THE LATEST NEWS</p>
</div>
<dl>
<dt class="l">
<img src="./imgs/xs1.png" alt="">
</dt>
<dd class="l">
<ul class="news_list l">
<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>08</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">flash网站制作特点</a></h3>
<p>很多客户。。。巴拉巴拉</p>
</div>
</li>
<li>
<div class="news_date l">
<i>07</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>06</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="#">Protfolio</a>| <a href="#">Contact</a>
</div>
</div>
</div>
</body>
</html>
3. css
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
img {
display: block;
}
a {
text-decoration: none;
color: #646464
}
h1, h2, h3 {
font-size: 16px
}
body {
font-family: Arial;
}
.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;
}
.area_title {
margin-top: 60px;
text-align: center;
}
.area_title h2 {
height: 20px;
line-height: 20px;
font-size: 20px;
color: #363636;
background: url(../imgs/title_bg.png) no-repeat center 7px;
font-weight: normal;
}
.area_title p {
color: #9f9f9f;
font-size: 14px;
line-height: 34px
}
.area_title li{
}
.service_list {
text-align: center;
margin-top: 34px;
}
.service_list li {
float: left;
width: 250px;
margin: 0 10px;
}
.service_list div {
width: 102px;
height: 102px;
margin: 0 auto;
}
.service_list li:nth-of-type(1) div {
background-image: url(../imgs/web1.png)
}
.service_list li:nth-of-type(2) div {
background-image: url(../imgs/mail1.png)
}
.service_list li:nth-of-type(3) div {
background-image: url(../imgs/graphic1.png)
}
.service_list li:nth-of-type(4) div {
background-image: url(../imgs/e-bussiness1.png);
}
.service_list h3 {
font-size: 18px;
color: #434343;
line-height: 36px;
margin-top: 25px;
}
.service_list p {
font-size: 14px;
color: #6d6d6d;
line-height: 22px;
}
#foot{background: #66c5b4}
#foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white}
#foot div a {color: white;margin: 0 10px}