html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>儿童摄影</title>
<link rel="stylesheet" href="../css/style.css" type="text/css" />
</head>
<body><!--bg begin-->
<div id="bg">
<div class="nav">
<br><br>
<span>网站首页 </span>
<span class="margin_more">关于我们
</span>
<span>
摄影作品</span>
<span> 联系我们</span>
</div>
</div>
<!--bg end-->
<div class="new">
<img src="../images/dongtai.jpg" />
</div>
<!--news begin-->
<div id="news">
<div class="news_con1">
<img src="../images/news1.jpg" />
<h2 class="one">优惠活动</h2>
<p class="two">新年订单有特大惊喜!</p>
<p class="shadow"></p>
</div>
<div class="news_con2">
<img src="../images/news2.jpg" />
<h2 class="one">宝贝写真应注意什么?</h2>
<p class="two">孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹,如果换做是亲近的或者
比较平时比较熟悉玩得来的就会好很多。</p>
<p class="shadow"></p>
</div>
<div class="news_con3">
<img src="../images/news3.jpg" />
<h2 class="one">宝贝庆生会</h2>
<p class="two">
为新生宝宝准备的生日party,参与者可获得精美生日礼物一份。
</p>
<p class="shadow"></p>
</div>
</div>
<!--news end-->
<div class="new1">
</div>
<!--exhibition begin-->
<div id="exhibition">
<div class="pic">
<img src="../images/img1.jpg" />
<img src="../images/img2.jpg" />
<img src="../images/img3.jpg" />
<img src="../images/img4.jpg" />
</div>
</div>
<!--exhibition end-->
<!--footer begin-->
<div id="footer">
<p>
青春数版权所有2000-2016京ICP备
08001421好 京公网安备110108007702
</p>
</div>
<!--footer end-->
<!--tree begin-->
<div class="tree">
<img src="../images/erweima.png" />
</div>
<!--tree end-->
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
}
.nav{
width: auto;
height: 90px;
background-image: url(../images/nav.jpg);
letter-spacing: 5px;
text-align: center;
background-repeat: no-repeat;
/*background-position: 100px 100px;*/
background-position: center;
}
#bg{
width: auto;
height: 650px;
background-image: url(../images/bg.jpg);
background-position: 350px 0px;
background-repeat: no-repeat;/*不要平铺*/
text-align: center;
}
.news_con3{
width: 300px;
height: 300px;
float: right;
}
.news_con2{
width: 300px;
height: 300px;
float: right;
}
.news_con1{
width: 300px;
height: 300px;
float: right;
}
.new{
height: 140px;
}
#news{
width: 1270px;
height: 300px;
text-align: center;
}
.new1{
width: 870px;
height: 5px;
text-align: center;
background-image: url(../images/yinying.jpg);
display: inline-block;
}
.pic{
padding: 180px;
height: 600px;
letter-spacing: 50px;
}
#exhibition{
height: 470px;
background-image: url(../images/xinshang.jpg);
background-repeat: no-repeat;
background-position: top;
}
#footer{
margin: 0;
padding: 10px;
width:auto;
height: 100px;
background-color: darkblue;
}
#footer{
width: 100%;
height: 80px;
background: url(../images/footer_bg.jpg) repeat-x;
color: #fff;
text-align: center;
line-height: 80px;
}
.tree{
position: fixed;
right: 5%;
bottom: 5%;
}