Web前端开发技术实验6 CSS与页面分割_css多条放射线中间汇集把页面切割36部分-优快云博客

/* CSS Document */
*{margin:0; padding:0; list-style:none; outline:none; border:0; background:none;}
body{font-family:"微软雅黑";background: #fdfdfd;}
/*head*/
#bg{
	width:980px; 
	height:617px; 
	background:url(../images/bg.jpg) no-repeat; 
	margin:0 auto; 
	padding-top:10px;
}
.nav{
	width:848px; 
	height:46px; 
	background:url(../images/nav.png) no-repeat; 
	margin:0 auto; 
	padding:40px 0 0 123px;
}
.nav span{
	color:#685649; 
	font-size:16px;
	padding:0 30px;
}
.nav .margin_more{margin-right:240px;}
/*news*/
#news{
	width:980px; 
	height:300px; 
	background:url(../images/dongtai.jpg) 60px top no-repeat; 
	margin:18px auto; 
	padding-top:120px;
}
.news_con{
	width:294px; 
	height:256px; 
	float:left; 
	margin-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 #ddd;
}
.news_con .two{
	width:284px;
	height:70px;
	line-height:20px; 
	padding:10px 0 0 10px; 
	font-size:12px; 
	color:#bbb; 
}
.news_con .shadow{
	width:294px; 
	height:5px; 
	background:url(../images/yinying.jpg) no-repeat; 
}
#exhibition{
	width:980px; 
	height:292px; 
	background:url(../images/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(../images/footer_bg.jpg) repeat-x; 
	color:#fff; 
	text-align:center; 
	line-height:80px;
}
.tree{
	position:fixed; 
	right:5%;
	bottom:5%;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>儿童摄影</title>
<link href="css/style04.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- bg begin-->
<div id="bg">
    <div class="nav">
        <span>网站首页</span>
        <span class="margin_more">关于我们</span>
        <span>摄影作品</span>
        <span>联系我们</span>
    </div>
</div>
<!-- bg end-->
<!-- news begin-->
<div id="news">
    <div class="news_con">
        <img src="images/news1.jpg" />
        <h2 class="one">优惠活动</h2>
        <p class="two">新年订单有特大惊喜！</p>
        <p class="shadow"></p>
    </div>
    <div class="news_con">
        <img src="images/news2.jpg" />
        <h2 class="one">宝贝写真应注意什么？</h2>
        <p class="two">孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹，如果换做是亲近的或者比较平时比较熟悉玩得来的就会好很多。</p>
        <p class="shadow"></p>
    </div>
    <div class="news_con">
        <img src="images/news3.jpg" />
        <h2 class="one">宝贝庆生会</h2>
        <p class="two">为新生宝宝准备的生日party,参与者可获得精美生日礼物一份。</p>
        <p class="shadow"></p>
    </div>
</div>
<!-- news end-->
<!--exhibition begin-->
<div id="exhibition">
    <div class="pic">
        <img width="140" src="images/img1.png" />
        <img width="150" src="images/img2.png" />
        <img src="images/img3.jpg" />
        <img src="images/img4.jpg" />
    </div>
</div>
<!--exhibition end-->
<!--footer begin-->
<div id="footer">青春树&copy;版权所有&nbsp;&nbsp;</div>
<!--footer end-->
<!--tree begin-->
<div class="tree"><img src="images/erweima.png"/></div>
<!--tree end-->
</body>
</html>