Web前端_项目实践01_萌娃摄影网页（纯HTML+CSS静态页面）

众所周知，学前端只看不写等于“我没学过”，但是我们初学者常常因为找不到合适的网页素材而苦恼。有的太复杂，很多知识没学过；有的太粗糙，没有做的兴趣。正巧，我这儿有份儿合适的，纯HTML+CSS实现，够简单，页面比某些书本上的陈旧素材好看，有兴趣的话，一起来尝试吧。

先上完整效果图：
在这里插入图片描述
HTML代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/ex03.css" />
	</head>

	<body>
		<header class="center">
			<img src="img/nav.jpg" alt="" width="980px" />
			<br />
			<span id="header_left_first">网站首页</span><span id="header_left_second">关于我们</span>
			<span id="header_right_first">摄影作品</span><span id="header_right_second">联系我们</span>
		</header>
		<main>
			<div class="center" id="main_img01" /><img src="img/bg.jpg" width="980px"></div>
			<div class="center" id="main_img02"><img src="img/dongtai.jpg"></div>
			<div id="main_content" class="center">
				<span class="main_content_part" id="main_content_part1">
					<img src="img/news1.jpg" alt="" />
					<div class="main_content_part_write1">优惠活动</div>
					<div class="line"></div>
					<div class="main_content_part_write2">新年订单有特大惊喜！</div>
					<img src="img/yinying.jpg" alt="" />
				</span>
				<span id="main_content_part2">
					<img src="img/news2.jpg" alt="" />
					<div class="main_content_part_write1">宝贝写真应该注意什么？</div>
					<div class="line"></div>
					<div class="main_content_part_write2">孩子拍摄的时候了如果陌生人接触的话比较容易哭闹，如果换做是亲近的或者比较平时熟悉玩得来的就会好很多。</div>
					<img src="img/yinying.jpg" alt="" />
				</span>
				</span>
				<span id="main_content_part3">
					<img src="img/news3.jpg" alt="" />
					<div class="main_content_part_write1">宝贝庆生会</div>
					<div class="line"></div>
					<div class="main_content_part_write2">为新生宝宝准备的生日party，参与者可获得精美生日礼物一份。</div>
					<img src="img/yinying.jpg" alt="" />
				</span>
				</span>
			</div>
			<div id="main_example" class="center">
				<img src="img/xinshang.jpg" alt="" width="980px"/>
				<img src="img/img1.jpg" alt="" id="main_example_part1" />
				<img src="img/img2.jpg" alt="" id="main_example_part2" />
				<img src="img/img3.jpg" alt="" id="main_example_part3" />
				<img src="img/img4.jpg" alt="" id="main_example_part4" />
			</div>
			<div id="fix_point">
				<img src="img/erweima.png" alt="" />
			</div>
		</main>
		<footer>
			<div id="footer_img"></div>
			<div id="footer_write">版权所有2018-2019京ICP备08001421号&nbsp;京公网安备110108007702</div>
		</footer>
	</body>

</html>`

CSS代码：

.center {
	width: 980px;
	margin: 0 auto;
}

header {
	position: relative;
	left: 0px;
	top: 0px;
}

#header_left_first {
	position: absolute;
	left: 154px;
	top: 40px;
}

#header_left_second {
	position: absolute;
	left: 275px;
	top: 40px;
}

#header_right_first {
	position: absolute;
	right: 154px;
	top: 40px;
}

#header_right_second {
	position: absolute;
	right: 275px;
	top: 40px;
}

#main_img01{
	position: relative;
	top:-4px;
}

#main_content{
	position: relative;
	top:5px;
	left: 0px;
}

#main_content span{
	display: inline-block;
}

#main_content_part1{
	position: absolute;
	left: 16px;
}

#main_content_part2{
	position: absolute;
	left: 342px;
}

#main_content_part3{
	position: absolute;
	left: 668px;
}

.line{
	width: 100%;
	height:1px;
	border-top:solid #111111 1px;
}

.main_content_part_write1{
	margin-bottom: 5px;
	font-family: "微软雅黑";
	font-size: 16px;
	font-weight: 900;
}

.main_content_part_write2{
	margin-top: 5px;
	font-family: "微软雅黑";
	font-size: 12px;
	color: #aaaaaa;
	letter-spacing: 1px;
	width: 294px;
	height: 50px;
}

#main_example{
	position: relative;
	top:300px;
	left:0px;
	width: 980px;
	height: 442px;
}


#main_example_part1{
	position: absolute;
	top:185px;
	left:90px;
}

#main_example_part2{
	position: absolute;
	top:185px;
	left:306px;
}

#main_example_part3{
	position: absolute;
	top:185px;
	right:306px;
}

#main_example_part4{
	position: absolute;
	top:185px;
	right:90px;
}

#fix_point{
	position: fixed;
	right: 8%;
	bottom: 10%;
}

footer{
	position: absolute;
	top:1600px;
	left: 0px;
	width: 100%;
	height: 80px;
}

#footer_img{
	width: 100%;
	height: 80px;
	background:url('../img/footer_bg.jpg') repeat-x; 
}

#footer_write{
	position: relative;
	top:-50px;
	font-size: 16px;
	font-weight: 600;
	font-family: "微软雅黑";
	color: #aaaaaa;
	width: 600px;
	margin: 0 auto;
}

好了，这就是全部内容了，完整的图片、代码等素材，都在下面这个链接里，链接：https://pan.baidu.com/s/1lPvBo8OGqBzuFAFFM4nUJg
提取码：76kt 如有需要，请自行下载。

夏2同学

发布了10 篇原创文章 · 获赞 9 · 访问量 987

私信关注

Web前端_项目实践01_萌娃摄影网页（纯HTML+CSS静态页面）

猜你喜欢