common.css
@charset "utf-8";
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,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: none;/*取消IE浏览器里面加了超链接的图片的默认边框*/
display: block;/*取消图片的默认空隙*/
}
input,fieldset{
outline: none;/*取消input聚焦时产生的蓝色框*/
border:0;
}
.clear_fix:after{
content:'.';
clear:both;
height:0;
overflow:hidden;
display:block;
visibility: hidden;
}
.clear_fix{
zoom:1;/*兼容ie6,7的高度自适应问题*/
}
博文尚美.css
.top,.banner,.service,.client,.news,.bottom{
width: 1082px;
margin:0 auto;
}
/*top区域*/
.top{
/*padding: 19px 0 18px 135px;*/
height: 81px;
}
.top .logo{
float: left;
}
.top .nav{
font-family: arial;
padding-top: 19px;
float: right;
}
.top .nav li{
float: left;
}
.top .nav a{
display: block;
color: #646464;
line-height: 44px;
padding: 0 28px 0 27px;
}
.nav .lastli a{
padding-right: 0;
}
/*banner区域*/
.bannerWrap{
width: 100%;
height: 469px;
background:black url(../img/banner-shangmei.jpg) no-repeat center top ;
}
.banner{
height: 469px;
position: relative;
}
.banner p{
width: 92px;
height: 12px;
position: absolute;
bottom: 19px;
left: 50%;
margin-left: -46px;
}
.banner p span{
float: left;
width: 8px;
height: 8px;
border:2px solid #fff ;
margin:0 6px 0 5px;
border-radius: 50%;
font-size: 0;
}
.banner p span:hover{
background: #fff;
}
/*service区域*/
.service{
height: 407px;
}
.tit{
height: 81px;
background:url(../img/bj1.png) no-repeat center 67px;
line-height: 32px;
font-size: 20px;
color: #363636;
text-align: center;
padding-top: 55px;
}
.tit span{
font-size: 14px;
line-height: 20px;
font-family: arial;
color: #9f9f9f;
display: block;
}
.service-list{
padding: 0 10px;
}
.service-list li{
width: 190px;
height: 270px;
float: left;
text-align: center;
padding: 0 37px ;
}
.service-list li img{
margin: 0 auto;
}
.service-list h4{
font-size: 14px;
line-height: 36px;
font-weight: bold;
color: #343434;
}
.service-list p{
font-size: 14px;
line-height: 22px;
color: #6d6d6d;
}
/*client区域*/
.clientWrap{
width: 100%;
height: 460px;
background: #f8f8f8;
}
.client{
height: 460px;
}
.client .tit{
height: 90px;
padding-top: 50px;
color:#66c5b4;
background: url(../img/bj1.png) no-repeat center 61px;
}
.client span{
color: #9f9f9f;
}
.client p img{
float: left;
margin: 0 7px 0 12px;
}
.client .more{
display: block;
width: 176px;
height: 37px;
font-size: 14px;
font-family: Arial;
line-height: 42px;
color: #ffffff;
text-align: center;
background:#66c5b4;
border-radius:18px ;
margin: 0 auto;
margin-top: 36px;
}
/*news区域*/
.news{
margin-bottom: 89px;
}
.news .tit{
height: 104px;
padding-top: 62px;
background: url(../img/bj1.png) no-repeat center 73px;
}
.news-content img{
width: 224px;
height: 186px;
border:5px solid #e5e5e7 ;
float: left;
}
.news-content_right{
width: 840px;
float: left;
}
.news-content_right dl{
width: 420px;
float: left;
}
.news-content_right dl:nth-child(1),.news-content_right dl:nth-child(2){
margin-bottom: 44px;
}
.news-content_right dt{
width: 72px;
height: 71px;
font-family: arial;
text-align: center;
border-right: 1px solid #dcdcdc ;
float: left;
}
.news-content_right dt .span1{
height: 50px;
font-size: 39px;
line-height: 61px;
font-weight: bold;
color: #66c5b4;
}
.news-content_right dt span{
display: block;
height: 21px;
font-size: 20px;
line-height: 30px;
color: #999999;
}
.news-content_right dd{
float: right;
width: 330px;
margin-left: 17px;
}
.news-content_right dd h4{
height: 22px;
font-size: 14px;
line-height: 24px;
color: #3f3f3f;
margin-bottom: 12px;
}
.news-content_right .special{
color: #dcdcdc;
}
.news-content_right dd p{
height: 37px;
font-size: 12px;
line-height: 21px;
color: #a4a4a4;
padding-left: 3px;
}
/*bottom区域*/
.bottomWrap{
width: 100%;
height: 54px;
background: #66c5b4;
}
.bottom{
font-size: 12px;
font-family: arial;
line-height: 54px;
color: #fff;
}
.bottom .copy{
float: left;
}
.subnav{
float: right;
}
.bottom a {
float: left;
height: 11px;
color: #fff;
}
.bottom span{
margin: 0 19px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/博文尚美.css"/>
</head>
<body>
<!--top区域-->
<div class="top">
<h1 class="logo"><a href="#"><img src="img/logo-shangmei.png"/></a></h1>
<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 class="lastli"><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="bannerWrap">
<div class="banner">
<p>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</p>
</div>
</div>
<!--service区域-->
<div class="service">
<h3 class="tit">服务范围<span>OUR SERVICES</span></h3>
<ul class="service-list">
<li>
<a href="#"><img src="img/tu1-1.png" alt="" />
<h4>1.WEB DESIGN</h4>
<p>企业品牌网站设计/手机网站制作
动画网站创意设计</p>
</a>
</li>
<li>
<a href="#"><img src="img/tu1-2.png" alt="" />
<h4>2.GRAPHIC DESIGN</h4>
<p>标志LOGO设计/产品宣传册设计
企业广告/海报设计</p>
</a>
</li>
<li>
<a href="#"><img src="img/tu1-3.png" alt="" />
<h4>1.web design</h4>
<p>企业年出口数据导出你的岩京安信尽可能挖掘出</p>
</a>
</li>
<li>
<a href="#"><img src="img/tu1-4.png" alt="" />
<h4>1.web design</h4>
<p>企业年出口呼次湖光岩京安信尽可能挖掘出</p>
</a>
</li>
</ul>
</div>
<!--client区域-->
<div class="clientWrap">
<div class="client">
<h3 class="tit">{ 客户案例 }<span>With the best professional technology, to design the best innovative web site</span></h3>
<p class="clear_fix">
<a href="#"><img src="img/tu2-1.png"/></a>
<a href="#"><img src="img/tu2-2.png"/></a>
<a href="#"><img src="img/tu2-3.png"/></a>
</p>
<a class="more" href="#">VIEW MORE</a>
</div>
</div>
<!--news区域-->
<div class="news">
<h3 class="tit">最新资讯<span>THE LATEST NEWS</span></h3>
<div class="news-content clear_fix">
<p><img src="img/tu3_03.jpg"/></p>
<div class="news-content_right">
<dl>
<dt>
<span class="span1">09</span>
<span class="span2">Jan</span>
</dt>
<dd>
<h4 class="special">网站排名进入前三的技巧说明</h4>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页,更不用说进首页前三了。那么网站优...</p>
</dd>
</dl>
<dl>
<dt>
<span class="span1">08</span>
<span class="span2">Jan</span>
</dt>
<dd>
<h4>flash网站制作的优缺点</h4>
<p>虽然HTML5程序语言出现,大有逐渐代替Flash网站制作的意味,但是过于生硬的HTML5动画效果,始终...</p>
</dd>
</dl>
<dl>
<dt>
<span class="span1">07</span>
<span class="span2">Jan</span>
</dt>
<dd>
<h4>做个网站多少钱?</h4>
<p>“做个网站多少钱?”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱,你是要...</p>
</dd>
</dl>
<dl>
<dt>
<span class="span1">06</span>
<span class="span2">Jan</span>
</dt>
<dd>
<h4>哪些网站优化手法属于网站过度优化</h4>
<p>大部分人都想让自己的网站,一夜之间出现在搜索引擎首页,独占鳌头。但是事实告诉我们罗马不是一...</p>
</dd>
</dl>
</div>
</div>
</div>
<!--bottom区域-->
<div class="bottomWrap">
<div class="bottom clear_fix">
<p class="copy">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
<p class="subnav"><a href="#">Home <span>|</span></a>
<a href="#">About<span>|</span></a>
<a href="#">Portfolio<span>|</span></a>
<a href="#">Contact</a></p>
</div>
</div>
</body>
</html>
页面展示: