儿童摄影HTML实现

Q的世界

已于 2022-04-22 17:56:46 修改

阅读量2.4k

点赞数 5

分类专栏： HTML 文章标签： html

于 2022-04-22 17:55:06 首次发布

本文链接：https://blog.csdn.net/q14978/article/details/124351562

版权

HTML 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

文章目录

html代码
css代码

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>儿童摄影</title>
		
		<link rel="stylesheet" href="../css/style.css" type="text/css" />
	</head>
	<body><!--bg begin-->
		<div id="bg">
			<div class="nav">
				<br><br>
				<span>网站首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span class="margin_more">关于我们&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;摄影作品</span>
				<span>&nbsp;&nbsp;&nbsp;联系我们</span>
			</div>
		</div>
		<!--bg end-->
		
		<div class="new">
			<img src="../images/dongtai.jpg" />
		</div>
		
		<!--news begin-->
		<div id="news">
			<div class="news_con1">
				<img src="../images/news1.jpg" />
				<h2 class="one">优惠活动</h2>
				<p class="two">新年订单有特大惊喜！</p>
				<p class="shadow"></p>
			</div>
			<div class="news_con2">
				<img src="../images/news2.jpg" />
				<h2 class="one">宝贝写真应注意什么？</h2>
				<p class="two">孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹，如果换做是亲近的或者
				比较平时比较熟悉玩得来的就会好很多。</p>
				<p class="shadow"></p>
			</div>
			<div class="news_con3">
				<img src="../images/news3.jpg" />
				<h2 class="one">宝贝庆生会</h2>
				<p class="two">
					为新生宝宝准备的生日party,参与者可获得精美生日礼物一份。
				</p>
				<p class="shadow"></p>
			</div>
		</div>
		<!--news end-->
		
		<div class="new1">
		</div>
		
		<!--exhibition begin-->
		<div id="exhibition">
			<div class="pic">
				<img src="../images/img1.jpg" />
				<img src="../images/img2.jpg" />
				<img src="../images/img3.jpg" />
				<img src="../images/img4.jpg" />
			</div>
		</div>
		<!--exhibition end-->
		<!--footer begin-->
		<div id="footer">
			<p>
				青春数版权所有2000-2016京ICP备
				08001421好&nbsp;&nbsp;京公网安备110108007702
			</p>
		</div>
		<!--footer end-->
		<!--tree begin-->
		
		<div class="tree">
			<img src="../images/erweima.png" />
		</div>
		<!--tree end-->
	</body>
</html>

css代码

*{
	margin: 0;
	padding: 0;
}
body{
	text-align: center;
	

}

.nav{
	
	
	width: auto;
	height: 90px;
	background-image: url(../images/nav.jpg);
	letter-spacing: 5px;
	text-align: center;
	background-repeat: no-repeat;
	/*background-position: 100px 100px;*/
	background-position: center;
	
}
#bg{
	width: auto;
	height: 650px;
	background-image: url(../images/bg.jpg);
	background-position: 350px 0px;
	background-repeat: no-repeat;/*不要平铺*/
	text-align: center;
	
	
	
}
.news_con3{
	
	width: 300px;
	height: 300px;
	float: right;
}
.news_con2{
	
	width: 300px;
	height: 300px;
	float: right;
}
.news_con1{
	
	width: 300px;
	height: 300px;
	float: right;
}
.new{
	height: 140px;
}
#news{
	width: 1270px;
	height: 300px;
	text-align: center;
}
.new1{
	
	width: 870px;
	height: 5px;
	text-align: center;
	background-image: url(../images/yinying.jpg);
	display: inline-block;
	
}

.pic{
	padding: 180px;
	height: 600px;
	letter-spacing: 50px;
}
#exhibition{
	height: 470px;
	background-image: url(../images/xinshang.jpg);
	background-repeat: no-repeat;
	background-position: top;
}
#footer{
	margin: 0;
	padding: 10px;
	width:auto;
	height: 100px;
	background-color: darkblue;
	
}

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

Q的世界

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
儿童摄影HTML实现

文章目录html代码 css代码html代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>儿童摄影</title> <link rel="stylesheet" href="../css/style.css" type="text/css" /> </head> <body&gt...
复制链接

扫一扫

专栏目录