246. 桂林旅游响应式网页设计实例大学生期末大作业 Web前端网页制作 html+css+js_以壮丽广西为主题制作一个小型网站javascript-CSDN博客

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

前言

桂林旅游网页设计实例，应用html+css+js： Div、导航栏、Banner、图片轮翻效果等。适用于大学生网页课程作业设计，供大家参考。

一、网页概述

网页为响应式布局，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验。支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset=utf-8"utf-8">
<title>桂林旅游网</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/sytle.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/buttons.css">
</head>

<body>

<header>
<div class="container">
<div class="row">
<div class="span8"><img src="images/logo.png" /></div>
<div class="span4 search">
<form class="form-search">
</form>
</div>
</div>
</div>
</header>


<div class="navbar container">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="index.html">首页</a></li>
<li><a href="jianjie.html">桂林简介</a></li>
<li><a href="fazhan.html">桂林发展</a></li>
<li><a href="news.html">桂林新闻</a></li>
<li><a href="photo.html">桂林风光</a></li>
<li><a href="lianxi.html">联系我们</a></li>
</ul>
</div>
</div>


<div class="bigpic">
<div class="container">
<div class="row">
<div class="carousel slide span12" id="myCarousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#myCarousel" class="active"></li>
<li data-slide-to="1" data-target="#myCarousel" class=""></li>
<li data-slide-to="2" data-target="#myCarousel" class=""></li>
<li data-slide-to="3" data-target="#myCarousel"></li>
<li data-slide-to="4" data-target="#myCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img class=" img-rounded" alt="" src="images/1.jpg">
<div class="carousel-caption">
<h4>桂林田园风光</h4>
</div>
</div>
<div class="item"><img class=" img-rounded" alt="" src="images/2.jpg">
<div class="carousel-caption">
<h4>桂林象鼻山</h4>
</div>
</div>
<div class="item"><img class=" img-rounded" alt="" src="images/3.jpg">
<div class="carousel-caption">
<h4>桂林山水甲天下</h4>
</div>
</div>
<div class="item"><img class=" img-rounded" alt="" src="images/4.jpg">
<div class="carousel-caption">
<h4>桂林山水甲天下</h4>
</div>
</div>
<div class="item"><img class=" img-rounded" alt="" src="images/5.jpg">
<div class="carousel-caption">
<h4>桂林山水甲天下</h4>
</div>
</div>
</div>
<a data-slide="prev" role="button" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" role="button" href="#myCarousel" class="right carousel-control">›</a>
</div>
</div>
</div>
</div>


<div class="container">
<div class="row">
<div class="indexC span12">
<div class="span4"><img class="img-rounded" src="images/i1.jpg" />
<p>以风景秀丽著称的阳朔县，位于广西壮族自治区东北部，桂林市区南面，属桂林市管辖，县城距桂林市区65公里。</p>
</div>
<div class="span4"><img class="img-rounded" src="images/i2.jpg" />
<p>漓江发源于“华南第一峰”桂北越城岭漓江见闻猫儿山，那是个林丰木秀，空气清新，生态环境极佳的地方。</p>
</div>
<div class="span4"><img class="img-rounded" src="images/i3.jpg" />
<p>从兴坪溯江而上四公里有一山，它五峰连属，东南北三面环山，西面削壁临江，高宽百余米的石壁上，青绿黄白，众彩纷呈，浓淡相间，班驳有致，宛如一幅神骏图。</p>
</div>
</div>
</div>
<div class="row">
<div class="indexC span12">
<div class="span4"><img class="img-rounded" src="images/i4.jpg" />
<p>龙脊梯田地处海拔1916米的崇山峻岭深处,梯田海拔最高处1180米,最低380米,垂直落差800米,面积71.6平方公里。</p>
</div>
<div class="span4"><img class="img-rounded" src="images/i5.jpg" />
<p>象鼻山又称仪山、沉水山，简称象山，位于漓江与桃花江汇流处，海拔200米，山形酷似一头巨象伸长鼻临江汲水，因而得名。</p>
</div>
<div class="span4"><img class="img-rounded" src="images/i6.jpg" />
<p>银子岩溶洞是典型的喀斯特地貌，贯穿十二座山峰，属层楼式溶洞，洞内汇集了不同地质年代发育生长的钟乳石，晶莹剔透。</p>
</div>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="guilin span12">
<p>桂林是世界著名的风景游览城市和历史文化名城。桂林是广西壮族自治区最重要的旅游城市，享有山水甲天下之美誉。位于广西壮族自治区东北部，湘桂走廊南端。东、北与湖南省相邻。湘桂铁路与漓江纵贯，在建的贵广高速铁路横穿全境，有
321 、322 、323 三条国道穿过。东经109°36′至111°29′、北纬24°15′至26°23′，平均海拔150米，北、东北面与湖南省交界，西、西南面与柳州市、来宾市相连，南、东南面与梧州市、贺州市相连。
</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="flink span12">
</div>
</div>
</div>

<div class="footer">
<div class="container">
<div class="row">
<ul class="span12">
<li><a href="#">关于我们</a></li>
<li><a href="#">免责声明 </a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">留言建议</a></li>
</ul>
<p>版权所有</p>
路
</div>
</div>
</div>
</body>

</html>

...

2.CSS

代码如下（节选示例）：

/*!
* Bootstrap v2.3.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/

.clearfix {
*zoom: 1;
}

.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}

.clearfix:after {
clear: both;
}

.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}

.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}

audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}

audio:not([controls]) {
display: none;
}

html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

a:hover,
a:active {
outline: 0;
}

sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

#map_canvas img,
.google-maps img {
max-width: none;
}

button,
input,
select,
textarea {
margin: 0;
font-size: 100%;
vertical-align: middle;
}

button,
input {
*overflow: visible;
line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}

input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}

textarea {
overflow: auto;
vertical-align: top;
}

@media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}

...

3.JS

代码如下（节选示例）：

function ($) {

"use strict"; // jshint ;_;

/* ALERT CLASS DEFINITION
* ====================== */

var dismiss = '[data-dismiss="alert"]'
, Alert = function (el) {
$(el).on('click', dismiss, this.close)
}

Alert.prototype.close = function (e) {
var $this = $(this)
, selector = $this.attr('data-target')
, $parent

if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}

$parent = $(selector)

e && e.preventDefault()

$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())

$parent.trigger(e = $.Event('close'))

if (e.isDefaultPrevented()) return

$parent.removeClass('in')

function removeElement() {
$parent
.trigger('closed')
.remove()
}

$.support.transition && $parent.hasClass('fade') ?
$parent.on($.support.transition.end, removeElement) :
removeElement()
}

/* ALERT PLUGIN DEFINITION
* ======================= */

var old = $.fn.alert

$.fn.alert = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('alert')
if (!data) $this.data('alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}

$.fn.alert.Constructor = Alert

/* ALERT NO CONFLICT
* ================= */

$.fn.alert.noConflict = function () {
$.fn.alert = old
return this
}

/* ALERT DATA-API
* ============== */

$(document).on('click.alert.data-api', dismiss, Alert.prototype.close)

}(window.jQuery);/* ============================================================
* bootstrap-button.js v2.3.1
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */

!function ($) {

"use strict"; // jshint ;_;

/* BUTTON PUBLIC CLASS DEFINITION
* ============================== */

var Button = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.button.defaults, options)
}

Button.prototype.setState = function (state) {
var d = 'disabled'
, $el = this.$element
, data = $el.data()
, val = $el.is('input') ? 'val' : 'html'

state = state + 'Text'
data.resetText || $el.data('resetText', $el[val]())

$el[val](data[state] || this.options[state])

// push to event loop to allow forms to submit
setTimeout(function () {
state == 'loadingText' ?
$el.addClass(d).attr(d, d) :
$el.removeClass(d).removeAttr(d)
}, 0)
}

Button.prototype.toggle = function () {
var $parent = this.$element.closest('[data-toggle="buttons-radio"]')

$parent && $parent
.find('.active')
.removeClass('active')

this.$element.toggleClass('active')
}

/* BUTTON PLUGIN DEFINITION
* ======================== */

var old = $.fn.button

$.fn.button = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('button')
, options = typeof option == 'object' && option
if (!data) $this.data('button', (data = new Button(this, options)))
if (option == 'toggle') data.toggle()
else if (option) data.setState(option)
})
}

$.fn.button.defaults = {
loadingText: 'loading...'
}

$.fn.button.Constructor = Button

/* BUTTON NO CONFLICT
* ================== */

$.fn.button.noConflict = function () {
$.fn.button = old
return this
}

/* BUTTON DATA-API
* =============== */

$(document).on('click.button.data-api', '[data-toggle^=button]', function (e) {
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle')
})

}(window.jQuery);/* ==========================================================
* bootstrap-carousel.js v2.3.1
* http://twitter.github.com/bootstrap/javascript.html#carousel
* ==========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */

!function ($) {

"use strict"; // jshint ;_;

/* CAROUSEL CLASS DEFINITION
* ========================= */

var Carousel = function (element, options) {
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
.on('mouseleave', $.proxy(this.cycle, this))
}

...