作品源代码
由于没有分块仔细讲解作品各部分源代码的具体功能,仅供大家进行代码运行及作品效果欣赏。希望有机会看到、用到粗部分代码的朋友,能自主相关理论知识,提高自己,而不仅仅是代码的拷贝,对自己好点!
由于水平有限,部分功能的实现未采用最优程序,希望有识之士批评指正,共同提高,在此谢过。
代码比较长:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*诗句展示模块*/
#poem{
opacity:0.55;
position:fixed;
top:45%;
left:7%;
width: 500px;
height: 300px;
margin: 0 auto;
text-align: center;
color: white;
font-size: 40px;
}
p{
font-size:30px;
color:yellow;
top:1%;
left:2%;
position:fixed;
}
b{
border-radius: 80%;
background: #8AC007;
padding: 20px;
width: 300px;
height: 45px;
opacity:0.55;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
font-size: 30px;
color:white;
top:2%;
right:5%;
position:fixed;
}
.marquee {
opacity:0.65;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 25s linear 50ms infinite normal;
/*字母外框*/
border-radius: 25px;
background: #8AC007;
padding: 2px;
width: 800px;
height: 50px;
}
.marquee:hover {
animation-play-state: paused
}
/* Make it move */
@keyframes marquee {
0% { text-indent: 27.5em }
100% { text-indent: -105em }
}
/* Make it pretty */
.View {
padding-left: 1.5em;
}
.View:before, .View::before {
z-index: 2;
content: '';
position: absolute;
top: -1em; left: -1em;
width: .5em; height: .5em;
}
.View:after, .View::after {
z-index: 1;
content: '';
position: absolute;
top: 0; left: 0;
width: 2em; height: 2em;
}
/*背景图自动轮播模块*/
*{
margin: 0;
padding: 0
}
.div{
width: 1530px;
height:780px;
background-repeat: no-repeat;
background-image: url("images/a.jpg");
animation:frams 15s infinite;
}
@keyframes frams {
0%{
background-image: url("images/a.jpg");background-size: 1530px 780px;background-repeat: no-repeat
}
33%{
background-image: url("images/b.jpg");background-size: 1530px 780px;background-repeat: no-repeat
}
66%{
background-image: url("images/c.jpg");background-size: 1530px 780px;background-repeat: no-repeat
}
100%{
background-image: url("images/d.jpg");background-size: 1530px 780px;background-repeat: no-repeat
}
}
/*下拉菜单模块*/
#a1{width: 34%;height: 700px;background: #453;float:left;margin-right:5px;}
#a2{width: 35%;height: 700px;background: purple;float:left;}
nav{position:absolute;left:150px;top:85px;}
ul{list-style:none;}
ul li{float:left;}
ul li a{
opacity:0.55;
text-decoration:none;
background: #0f9;
height:40px;
line-height: 40px;
display:block;
margin-right:1px;
padding:0px 10px;
}
/*控制二级菜单*/
ul li a:hover{background:magenta;}
ul li ul li{margin-left:1px;clear:left;position:relative;width:100px;}
ul li ul{display:none;}
ul li:hover ul{display: block;}
/*控制三级菜单*/
ul li ul li a:hover{background:pink;}
ul li ul li ul{position:absolute;left:100%;top:0px;}
ul li ul li ul li{clear:left;width:110px;}
ul li:hover ul li ul{display:none;}
ul li ul li:hover ul{display:block;}
/*用户信息录入*/
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 400px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/*控制登录块结构*/
#div1 {
opacity:0.55;
position:fixed;
top:35%;
left:55%;
width:400px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<div class="div"></div>
<body>
<header class="header-sky">
<!-- 下拉菜单具体内容 -->
<nav>
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">神仙居概览</a>
<ul>
<li><a href="" >景区概况</a></li>
<li><a href="" >景点介绍</a></li>
<li><a href="" >景区文化</a>
<ul>
<li><a href="" >诗意神仙居</a></li>
<li><a href="" >旅游+</a></li>
<li><a href="" >天姥山文化</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">新闻中心</a>
<ul>
<li><a href="" >景区公告</a></li>
<li><a href="" >景区资讯</a></li>
<li><a href="" >精彩活动</a></li>
</ul>
</li>
<li><a href="#">神仙居风光</a>
<ul>
<li><a href="">主题视频</a></li>
<li><a href="">主题照片</a>
<ul>
<li><a href="" >景区照片</a></li>
<li><a href="" >活动照片</a></li>
</ul>
</li>
<li><a href="">虚拟旅游</a>
<ul>
<li><a href="" >网上导览图</a></li>
<li><a href="" >电子地图</a></li>
<li><a href="" >VR全景</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">玩转景区</a>
<ul>
<li><a href="" >舌尖美食</a></li>
<li><a href="" >酒店住宿</a></li>
<li><a href="" >交通指南</a></li>
<li><a href="" >地图导航</a></li>
<li><a href="" >景区停车</a></li>
</ul>
</li>
<li><a href="#">电子商务</a>
<ul>
<li><a href="" >门票预订</a></li>
<li><a href="" >酒店预订</a></li>
<li><a href="" >团队预订</a></li>
</ul>
</li>
<li><a href="#">服务中心</a>
<ul>
<li><a href="" >票务信息</a></li>
<li><a href="" >导游预约</a></li>
<li><a href="" >历史客流</a></li>
<li><a href="" >客流预测</a></li>
<li><a href="" >常见问答</a></li>
<li><a href="" >在线互动</a></li>
<li><a href="" >微博直播</a></li>
<li><a href="" >投诉建议</a></li>
</ul>
</li>
<li><a href="#">政务公开</a>
<ul>
<li><a href="">试点专栏</a></li>
<li><a href="">提升亮点</a></li>
<li><a href="">政务资讯</a></li>
<li><a href="">领导介绍</a></li>
<li><a href="">职能机构</a></li>
</ul>
</li>
<b>祝您开心愉快心情好!</b>
<div></div>
<p class="View marquee">美景如画网,欢迎您! Welcome to the Net Of Great View! 今天最高气温36摄氏度,出门请谨防紫外线,记得护肤噢!我们公司全体工作人员,祝您新的一天好心情 Have a good time! </p>
<!--诗句展示模块-->
<div id="poem">
入若耶溪<br/><br/>
艅艎何泛泛,空水共悠悠。<br/>
阴霞生远岫,阳景逐回流。<br/>
蝉噪林逾静,鸟鸣山更幽。<br/>
此地动归念,长年悲倦游。<br/>
</div>
<!--用户登录模块-->
<div id="div1">
<form action="#">
<label for="fname">您的姓名</label>
<input type="text" id="fname" name="姓名" placeholder="请在这里输入姓名">
<label for="lname">联系方式</label>
<input type="text" id="lname" name="联系方式" placeholder="请在这里输入电话">
<label for="country">所在城市</label>
<select id="country" name="城市">
<option value="australia">北京</option>
<option value="canada">西雅图</option>
<option value="usa">迪拜</option>
<option value="vv">...</option>
</select>
<input type="submit" value="注册 \ 登录">
<!--音乐-->
<audio controls>
<source src="audio/chuanshao.ogg" type="audio/ogg">
<source src="audio/chuanshao.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</body>
</html>
实验完整报告请看 【简洁易懂精品贴】html5 网页课程设计(四)