实验目的: 通过本实验操作,要求学生掌握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>
图片可以在网上查找相关资源后自行更换,也可以私信博主获取相关资源(如果博主有时间的话)