我的家乡网页设计

最新推荐文章于 2024-06-25 10:49:47 发布

代码人HTML

最新推荐文章于 2024-06-25 10:49:47 发布

阅读量9.3k

点赞数 10

文章标签： css html xhtml javascript

本文链接： https://blog.csdn.net/weixin_49109578/article/details/122136217

版权

这是一个大学生的期末作业，创建了一个包含轮播图、视频和音乐的网页。首页设计精致，使用HTML和CSS实现，包含导航栏、动态旋转音乐播放图标、多个 banner 图片切换及个人信息展示。网页还融合了抚仙湖的介绍，以及视频和相关内容分享。

摘要由CSDN通过智能技术生成

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">&nbsp;</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%">&nbsp;</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">&nbsp;</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%">&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;早上，阳光从窗子里透进来，暖暖的，看着窗外的蓝光，心情愉悦，着一袭白裙，和爱的人一起漫步在沙滩上空气中夹杂着海风的味道……&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</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>&nbsp;</td>
  </tr>
   <tr>
    <td height="49" align="left" class="footer"><p class="zt3">澄江@2021.12.19</p>  </td>
  </tr>
  </table>
</div>
</body>
</html>

如需完整代码可扫码关注，还有子网页