Web实现：九寨沟介绍含html和css 内含效果图

最新推荐文章于 2023-06-06 22:06:01 发布

jasmyn518

最新推荐文章于 2023-06-06 22:06:01 发布

阅读量754

点赞数

分类专栏： HTML CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/jasmyn518/article/details/125407161

版权

HTML 同时被 2 个专栏收录

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
index.html:

<!DOCTYPE html>
<html>
<head>
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div id="all">
		<div id="nav">
			<img src="images/logo.PNG">
			<span id="logospan">九寨沟</span>
			<ul>
				<li><a href="index.html">首页</a></li>
				<li><a href="gyjz.html">关于九寨</a></li>
				<li><a href="dzw.html">动物自然</a></li>
				<li><a href="zjms.html">宗教民俗</a></li>
				<li><a href="jzwy.html">九寨文艺</a></li>
				<li><a href="#">最新动态</a></li>
				<li><a href="yyjz.html">云游九寨</a></li>
			</ul>
		</div>
		<div id="contents">
			<div id="content1">
				<div id="divc1_1">
					<img id="imgc1_1" src="images/粉.jpg">
					<p id="pc1_1">
						九寨沟作为阿坝全域旅游先行地，按照九寨沟县“三廊四区”的全域旅游格局，从“三微”“三态”的切入融合，努力为九寨全域发展，绿色崛起，建设世界休闲度假旅游目的地跨越发展助力，与全产业链共筑龙头景区带动型全域旅游新格局。坚持以保护促开发，以发展促保护的
					</p>
				</div>
				<div id="divc1_2">
					<p id="pc1_2">
						环保发展理念，以游客需求为导向，进一步完善基础设施建设，通过智慧景区建设，推动服务、管理、营销的全面升级;联合全域品质旅游景区与企业，为游客提供丰富、周到、安全的旅游服务与体验。
					</p>
					<img id="imgc1_2" src="images/首页雪景.jpg">
				</div>
			</div>
			<div id="content23">
				<div id="content2">
					<img id="imgc2_1" src="images/冬细长.jpg">
					<span class="title">价值意义</span>
					<p id="pc2_1">
						九寨沟国家自然保护区是岷山山系大熊猫A种群的核心地和走廊带，具有典型的自然生态系统，为全国生物多样性保护的核心之一。
					</p>
					<p id="pc2_2">
						动植物资源丰富，具有极高的生态保护、科学研究和美学旅游价值。景区内生物多样性丰富，物种珍稀性突出。九寨沟又是以高山湖泊群、瀑布、彩林、雪峰、蓝冰和藏族风情并称“九寨沟六绝”，被世人誉为“童话世界”，号称“水景之王”。九赛沟还是以地质遗迹钙化湖泊、滩流、瀑布景观、岩溶水系统和森林生态系统为主要保护对象的国家地质公园，具有极高的科研价值。
					</p>
					<div>
						<img id="imgc2_2" src="images/光.jpg">
						<img id="imgc2_3" src="images/碧水.jpg">
					</div>
				</div>
				<div id="content3">
					<div>
						<img id="imgc3_1" src="images/群山.jpeg">
						<img id="imgc3_2" src="images/五花海.jpeg">
					</div>
					<span class="title">童话世界</span>
					<p id="pc3_1">
						目前，九寨沟景区仅保留了树正寨、荷叶寨、则查洼寨这三个村寨，善良淳朴的他们，用微笑迎接着前来九寨沟的每一个人。而在这些村赛中，最壮观的莫过于树正寨前的“九宝莲花菩提塔”，七彩经幡随风飘荡，圣洁的白塔在阳光下仿若闪着光，这里也是众多游客到来时，都会双手合十，轻声祭拜的地方。
					</p>
					<p id="pc3_2">
						九寨沟是大自然鬼斧神工之杰作。这里四周雪峰高耸，湖水清澈艳丽，飞瀑多姿多彩，急流汹涌澎湃，林木青葱婆娑。蓝蓝的天空，明媚的阳光，清新的空气和点缀其间的古老村寨、栈桥、磨坊，组成了一幅内涵丰富、和谐统一的优美画卷，历来被当地藏族同胞视为神山圣水”。九寨沟景区享誉中外，东方人称之为“人间仙境”，西方人则将之誉为“童话世界”。
					</p>
					<img id="imgc3_3" src="images/水细长.jpg">
				</div>	
			</div>
		</div>
		<div id="footer">
			<div id="fd1">
				<img id="f1" src="images/logo.PNG">
				<span id="name">九寨沟</span>	
			</div>
			<div id="fd2">
				<img id="f2" src="images/底图.png">
				<div id="fd3">
					<div id="fd4">
						<span id="fs1">1242752678@SAWAKAZE</span>	
						<span id="fs2">© 2002-2021 九寨沟风景名胜区管理局 蜀ICP备15014791号|技术支持[云竹软件&智慧旅游]</span>
					</div>
					<img id="f3" src="images/图标.png">
				</div>
			</div>
			<a href="#nav" id="top">顶部⬆</a>
		</div>
	</div>
</body>
</html>

index.css:

*{
	margin: 0;
	padding: 0;
}
ul,li{
	list-style: none;
	display: inline;
}
a{
	color: white;
	text-decoration: none;
	font-size: 20px;
}
@font-face{
	font-family: "毛泽东字体";
	src: url('../font/毛泽东字体.ttf');
}
#all{
	width: 1280px;
	margin: 0px auto;
}
#all #nav{
	height: 100px;
	background: url("../images/首页顶图.png") no-repeat;
	background-size: 100%;
	padding-bottom: 700px;
}
#all #nav img{
	height: 100px;
	margin: 0 30px;
	float: left;
}
#all #nav span{
	font-size: 30px;
	color: white;
	font-family: '毛泽东字体';
	position: absolute;
	top: 85px;
	left: calc(50% - 605px);
}
#all #nav ul{
	display: block;
	width: 1120px;
	float: left;
	line-height: 100px;
}
#all #nav ul li{
	padding: 0 25px;
	letter-spacing: 8px;
	/*#55bcc3*/
}
#all #contents{
	width: 1280px;
	padding: 20px 100px 80px 100px;
	box-sizing: border-box;
	background: #55bcc3;
	font-size: 20px;
}
#all #contents #content1{
	margin-bottom: 30px;
	padding: 10px;
	height: 500px;
	background: white;
}
#all #contents #content1 #divc1_1{
	width: 500px;
	margin-right: 20px;
	float: left;
}
#all #contents #content1 #divc1_1 #imgc1_1{
	width: 100%;
}
#all #contents #content1 #divc1_1 #pc1_1{
	text-indent: 2em;
	padding: 25px 0;
}
#all #contents #content1 #divc1_2{
	width: 540px;
	float: left;
}
#all #contents #content1 #divc1_2 #imgc1_2{
	width: 100%;
}
#all #contents #content1 #divc1_2 #pc1_2{
	padding: 10px 0;
}
#all #contents div#content23{
	height: 715px;
}
#all #contents div#content23 span.title{
	display: block;
	font-size: 32px;
	height: 60px;
	line-height: 60px;
	text-align: center;
}
#all #contents div#content23 p{
	text-indent: 2em;
	padding: 5px 20px;
}
#all #contents #content2{
	width: 528px;
	background: white;
	float: left;
	margin-right: 20px;
}
#all #contents #content2 #imgc2_1{
	width: 100%;
}
#all #contents #content2 div{
	height: 175px;
	padding-top: 50px;
}
#all #contents #content2 div img{
	float: left;
	width: 250px;
	margin-left: 9px;
}
#all #contents #content3{
	width: 528px;
	height: 742px;
	float: left;
	background: white;
}
#all #contents #content3 div{
	height: 158px;
	margin-top: 10px;
}
#all #contents #content3 div img{
	float: left;
	width: 235px;
	margin-left: 18px;
}
#all #contents #content3 #imgc3_3{
	width: 100%;
}
#all #footer{
	height: 210px;
	background: #152248;
}
#all #footer #fd1{
	width: 150px;
	height: 210px;
	float: left;
}
#all #footer #fd1 img#f1{
	width: 100px;
	margin-left: 25px;
	margin-top: 20px;
}
#all #footer #fd1 span#name{
	color: white;
	font-size: 30px;
	font-family: "毛泽东字体";
	text-align: center;
	display: block;
	position: relative;
	top: -20px;
}
#all #footer #fd2{
	width: 1000px;
	height: 210px;
	float: left;
}
#all #footer #fd2 img#f2{
	width: 1000px;
	height: 87px;
	margin-top: 20px;
}
#all #footer #fd2 #fd3{
	width: 1000px;
	height: 100px;
}
#all #footer #fd2 #fd3 #fd4{
	width: 700px;
	height: 100px;
	float: left;
}
#all #footer #fd2 #fd4 span#fs1{
	color: #55bcc3;
	display: block;
	width: 680px;
	line-height: 40px;
}
#all #footer #fd2 #fd4 span#fs2{
	color: white;
	display: block;
	width: 680px;
	line-height: 60px
}
#all #footer #fd2 img#f3{
	float: left;
}
#all #footer a#top{
	width: 130px;
	height: 210px;
	line-height: 210px;
	color: #55bcc3;
	display: block;
	float: left;
	text-align: center;
}