18.响应式旅游景区网页大学生期末大作业 Web前端网页制作 html5+css+js

一只小小的眠羊

于 2024-10-01 22:43:16 发布

阅读量880

点赞数 16

分类专栏：大学生期末大作业旅游文章标签：前端 html css javascript html5 css3

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/142675699

版权

大学生期末大作业同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

旅游

3 篇文章 0 订阅

订阅专栏

一、前言

本实例应用html5+css3+js：三级页面、图片轮翻等，适用于旅游网站的设计、大学生网页课程设计等，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>
<head>
<title>榆林子州</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />

<link href="css/style.css" rel='stylesheet' type='text/css' />
<script src="js/jquery-1.11.1.min.js"> </script>
<script type="text/javascript">
   jQuery(document).ready(function($) {
       $(".scroll").click(function(event){
           event.preventDefault();
           $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
       });
   });
</script>
</head>
<body>
   
   <div class="banner">
       
       <div class="container">
           <div class="header">
               <div class="logo">
                   <a href="index.html">榆林子州</a>
               </div>
               <div class="icons">
                   <ul>
                       <li><a href="#" class="facebook"> </a></li>
                       <li><a href="#" class="facebook twitter"> </a></li>
                       <li><a href="#" class="facebook chrome"> </a></li>
                       <li><a href="#" class="facebook dribbble"> </a></li>
                   </ul>
               </div>
               <div class="clearfix"> </div>
           </div>
           <div class="top-nav">
                   <span class="menu">菜单</span>
                   <ul class="nav1">
                       <li><a href="index.html" class="active">子州简介</a></li>
                       <li><a href="history.html">文化历史</a></li>
                       <li><a href="accomdation.html">住宿</a></li>
                       <li><a href="food.html">子州美食</a></li>
                       <li><a href="#news" class="scroll">景区公告</a></li>
                       <li><a href="contact.html">联系我们</a></li>
                   </ul>
                   
                       <script>
                           $( "span.menu" ).click(function() {
                           $( "ul.nav1" ).slideToggle( 300, function() {
                           // Animation complete.
                               });
                               });
                       </script>
                   
           </div>
       </div>
       
       <div class="banner-text">
           
           <div class="container">
               <ul>
                   <li>子洲县位于陕北黄土高原丘陵沟壑区腹地，榆林市南缘，为纪念革命烈士李子洲而命名。</li>
               </ul>
           </div>
           
       </div>
   </div>
   
   
   <div class="banner-top-slide">
       <div class="banner-bottom-top">
           <h4>全民抗疫</h4>
           <p>团结一致，万众一心，早日战胜疫情，武汉加油，中国加油</p>
       </div>
       <div class="banner-bottom-bottom">
           <div class="banner-top-slide-grids">
               <script src="js/responsiveslides.min.js"></script>
                   <script>
                       // You can also use "$(window).load(function() {"
                       $(function () {
                       // Slideshow 4
                       $("#slider3").responsiveSlides({
                           auto: true,
                           pager: true,
                           nav: false,
                           speed: 500,
                           namespace: "callbacks",
                           before: function () {
                           $('.events').append("<li>before event fired.</li>");
                           },
                           after: function () {
                           $('.events').append("<li>after event fired.</li>");
                           }
                       });

                       });
                   </script>
                   <div id="top" class="callbacks_container">
                       <ul class="rslides" id="slider3">
                           <li>
                               <div class="banner-slid">
                                   <h3>同舟共济</h3>
                                   <p>居家隔离，减少外出，就是最好的防护;</br>
                                   听从号召尽量待在家中，不串门不聚会;</br>正确佩戴口罩，做好防护，养成良好卫生习惯。
                                   </p>
                               </div>
                           </li>
                           <li>
                               <div class="banner-slid">
                                   <h3>坚定信心</h3>
                                   <p>科学宣传疫情防护知识，提高公众自我保护意识;</br>
                                   加强防控，一起加油。众志成城，抗击疫情;</br>
疫情就是命令，防控就是责任。
                                   </p>
                               </div>
                           </li>
                       </ul>
                   </div>
           </div>
       </div>
   </div>
   
   
   <div class="welcome">
       
       <div class="container">
           <div class="welcome-info">
               <h3>Hello there!</h3>
               <h5>新的一年，打卡子州的正确姿势</h5>
               <h4>你要不要跟我走？  <a href="follow-me.html">嗯，点这里>></a></h4>
           </div>
       </div>
       
   </div>
   
<div class="copyrights">Collect from </div>
   
   <div class="banner-bottom">
       
       <div class="container">
           <div class="banner-bottom-info">
               <h3>子州过年习俗</h3>
               <p>陕北的春节，各种民俗活动异彩纷呈，闹秧歌，庙会，打醮，说书等百花齐放，可谓是热闹非凡<a href="handie.html">更多>></a></p>
           </div>
           <div class="banner-bottom-grids">
               <div class="col-md-6 banner-bottom-grid">
                   <div class="col-md-5 banner-bottom-left">
                       <img src="images/xs1.jpg" alt="">
                   </div>
                   <div class="col-md-7 banner-bottom-right">
                       <h4>秧歌朝拜佛祖</h4>
                       <p>打醮本是道士设坛为人做法事，求福禳灾的一种法事活动。一般是在冬天农事告一段落的时候，农民们为了感谢神灵带来一年的收获，祈求上苍赐福庇佑来年风调雨顺、五谷丰登，消灾免难，吉祥安康，而举行各种祭祀活动，而打醮便是其中的一项重要的活动。</p>
                   </div>
                   <div class="clearfix"> </div>
               </div>
               <div class="col-md-6 banner-bottom-grid">
                   <div class="col-md-5 banner-bottom-left">
                       <img src="images/xs2.jpg" alt="">
                   </div>
                   <div class="col-md-7 banner-bottom-right">
                       <h4>转幡</h4>
                       <p>在众多的祭祀活动中，转幡也是一项规模比较大的佛事活动。转幡也称祭幡，就是凡来参加祭事活动的村民都要手执法器、排例成行、跟随佛教居士在空阔平整的地上围绕着栽在地上的绑着一把朝向天空的高高在上的扫帚旋转，绑着的扫帚谓之“扫天晴”。</p>
                   </div>
                   <div class="clearfix"> </div>
               </div>
               <div class="clearfix"> </div>
           </div>
       </div>
       
   </div>
   
   
   <div id="news" class="news">
       <div class="container">
           <div class="news-text">
               <h3>子州景区</h3>
<p>因外界各种原因给您带来的麻烦，我们在此感到深深的抱歉，感谢您的谅解，祝您游玩愉快！</p>
           </div>
           <div class="news-grids">
               <div class="col-md-3 news-grid">
                   <h4>子洲西峰寺</h4>
                   <span>2020.02.07</span>
                   <img src="images/ticket.jpg" alt="">
                   <div class="news-info">
                       <p>子洲县瓜园则湾乡政府东北2公里处有一块山地，名叫芦草坛，其上有一西峰寺，依山而建。北临乏牛山，西北与柏全山相望。芦草坛虽不雄伟壮观，却也峻峭，人若站于其顶眺望，视野倒也开阔，更因其西峰寺而遐迩闻名。西峰寺坐西北面东南，占地约3亩，一个独院。正殿由三孔拱形洞组成，纯砖结构，顶呈硬山式，用黄色琉璃瓦铺顶，飞檐翘角，兽头独尊，遥遥相望，顶上中有三层小0，独特精致,引人注目。正殿走廊四柱支撑，朱柱彩壁，画栋雕梁，十分生动。</p>
                   </div>
               </div>
               <div class="col-md-3 news-grid">
                   <h4>子洲大洪寺</h4>
                   <span>2020.02.07</span>
                   <img src="images/ticket.jpg" alt="">
                   <div class="news-info">
                       <p>子洲城西五里大理河北岸有大洪寺。“据庙内碑记载，明景泰初年，信士诸公创修庙于底石崖，延及成化年间乃修葺于中峰之巅，后世多次重修，1917年——1920年再重修葺”。(1958年文物普查记录)其寺据今已有550多年的历史了。大洪寺面南而建，与大理河南岸之青龙山、克戎寨(今张家寨)遥遥相对。</p>
                   </div>
               </div>

......

2.CSS

代码如下（节选示例）：

h4, h5, h6,
h1, h2, h3 {margin-top: 0;}
ul, ol {margin: 0;}
p {margin: 0;}
html, body{
   font-family: 'OpenSans-Regular';
   font-size: 100%;
   background: #ffffff;
}
@font-face {
font-family: 'OpenSans-Regular';
src: url(../fonts/OpenSans-Regular.ttf)format('truetype');
}
@font-face {
font-family: 'Dorsa-Regular';
src: url(../fonts/Dorsa-Regular.ttf)format('truetype');
}
body a{
   transition:0.5s all;
   -webkit-transition:0.5s all;
   -moz-transition:0.5s all;
   -o-transition:0.5s all;
   -ms-transition:0.5s all;
}
.banner{
background: url(../images/banner.jpg) no-repeat 0px 0px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
position: relative;
}
.copyrights{
   text-indent:-9999px;
   height:0;
   line-height:0;
   font-size:0;
   overflow:hidden;
}
.a-banner {
background: url(../images/banner.jpg) no-repeat 0px 0px;
background-size: cover;
}
.logo{
   float:left;
}
.logo a{
color: #FFF;
font-size: 5em;
font-family: 'Dorsa-Regular';
text-decoration: none;
letter-spacing: 2px;
}
.icons{
   float:right;
}
.icons ul{
padding: 0;
margin: 3em 0 0 0;
}
.icons ul li{
   display:inline-block;
   margin:0 .3em;
}
.icons ul li a.facebook{
   background:url(../images/social.png) no-repeat 0px 0px;
   width:40px;
   height:40px;
   display:block;
}
.icons ul li a.twitter{
background: url(../images/social.png) no-repeat -41px 0px;
}
.icons ul li a.chrome{
   background:url(../images/social.png) no-repeat -82px 0px;
}
.icons ul li a.dribbble{
   background:url(../images/social.png) no-repeat -123px 0px;
}
.icons ul li a.pinterest{
   background:url(../images/social.png) no-repeat -164px 0px;
}
.icons ul li a.facebook:hover{
   opacity:.5;
}
.top-nav {
text-align: center;
padding: 1em 0 1em 0;
border-top: ridge 1px rgba(255, 255, 255, 0.62);
}
.top-nav ul {
padding: 0;
margin: 0;
}
.top-nav ul li {
display: inline-block;
margin: 0 2em;
}
.top-nav ul li a.active {
border-top: solid 2px #ffcc33;
color: #ffcc33;
}
.top-nav ul li a {
color: #FFFFFF;
font-size: 1.5em;
letter-spacing: 3px;
margin: 0;
font-weight: 600;
font-family: 'Dorsa-Regular';
text-decoration: none;
padding: .7em 0 0 0;
}
.top-nav ul li a:hover{
border-top: solid 2px #ffcc33;
color: #ffcc33;
}
.banner-text{
padding: 2em 0;
background: #ffcc33;
margin-top: 30.5em;
}
.banner-text ul{
   padding:0;
   margin:0;
}
.banner-text ul li {
font-size: 1em;
margin: 0;
color: #FFF;
display: inline-block;
}
.banner-text ul li a {
color: #FFF;
text-decoration: none;
}
.banner-text ul li a {
color: #FFF;
text-decoration: none;
}
.banner-top-slide{
background: #FFF;
position: absolute;
top: 20.06em;
right: 14%;
width: 28%;
}
.banner-bottom-top{
background: #ffcc33;
padding: 2em 3em;
}
.banner-bottom-top h4{
   color:#FFF;
   font-size:3em;
   font-weight:600;
}
.banner-bottom-top p{
font-size: 1.4em;
color: #FFF;
}
.banner-bottom-bottom{
background: #FFF;
padding: 2em 3em 4em;
}
.banner-slid h3{
color: #6E6E6E;
font-family: 'Dorsa-Regular';
font-size: 3em;
letter-spacing: 2px;
}
.banner-slid p{
color: #B2B2B2;
font-size: .9em;
margin: 1em 0 0 0;
line-height: 1.8em;
}
/*------------------ Slider Part starts Here----------*/
#slider2,
#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}