这是一个大学生的期末作业，创建了一个包含轮播图、视频和音乐的网页。首页设计精致，使用HTML和CSS实现，包含导航栏、动态旋转音乐播放图标、多个 banner 图片切换及个人信息展示。网页还融合了抚仙湖的介绍，以及视频和相关内容分享。
1.适合大学生期末作业的网站，100%的页面，首页设计了轮播图，视频以及音乐，效果图如下，因为无法截到完整的页面，以及上传视频，是分开截的，请欣赏：
首页部分截图 
子网页（1）部分截图
2.HTML代码部分
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的家乡</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#audio_btn {
position: fixed;
right: 8px;
top: 0;
z-index: 200;
display: none;
width: 32px;
height: 32px;
background-repeat: no-repeat;
cursor: pointer;
}
.play_yinfu {
position: fixed;
right: 10px;
float: right;
top: 1px;
width: 30px;
height: 30px;
background-image: url("/images/music.gif");
background-repeat: no-repeat;
background-position: center center;
background-size: 60px 60px;
}
.rotate {
position: fixed;
right: 10px;
float: right;
top: 1px;
width: 30px;
height: 30px;
background-size: 100% 100%;
background-image: url("/images/music_off.png");
-webkit-animation: rotating 1.2s linear infinite;
-moz-animation: rotating 1.2s linear infinite;
-o-animation: rotating 1.2s linear infinite;
animation: rotating 1.2s linear infinite;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-moz-keyframes rotating {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
.off {
position: fixed;
right: 10px;
float: right;
top: 1px;
background-size: 100% 100%;
background-image: url("/images/music_no.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<!--大盒子-->
<div id="body">
<!--音乐-->
<div class="video_exist play_yinfu" id="audio_btn" style="display: block;z-index:999999;">
<div id="yinfu" class="rotate"></div>
<audio preload="auto" autoplay="" id="media" src="audio/白月光与朱砂痣.mp3" autoplay preload loop="loop"></audio>
</div>
<script src="js/main.js"></script>
<!--导航栏-->
<div class="zt4" id="top"></div>
<div id="header">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="zt1">
<td width="23%" height="18"> </td>
<td width="3%"><img src="images/电话.jpg" width="18" height="18" alt="i" /></td>
<td width="19%">0327-666-8888</td>
<td width="21%"> </td>
<td width="34%"><a href="#">登录|注册</a></td>
</tr>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="14%" height="161"> </td>
<td width="30%"><img src="images/logo.jpg" width="292" height="151" alt="t" /></td>
<td width="58%"><table width="76%" border="0" cellspacing="0" cellpadding="0">
<div id="nav">
<ul class="right">
<li><a href="index.html">首页</a></li>
<li><a href="历史文化.html">历史文化</a></li>
<li><a href="居旅美食.html">居旅美食</a></li>
<li><a href="澄江印象.html">澄江印象</a></li>
<li><a href="联系我们.html">联系我们</a></li>
</ul>
</div>
</table></td>
<td width="2%"> </td>
</tr>
</table>
<div id="banner_box" class="banner_box">
<div class="banner_cot">
<div class="banner_list" id="banner_list">
<div class="page_box show">
<div class="bg_box">
<!--第一张banner图-->
<img src="images/banner1.jpg" class="sky_xia sky_anim2" />
</div>
</div>
<div class="page_box">
<div class="bg_box">
<!--第二张banner图-->
<img src="images/banner2.jpg" />
</div>
<div class="content">
<div class="main_box">
<div class="room_cot">
<div class="room_anim">
<!--第二张banner图小图-->
<img src="images/banner2-1.jpg" />
</div>
</div>
</div>
</div>
</div>
<div class="page_box ">
<div class="bg_box">
<!--第三张banner图-->
<img src="images/banner3.jpg"/>
</div>
<div class="content">
<div class="main_box">
<div class="snow_cot snow_anim">
<!--第三张banner图小图-->
<img src="images/banner3-1.jpg" />
</div>
</div>
</div>
</div>
<div class="page_box ">
<div class="bg_box">
<!--第四张banner图-->
<img src="images/banner4.jpg" />
</div>
</div>
</div>
<div class="product_btns" id="product_btns">
<div class="content">
<div class="btns_box" id="control_box">
<a href="#" class="icon_bg icon_show"></a>
<a href="#" class="icon_bg"></a>
<a href="#" class="icon_bg"></a>
<a href="#" class="icon_bg"></a>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/myjquery.js"></script>
<div class="xiaozi">
<div class="zt2">
<p>茫茫人海，有幸遇见<br>
澄江，一个临湖小城，造化万千的抚仙湖是这里的主角，清澈甘甜的湖水在这里延展开来</p>
<p>抚仙湖好似夜明珠，守着这里的千千万</p>
<p>抗浪鱼、白鹭、牛背鹭</p>
<p>在原生态的庇佑下，它们在这里自由的栖息繁衍</p>
<p>……</p>
<p><br>
</p>
</div>
</div>
<div id="notice">
<div id="news">
<h2>个人信息</h2>
<ul>
<li><a href="#">姓名：亓耳</a></li>
<li><a href="#">学号：1234567890</a></li>
<li><a href="#">班级：2021级xx班级</a></li>
<li><a href="#">电话号码：130456789</a></li>
<li><a href="#">课程：HTML网页设计</a></li>
</ul>
</div>
<!--视频-->
<video src="video/movie.mp4" autoplay muted="muted" controls loop width="45%" height="250px"; align="right";></video>
<div id="img">
<img src="images/4302.jpg"/>
</div>
</div>
<div id="article">
<div class="clearboth"></div>
<div id="knowledge">
<h2>临海小镇<img src="images/icon-knowledge.gif" width="9" height="9" /></h2>
<a href="#" id="knowledge-picture"><img src="images/5021.jpg" border="0" /></a>
<div class="zt5">
<span> 早上，阳光从窗子里透进来，暖暖的，看着窗外的蓝光，心情愉悦，着一袭白裙，和爱的人一起漫步在沙滩上空气中夹杂着海风的味道…… <a href="#"><font color="#ff0000">[了解更多]</font></a></span></div></div>
<div id="recommend">
<h2>最新消息<img src="images/icon-recommend.jpg" width="9" height="9" /></h2>
<div id="li">
<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>
</ul></div>
</div>
<div id="fashion">
<h2>网友分享<img src="images/icon-recommend.jpg" width="9" height="9" /></h2>
<div id="topnews"><img src="images/5022.jpg" />
<div>
<h3><a href="#">孤山游记</a></h3>
<div id="span">
<span>周末和朋友去了孤山，孤山屹立在海的中央，我们一起坐船过去，到达山脚下，沿着山间小道一路上去，登至高峰，跳高望远，美不胜收！</span></div>
</div></div>
<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>
</div></div>
<table>
<tr>
<td height="29"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="165" class="margin"><img src="images/0321.jpg" width="213" height="161" alt="y"><img src="images/0322.jpg" width="213" height="160"><img src="images/0323.jpg" width="212" height="160"><img src="images/0324.jpg" width="213" height="160"><img src="images/0325.jpg" width="212" height="160"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="49" align="left" class="footer"><p class="zt3">澄江@2021.12.19</p> </td>
</tr>
</table>
</div>
</body>
</html>
如需完整代码可扫码关注，还有子网页
7930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
