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

快来打我* 2024-03-16 14:06 28阅读 0赞

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

实验要求：

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

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

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

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

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

6. 熟悉CSS3动画的定义。

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

![6b47dfd0bea0441492ed0cc556b9c343.png][]

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>

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

[6b47dfd0bea0441492ed0cc556b9c343.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7e0f91309d214314803ba562dc42ddfa.png