今日学习之博文尚美首页

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

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

博文尚美.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>

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

效果图如图所示：
在这里插入图片描述
要坚持每天写页面哦~

Pursuit53

发布了12 篇原创文章 · 获赞 2 · 访问量 321

私信关注

今日学习之博文尚美首页

猜你喜欢