首页 > 其他分享> > 《网页设计与制作项目教材》-Chapter04儿童摄影 -20210604

《网页设计与制作项目教材》-Chapter04儿童摄影 -20210604

2021-06-04 23:00:28 作者：互联网

HTML

<!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" alt="">
        <h2 class="one">优惠活动</h2>
        <p class="two">新年订单有特大惊喜！</p>
        <p class="shadow"></p>
    </div>
    <div class="news_con">
        <img src="images/news2.jpg" alt="">
        <h2 class="one">宝贝写真应注意什么？</h2>
        <p class="two">孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹，如果换做是亲近的或者比较平时比较熟悉玩得来的就会好很多。</p>
        <p class="shadow"></p>
    </div>
    <div class="news_con">
        <img src="images/news3.jpg" alt="">
        <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 src="images/img1.jpg" alt="">
        <img src="images/img2.jpg" alt="">
        <img src="images/img3.jpg" alt="">
        <img src="images/img4.jpg" alt="">
    </div>
</div>
<!--exhibition end-->
<!--footer begin-->
<div id="footer">青春树版权所有2000-2016京ICP备08001421号&nbsp;&nbsp;京公网安备110108007702</div>
<!--footer end-->
<!--tree begin-->
<div class="tree">
    <img src="images/erweima.png" alt="">
</div>
<!--tree end-->
</body>
</html>

CSS

/* CSS Document */
*{margin:0; padding:0; list-style:none; outline:none; border:0; background:none;}
body{
	font-family: "微软雅黑";background:#fdfdfd;
}
#bg{
	width: 980px;
	height: 617px;
	background:url(../images/bg.jpg) no-repeat;
	margin: auto;
	padding-top: 10px;
}
.nav{
	width: 848px;
	height: 86px;
	background: url(../images/nav.jpg) 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{
	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;
	text-align: center;
	color: #fff;
	line-height: 80px;
}
.tree{
	position: fixed;
	right: 5%;
	bottom: 5%;
}

网页效果
在这里插入图片描述

标签：网页,height,padding,width,Chapter04,background,images,20210604,margin
来源： https://blog.csdn.net/m0_46629123/article/details/117574332