210. 大学生HTML5期末大作业 ―【Bootstrap衡水湖旅游主题响应式自适应网页(2页)】 Web前端网页制作 html5+css3+js-优快云博客

本实例应用html5+css3+js：Bootstrap框架、lightbox、fonts、表单非空验证等。响应式自适应网页，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含2个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE HTML>
<html>
   <head>
       <div class="wrap">
       <title>衡水湖</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <audio id="audio" height="100" width="100" preload="auto" controls="controls" autoplay="autoplay" hidden="hidden">
       </audio>
       <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
       <link href="css/style.css" rel='stylesheet' type='text/css' />

   </head>
   <body>
   <body>
       <div class="banner">
           <div class="container">
               <div class="header">
                   <div class="logo">
                       <a href="index.html">衡水湖</a>
                   </div>
                   <div class="icons">
                   </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="#">住宿</a></li>
                       <li><a href="#">衡水湖美食</a></li>
                       <li><a href="#">联系我们</a></li>
                   </ul>
               </div>
           </div>
           <div class="banner-text">
               <div class="container">
                   <ul>
                       <li>河北衡水湖国家级自然保护区坐落在河北省衡水市桃城区、是国家AAAA级旅游景区。</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>
                   <div id="top" class="callbacks_container">
                       <ul class="rslides" id="slider3">
                           <li>
                               <div class="banner-slid">
                                   <h3>同舟共济</h3>
                                   <p>重要的不是你从哪里来，而是你到哪里去，找准方向，继续努力.
                                       找准方向，继续努力。只有这样，才能真正自信起来。
                                   </p>
                               </div>
                           </li>
                       </ul>
                   </div>
               </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></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/1.jpg" alt="">
                       </div>
                       <div class="col-md-7 banner-bottom-right">
                           <h4>安乐秧歌</h4>
                           <p>　安乐秧歌是流行于衡水市桃城区邓庄乡北苏闸村一带的歌舞表演形式，最初叫太平车，它历史悠久传承有序，距今已有三百多年的历史，辐射方圆百里。1931年该村在东北鞍山做工的安云亭回乡后将本地秧歌加入东北大秧歌动作和内容，广泛吸纳各种生活元素和寓言故事。</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/2.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>

...

2.CSS

代码如下（节选示例）：

html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: .67em 0;
font-size: 2em;
}
mark {
color: #000;
background: #ff0;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}

...

3.JS

代码如下（节选示例）：

/*! http://responsiveslides.com v1.54 by @viljamis */
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)

...