HTML5前端开发实战04-儿童摄影_儿童摄影网页制作代码html-CSDN博客

本文链接：https://blog.csdn.net/lfdfhl/article/details/100124544

本文详细介绍了一个专注于儿童摄影的网站设计与实现过程，包括HTML结构布局、CSS样式设计及响应式网页适配等关键步骤，旨在提供一个美观且实用的儿童摄影服务平台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

页面效果

在这里插入图片描述

页面源码

HMTL源码

<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/style.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<!-- 头部模块 begin-->
		<div id="header">
			<div class="nav">
				<span>网站首页</span>
				<span class="about">关于我们</span>
				<span>摄影作品</span>
				<span>优惠活动</span>
			</div>
		</div>
		<!-- 头部模块 end-->

		<!-- 新闻模块 begin-->
		<div id="news">
			<div class="newsdiv">
				<img src="img/news1.jpg" />
				<h2 class="newstitle">新年钜惠</h2>
				<p class="newsdetail">元旦订单特大惊喜！欢迎来电咨询</p>
				<p class="newsshadow"></p>
			</div>
			<div class="newsdiv">
				<img src="img/news2.jpg" />
				<h2 class="newstitle">注意事项</h2>
				<p class="newsdetail">孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹，如果换做是亲近的或者比较平时比较熟悉玩得来的就会好很多。</p>
				<p class="newsshadow"></p>
			</div>
			<div class="newsdiv">
				<img src="img/news3.jpg" />
				<h2 class="newstitle">生日礼物</h2>
				<p class="newsdetail">为新生宝宝准备的生日party,参与者可获得精美生日礼物一份。</p>
				<p class="newsshadow"></p>
			</div>
		</div>
		<!-- 新闻模块 end-->

		<!-- 展览模块 begin-->
		<div id="exhibition">
			<div class="photos">
				<img src="img/img1.jpg" />
				<img src="img/img2.jpg" />
				<img src="img/img3.jpg" />
				<img src="img/img4.jpg" />
			</div>
		</div>
		<!-- 展览模块 end-->

		<!-- 底部模块 begin-->
		<div id="footer">儿童摄影网版权所有2018-2028&nbsp;&nbsp;京ICP备09001234号&nbsp;&nbsp;京公网安备43349527287</div>
		<!-- 底部模块 end-->

		<!-- 欢迎模块 begin-->
		<div class="welcome"><img src="img/welcome.jpg" /></div>
		<!-- 欢迎模块 end-->

	</body>
</html>

CSS源码

* {
	margin: 0;
	padding: 0;
	list-style: none;
	outline: none;
	border: 0;
	background: none;
}

body {
	font-family: "微软雅黑";
	background: #fdfdfd;
}

#header {
	width: 980px;
	height: 617px;
	background: url(../img/headerbg.jpg) no-repeat;
	margin: 0 auto;
	padding-top: 10px;
}

.nav {
	width: 848px;
	height: 46px;
	background: url(../img/nav.png) no-repeat;
	margin: 0 auto;
	padding: 40px 0 0 123px;
}

.nav span {
	color: #685649;
	font-size: 16px;
	padding: 0 30px;
}

.nav .about {
	margin-right: 240px;
}

#news {
	width: 980px;
	height: 300px;
	background: url(../img/latestnews.jpg) 60px top no-repeat;
	margin: 18px auto;
	padding-top: 120px;
}

.newsdiv {
	width: 294px;
	height: 256px;
	float: left;
	margin-left: 29px;
}

.newsdiv .newstitle {
	width: 284px;
	height: 50px;
	padding-left: 10px;
	line-height: 50px;
	font-weight: bold;
	font-size: 16px;
	border-bottom: 1px solid #ddd;
}

.newsdiv .newsdetail {
	width: 284px;
	height: 70px;
	line-height: 20px;
	padding: 10px 0 0 10px;
	font-size: 12px;
	color: #bbb;
}

.newsdiv .newsshadow {
	width: 294px;
	height: 5px;
	background: url(../img/shadow.jpg) no-repeat;
}

#exhibition {
	width: 980px;
	height: 292px;
	background: url(../img/photodemo.jpg) no-repeat;
	margin: 0 auto;
	padding-top: 170px;
}

#exhibition .photos {
	width: 916px;
	height: 260px;
	margin: 0 auto;
}

#exhibition .photos img {
	margin-left: 56px;
}

#footer {
	width: 100%;
	height: 80px;
	background: url(../img/footerbg.jpg) repeat-x;
	color: #fff;
	text-align: center;
	line-height: 80px;
}

.welcome {
	position: fixed;
	right: 2%;
	bottom: 5%;
	width: 200px;
}