今日学习之博文尚美首页

今天的作业是写博文尚美的首页，由于不熟练，还是写了好久。中间出了几次错，找了好久才弄好了，还是有些美中不足，还是要多练习呀！

如下是我的代码，一起来交流学习啊~

博文尚美.html

	
		
		
		
		
	
	
		
	
			

					

				
				

					
HOME
					
ABOUT
					
PROTFOLIO
					
SERVICE
					
NEWS
					
CONTACT
				
			
		

				

					

						1
						2
						3
						4
					
				
		
		
		
		

			
服务范围OUR SERVICES
			

				

					
					
1.WEB DESIGN
					
企业品牌网站设计/手机网站制作
动画网站创意设计
					
				
				

					
					
2.GRAPHIC DESIGN
					
标志LOGO设计/产品宣传册设计
企业广告/海报设计
					
				
				

					
					
1.web design
					
企业年出口数据导出你的岩京安信尽可能挖掘出
					
				
				

					
					
1.web design
					
企业年出口呼次湖光岩京安信尽可能挖掘出
					
				
			
		
		
		
		

			

				
{ 客户案例 }With the best professional technology, to design the best innovative web site
				

					
				    
				    
				
				VIEW MORE
			
		
		
		
		
		

			
最新资讯THE LATEST NEWS
			
			

				

				

						

						

							09
							Jan
						
						

							
网站排名进入前三的技巧说明
							
很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么网站优...
						
					
					

						

							08
							Jan
						
						

							
flash网站制作的优缺点
							
虽然HTML5程序语言出现，大有逐渐代替Flash网站制作的意味，但是过于生硬的HTML5动画效果，始终...
						
					
					

						

							07
							Jan
						
						

							
做个网站多少钱？
							
“做个网站多少钱？”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱，你是要...
						
					
					

						

							06
							Jan
						
						

							
哪些网站优化手法属于网站过度优化
							
大部分人都想让自己的网站，一夜之间出现在搜索引擎首页，独占鳌头。但是事实告诉我们罗马不是一...
						
					
				
				
			
		
		
		
		

			

				
Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved
				
Home |
				About|
				Portfolio|
				Contact
			
		
	

public.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;
}

效果图如图所示：

要坚持每天写页面哦~