web习作 四
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html";/>
<title>儿童摄影</title>
<link rel="stylesheet" href="css/index.css" type="text/css"/>
</head>
<body>
<!--bg begin-->
<div id="bg">
<div class="nav">
<span>网站首页</span>
<span class="margin_more">关于我们</span>
<span class="margin_more"></span>
<span >摄影作品</span>
<span>联系我们</span>
</div>
</div>
<!--bg emd-->
<!--news begin-->
<div id="news">
<div class="news_con">
<img src="img/news1.jpg"/>
<h2 class="one">优惠活动</h2>
<p class="two">新年订单有特大惊喜</p>
<p class="shadow"></p>
</div>
<div class="news_con">
<img src="img/news2.jpg"/>
<<h2 class="one">宝贝写真应注意什么</h2>
<p class="two">孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹,如果换做是亲近的或者比较平时比较熟悉玩得来的就会好很多。</p>
<p class="shadow"></p>
</div>
<div class="news_con">
<img src="img/news3.jpg"/>
<h2 class="noe">宝贝庆生会</h2>
<p class="two">为新生宝宝准备的生日party,参与者可获得精美生日礼物一份。</p>
<p class="shadow"></p>
</div>
</div>
<!--news end-->
<!--exhibition begin-->
<div id="exhibition">
<div class="pic">
<img src="img/img1.jpg"/>
<img src="img/img2.jpg"/>
<img src="img/img3.jpg"/>
<img src="img/img4.jpg"/>
</div>
</div>
<!--exhibition end-->
<!--footer begin-->
<div id="footer">青春树版权所有 2000-2016 京 ICP 备 08001421 号 京公网安备 1101108007702</div>
<!--footer end-->
<!--tree begin-->
<div class="tree">
<img src="img/erweima.png"/>
</div>
<!--tree end-->
</body>
</html>
css部分
/*重置浏览器的默认样式*/
*{margin:0;padding: 0;
border: 0;background: none;}
/*全局控制*/
body{font-family: "微软雅黑";background: #fdfdfd;}
#bg{
width: 980px;
height: 617px;
background:url("../img/bg.jpg") no-repeat;
margin: 0 auto;
padding-top: 10px;
}
.nav{
width: 848px;
height: 46px;
background: url("../img/nav.jpg") no-repeat;
margin: 0 auto;
padding: 40px 0 0 123px;
}
.nav sapn{
color: #685649;
font-size: 16px;
padding: 0 30px;
}
.nav .margin_more{ margin-right: 240px;}
#news{
width: 980px;
height: 300px;
background: url("../img/dongtai.jpg") 60px top no-repeat;
margin: 18px auto;
padding-top: 120px;
}
.news_con{
width: 294px;
height: 284px;
float: left;
padding-left: 29px;
}
.news_con .one{
width: 284px;
height: 50px;
padding-left: 10px;
line-height: 50px;
font-weight: bold;
font-size: 16px;
border-bottom: 1px solid #dddddd;
}
.new_con .two{
width: 284px;
height: 70px;
line-height: 20px;
padding: 10px 0 0 10px;
font-size: 12px;
color: #bbbbbb;
}
.news_con .shadow{
width: 294px;
height: 5px;
background: url("../img/yinying.jpg") no-repeat;
}
#exhibition{
width: 980px;
height: 292px;
background: url("../img/xinshang.jpg") no-repeat;
margin: 0 auto;
padding-top: 170px;
}
#exhibition .pic{
width: 916px;
height: 260px;
margin: 0 auto;
}
#exhibition .pic img{margin-left: 56px;}
#footer{
width: 100%;
height: 80px;
background: url("../img/footer_bg.jpg") repeat-x;
color: #ffffff;
text-align: center;
line-height: 90px;
}
.tree{
position: fixed;
right: 5%;
bottom: 5%;
}