“我的家乡”项目实践--WEB前端系统基础

作者：凡人多烦事01 | 2024-02-15 13:34:35

踩

实验目的：通过本实验操作，要求学生掌握HTML5中基本标签的使用、CSS3语法及样式的设定以及CSS3的动画效果，能熟练应用CSS页面布局与定位的方法，运用本学期所学的知识，完成“我的家乡”项目实践。

实验要求：

1. 熟练掌握HTML5常用标签的使用。

2. 熟练掌握CSS3的语法结构和选择器的使用。

3. 掌握应用无序列表制作水平导航栏。

4. 掌握用CSS+DIV对页面进行布局。

5. 掌握float浮动定位的应用。

6. 熟悉CSS3动画的定义。

实现效果图：（可点击不同导航栏到达不同页面）

css部分：


 
		body
		{
			background-image:url(img/背景图.jpg);background-repeat: no-repeat;background-size:cover;margin:20px auto;padding: 20px;
			color: brown;font-family: 微软雅黑;font-size: 16px;line-height: 20px;
		}
		.bg{}
		nav{
			font-family: "微软雅黑";
			font-size: 25px;
			line-height: 35px;
			text-align: center;	
			width:100%;height: 40px;
			margin-left: 400px;
			}
		nav a{width:250px;color:white;text-shadow: 2px 2px gray;text-decoration: none;display: block;float: left;
				background-color: brown;
				
				border-left: 2px greenyellow solid;border-right: 2px greenyellow solid;}
		nav a:hover{color: aqua;}
		nav a:nth-child(1){border-top:3px palevioletred solid;border-bottom:3px palevioletred solid;
		border-top-left-radius: 15px;border-bottom-left-radius: 15px;}
		nav a:nth-child(2){border-top:3px goldenrod solid;border-bottom:3px goldenrod solid;}
		nav a:nth-child(3){border-top:3px red solid;border-bottom:3px red solid;}
		nav a:nth-child(4){border-top:3px magenta solid;border-bottom:3px magenta solid;
		border-top-right-radius: 15px;border-bottom-right-radius: 15px;}
		section{margin-left: 400px;margin-right: 220px;text-align: center;}
		section a{text-decoration: none;color: brown;}
		p{text-indent: 2m;text-align: justify;}
		ul{list-style: none;}
		ul li{float: left;margin: 10px;width: 220px;}
		ul li img{width: 220px;height: 180px;box-shadow: 0px 0px 20px 10px paleturquoise;transition: all 0.9s;}
		ul li img:hover{-webkit-transform:rotate(90deg) scale(1.5,1.5);
		-moz-transform: rotate(45deg) scale(1.2,1.2);
		-ms-transform: rotate(45deg) scale(1.2,1.2);
		-o-transform: rotate(45deg) scale(1.2,1.2);
		transform:rotate(45deg) scale(1.2,1.2);}
		.m1{clear: both;text-align:left;}
		.m2{text-align: center; margin-left: 320px;color: paleturquoise;text-shadow:2px 2px #808080;}
		button{ border-radius: 5px;background-color:brown;color: white;width: 60px;height: 30px;border: none;}

其中一个部分（剩下三个模板相同只需要换换背景图和文字内容即可）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>家乡美景</title>
		<link rel="stylesheet" href="w4.css">
	</head>
	<body>
		<div class="bg">
			
			<nav>
				<a href="index2.html">我的家乡</a>
				<a href="index1.html">家乡美食</a>
				<a href="index0.html">家乡美景</a>
				<a href="index3.html">文化特色</a>
			</nav>
			<section>
				<hr />
				<img src="./img/洛阳城logo.jpg" alt=""width="800px",height="600px">
				<hr />
				<h4>千年古都———洛阳</h4>
				<p>洛阳素有“十三朝古都”之称，是华夏文明的发祥地之一、丝绸之路的东方起点，隋唐大运河的中心。
				在这里可以造访丝绸之路的起点，也可寻觅河洛之根。洛阳共有三项六处世界文化遗产，
				龙门石窟则是唯一全域位于洛阳市境内的世界遗产，也是洛阳最有名的景点，洛阳名片之一。
				其中老君山因太上老君李耳在此归隐修炼而得名，被尊为道教圣地、天下名山，为栾川八大景观之首，
				被誉为“君山奇景”。白马寺，是中国第一古刹、世界著名伽蓝，也是佛教传入中国后兴建的官办寺院，
				乃中国、越南、朝鲜、日本及欧美国家的释教发源地和祖师之庭。白马寺现存的遗址古迹为元、明、清时所留，
				寺内保存了大量元代夹纻干漆造像如三世佛、二天将、十八罗汉等，弥足珍贵，其中“马寺钟声”象征吉祥如意，入列“洛阳八大景”。</p>
				<ul>
				<li><a href="#"><img src="img/九龙鼎.jpg" alt="">九龙鼎</a></li>
				<li><a href="#"><img src="img/老君山.jpg" alt="">老君山</a></li>
				<li><a href="#"><img src="img/龙门石窟.jpg" alt="">龙门石窟</a></li>
				<li><a href="#"><img src="img/白马寺.jpg" alt="">白马寺</a></li>
				<li><a href="#"><img src="img/博物馆.jpg" alt="">博物馆</a></li>
				<li><a href="#"><img src="img/洛阳古城.jpg" alt="">洛阳古城</a></li>
				<li><a href="#"><img src="img/洛阳鼓楼.jpg" alt="">洛阳鼓楼</a></li>
				<li><a href="#"><img src="img/洛阳明堂.jpg" alt="">洛阳明堂</a></li>
				
				</ul>
<div class="m1"><button>更多</button></div>
 
			</section>
			
			<footer class="m2">
				<hr />
				洛阳的温婉藏在每个角落，红墙碧瓦、古韵悠悠，树影摇曳，穿越千年。岁月如画，故事万千。
			</footer>
		</div>
	</body>
</html>

图片可以在网上查找相关资源后自行更换，也可以私信博主获取相关资源（如果博主有时间的话）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/84927