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

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>

<div id="bg">
    <div class="nav">
        <span>网站首页span>
        <span class="margin_more">关于我们span>
        <span>摄影作品span>
        <span>联系我们span>
    div>
div>


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


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


<div id="footer">青春树版权所有2000-2016京ICP备08001421号  京公网安备110108007702div>


<div class="tree">
    <img src="images/erweima.png" alt="">
div>

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

网页效果
《网页设计与制作项目教材》-Chapter04儿童摄影 -20210604_第1张图片

你可能感兴趣的:(《网页设计与制作项目教材》-Chapter04儿童摄影 -20210604)