ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

我的家乡网页设计

2021-12-24 21:58:00  阅读:190  来源: 互联网

标签:家乡 rotate 网页 transform rotating right nbsp background 设计


1.适合大学生期末作业的网站,100%的页面,首页设计了轮播图,视频以及音乐,效果图如下,因为无法截到完整的页面,以及上传视频,是分开截的,请欣赏:

 

 

 

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>

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

 

 

标签:家乡,rotate,网页,transform,rotating,right,nbsp,background,设计
来源: https://blog.csdn.net/weixin_49109578/article/details/122136217

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有