329.我的家乡呼和浩特旅游网页大学生期末大作业 Web前端网页制作 html5+css3+js-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/140058349

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css3+js：导航菜单、图片轮翻效果、留言表单等。适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含10个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>呼和浩特旅游网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/rotate.js"></script>
</head>

<body>

   <div class="header">
       <a href="index.html">呼和浩特</a>
   </div>

   <div class="nav">
       <a href="index.html">城市首页</a>
       <a href="view1.html">城市简介</a>
       <a href="view2.html">行政区划</a>
       <a href="view3.html">地理环境</a>
       <a href="view4.html">自然环境</a>
       <a href="view5.html">历史文化</a>
       <a href="view6.html">地方特产</a>
       <a href="view7.html">风景名胜</a>
       <a href="view8.html">社会事业</a>
       <a href="view9.html">访客留言</a>
   </div>

   <div id="focus" class="focus">
       <ul id="focus_image" class="focus_image" >
           <li class="now">
               <a href="view1.html"><img src="images/focus1.jpg"/></a>
           </li>
           <li><a href="view2.html"><img src="images/focus2.jpg"/></a></li>
       </ul>
       <ul id="focus_dot" class="focus_dot">
           <li class="on"></li>
           <li></li>
       </ul>
   </div>

<div class="wrapper">

       <div class="main">
           <h3><a href="view1.html">呼和浩特简介</a></h3>
           <p><a href="view1.html">呼和浩特市，通称呼市，旧称归绥，是内蒙古自治区首府，国务院批复确定的内蒙古自治区政治、经济、文化中心，我国北方沿边地区重要的中心城市。全市共辖4个市辖区、4个县、1个旗，全市总面积1.72万平方千米，其中建成区面积260平方千米。根据第七次人口普查数据，截至2020年11月1日零时，呼和浩特市常住人口为3446100人。2020年，呼和浩特生产总值2800.7亿元，同比增长0.2%。呼和浩特地处中国华北地区、北部边疆、欧亚大陆内部，是呼包银城市群核心城市、呼包鄂城市群中心城市，是联接黄河经济带、亚欧大陆桥、环渤海经济区域的重要桥梁，也是中国向蒙古国、俄罗斯开放的重要沿边开放中心城市。</a></p>
           <p><a href="view1.html">呼和浩特是国家历史文化名城，是华夏文明的发祥地之一，有着悠久的历史和光辉灿烂的文化。先秦时期，赵武灵王在此设云中郡，故址在今呼市西南托克托县境。民国时期为绥远省省会，蒙绥合并后，呼和浩特成为内蒙古自治区首府。呼市中心城区本是由归化城与绥远城两座城市在清末民国合并而成，故名归绥。1954年改名为呼和浩特，蒙古语意为“青色的城”。呼和浩特还是国家历史文化名城、国家森林城市、国家创新型试点城市、全国民族团结进步模范城市、全国双拥模范城市、中国优秀旅游城市和中国经济实力百强城市，被誉为“中国乳都”。2018年12月，被评为2018中国大陆最佳商业城市100强。2019年10月23日，被确定为“第三批城市黑臭水体治理示范城市”。2020年10月，被评为全国双拥模范城（县）。</a></p>
       </div>

       <div class="list">
           <h3><a href="view1.html">城市简介</a></h3>
           <a href="view1.html"><img src="images/view1.jpg"/></a>
           <p><a href="view1.html">呼和浩特市，通称呼市，旧称归绥，是内蒙古自治区首府，国务院批复确定的内蒙古自治区政治、经济、文化中心，我国北方沿边地区重要的中心城市，国家历史文化名城。全市共辖4个市辖区、4个县、1个旗。</a></p>
       </div>

       <div class="word">
           <h3><a href="view2.html">行政区划</a></h3>
           <p><a href="view2.html">1960年原属乌兰察布盟的土默特旗划归呼和浩特市领导。1963年将土默特旗划归乌兰察布盟。1970年乌兰察布盟所属土默特左旗、托克托县划归呼和浩特市。1995年11月21日，国务院批准将乌兰察布盟的和林格尔县、清水河县划归呼和浩特市管辖。1996年5月18日，国务院批准将乌兰察布盟的武川县划归呼和浩特市管辖。2000年5月14日，国务院批准调整呼和浩特市市辖区行政区划，郊区更名为赛罕区。截至2017年底，呼和浩特辖4市辖区、4县、1旗。</a></p>
       </div>

       <div class="list">
           <h3><a href="view3.html">地理环境</a></h3>
           <a href="view3.html"><img src="images/view3.jpg"/></a>
           <p><a href="view3.html">呼和浩特位于内蒙古自治区中部。市区位于北纬40.48，东经111.41。地处内蒙古自治区中部大青山南侧，西与包头市、鄂尔多斯市接壤，东邻乌兰察布市，南抵山西省。全市总面积1.72万平方千米。</a></p>
       </div>

       <div class="list">
           <h3><a href="view4.html">自然环境</a></h3>
           <a href="view4.html"><img src="images/view4.jpg"/></a>
           <p><a href="view4.html">呼和浩特地区光能资源丰富，日照充足，是全国的一个次高值区。农作物生长季太阳辐射总量达35592828兆焦耳/千方米，是全年太阳辐射总量的63%，日照1600小时以上，是相当优势的生产潜力。</a></p>
       </div>

       <div class="word">
           <h3><a href="view5.html">历史文化</a></h3>
           <p><a href="view5.html">内蒙古草原旅游节是在那达慕大会的基础上融经贸洽谈、物资交流和竞技比赛、文娱活动于一体的民间传统节日，有摩托车队、骆驼队、马术队、武术队、安代舞、摔跤等表演节目。内蒙古乌兰牧骑艺术节每两年在呼和浩特市举办一次，有时与内蒙草原旅游节、内蒙那达慕大会同时举行，是内蒙人民最喜爱的节日之一。昭君文化节源于民间的昭君庙会，举办昭君文化节的创意始于1998年。昭君文化节的举办已成为树立和展示地方形象的重要手段。</a></p>
       </div>

       <div class="list">
           <h3><a href="view6.html">地方特产</a></h3>
           <a href="view6.html"><img src="images/view6.jpg"/></a>
           <p><a href="view6.html">传统皮襄是蒙古人日常盛酒、奶的容器。皮囊酒壶是精选内蒙古草原天然优良牛皮，全手工。技师将牛皮抛光或起毛，再经过几十道加工工序，精雕细琢出各种图案和各种形状，是蒙古族牧民日用品之一。</a></p>
       </div>

       <div class="word">
           <h3><a href="view7.html">风景名胜</a></h3>
           <p><a href="view7.html">五塔寺（金刚座舍利宝塔）位于呼和浩特市玉泉区五塔寺后院。始建于清雍正五年。金刚座舍利宝塔是一个在金刚宝座上建有5个玲珑舍利小塔的建筑，人们通称为五塔。塔身高16.5米，为金刚宝座式，由塔基、金刚座、塔顶三部分组成。</a></p>
           <p><a href="view7.html">大召寺是呼和浩特玉泉区南部的一座大藏传佛教寺院，属于格鲁派（黄教）。大召寺其中“召”为藏语寺庙之意。汉名原为“弘慈寺”，后改为“无量寺”。因为寺内供奉一座银佛，又称“银佛寺”。</a></p>
       </div>

       <div class="list">
           <h3><a href="view8.html">社会事业</a></h3>
           <a href="view8.html"><img src="images/view8.jpg"/></a>
           <p><a href="view8.html">呼和浩特市共有普通高等院校多所，其中包括内蒙古大学、内蒙古师范大学、内蒙古工业大学、内蒙古农业大学等高等学府。呼和浩特拥有内蒙古大学图书馆、呼和浩特市图书馆以及其他多所大型图书馆。</a></p>
       </div>

</div>

   <div class="footer">
       Copyright @ 2021 huhehaotelvyou.com All Rights Reserved. 呼和浩特旅游网版权所有
   </div>

</div>

</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";

*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#80a467;
}
a{color:#80a467;text-decoration:none;
}

.container{width:1090px;margin:0 auto;overflow:hidden;background-color:#daeacf;
}

.header{float:left;width:1090px;height:100px;line-height:95px;font-size:36px;font-weight:bold;letter-spacing:5px;text-align:center;
}

.nav{float:left;width:1090px;height:50px;line-height:50px;font-size:14px;font-weight:bold;background-color:#80a467;
}
.nav a{float:left;margin:0 22px 0 30px;color:#fff;
}
.nav a:hover{text-decoration:underline;
}
.nav a:nth-last-child(1){margin-right:0;
}

.focus{float:left;position:relative;width:1090px;
}
.focus_image{float:left;width:1030px;height:460px;list-style:none;margin:30px 0 0 30px;
}
.focus_image li{float:left;width:1030px;height:460px;display:none;
}
.focus_image li.now{display:block;
}
.focus_image li img{float:left;width:1030px;height:460px;
}
.focus_dot{position:absolute;bottom:30px;right:420px;width:130px;height:20px;list-style:none;
}
.focus_dot li{float:left;width:12px;height:12px;margin-left:10px;background-color:#fff;border-radius:50%;cursor:pointer;
}
.focus_dot li.on{background-color:#80a467;
}

.wrapper{float:left;width:1090px;padding-bottom:60px;
}
.wrapper a:hover{text-decoration:underline;
}
.wrapper p a{color:#555;
}

.main{float:left;width:1030px;margin:45px 0 0 30px;
}
.main h3{float:left;width:1030px;height:30px;line-height:30px;font-size:16px;text-align:center;
}
.main p{float:left;width:1030px;line-height:26px;margin-top:5px;
}

.word{float:left;width:234px;margin:50px 0 0 30px;
}
.word h3{float:left;width:234px;line-height:25px;font-size:16px;
}
.word p{float:left;width:234px;line-height:27px;margin-top:8px;
}

.list{float:left;width:234px;margin:50px 0 0 30px;
}
.list h3{float:left;width:234px;line-height:25px;font-size:16px;
}
.list img {float:left;width:234px;height:160px;margin-top:12px;
}
.list p{float:left;width:234px;line-height:25px;margin-top:8px;
}

.content{float:right;width:1090px;margin-top:30px;
}
.content h3{float:left;width:1090px;height:50px;line-height:50px;font-size:16px;text-align:center;
}
.content img{float:left;width:760px;margin:15px 0 10px 165px;
}
.content p{float:left;width:760px;line-height:30px;margin:5px 0 0 165px;font-size:13px;text-indent:25px;color:#555;
}

.message{float:left;width:1090px;padding:60px 0 80px 0;
}
.message form{float:left;width:1090px;
}
.message p{float:left;width:1090px;margin-top:15px;
}
.message span{float:left;width:340px;height:35px;line-height:35px;font-size:14px;text-align:right;margin-top:8px;color:#555;
}
.message input{float:left;width:380px;height:35px;line-height:35px;margin:8px 0 0 20px;
}
.message textarea{float:left;width:380px;height:260px;line-height:35px;margin:8px 0 0 20px;
}

...