旅游网站html、css、bootstrap

一、网页概述

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

二、网页文件

本网页共包含1个页面：

三、网页效果

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

四、代码展示

HTML 复制代码

1.html
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='#css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/templatemo-style.css">
    <title>Home</title>
</head>

<body>
    <div class="fixed-header">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                </button>
                <a class="navbar-brand" href="#">仙女网页</a>
            </div>
            <nav class="main-menu">
                <ul>
                    <li><a href="#home">主页</a></li>
                    <li><a href="#services">文案一</a></li>
                    <li><a href="#clients">文案二</a></li>
                    <li><a class="external" href="" target="_blank">文案三</a></li>
                    <li><a href="#contact">给我留言</a></li>
                </ul>
            </nav>
        </div>
    </div>
    
    <div class="container">
        <section class="col-md-12 content" id="home">
           <div class="col-lg-6 col-md-6 content-item">
               <img src ="images/1.jpg" alt="Image" class="tm-image">
           </div>
           <div class="col-lg-6 col-md-6 content-item content-item-1 background">
               <h2 class="main-title text-center dark -blue-text">来一场说走就走的旅行 </h2>
               <p>跟生活请个假，来一场说走就走的旅行，慢慢看风景。感受风的惬意，景色不需要多美，能卸下一身的疲惫就行。人生是旷野，不是轨道。买好票，背上行囊，向着远方出发，去邂逅那些未曾预料的风景。</p>
               <p>天很蓝，太阳很暖。风吹日晒自由自在。山高路远，且行且长，来世间一趟。一定要看看更多的风景。毕竟自由的风那么甜。</p>               
               <button type="button" class="btn btn-big dark-blue-bordered-btn">上一页</button>
               <button type="button" class="btn btn-big dark-blue-btn">下一页</button>
           </div>
       </section>

       <section class="col-md-12 content padding" id="services">
        <div class="col-lg-6 col-md-6 col-md-push-6 content-item">
           <img src="images /2.jpg" alt="Image" class="tm-image">
       </div>
       <div class="col-lg-6 col-md-6 col-md-pull-6 content-item background flexbox">
           <h2 class="section-title">生活不止眼前的苟且，还有诗和远方 </h2>
           <p class="section-text">走到的叫足迹，走不到的叫橦憬一路涉足，一路留恋，一路回望，依旧前行。所见即山海，日出，落霞，见人间，眼无是非，望岁月，心有玫瑰。在自己的时光里，拍喜欢的风景，配自己喜欢的歌，住进风景里，你就是诗和远方。</p>
         
           <p>青春没有售价，硬座直达拉萨。在旅途中，把所有的烦恼都抛在身后，只留下自由的灵魂在天地间飘荡 。 </p>
           <p>说走就走，是人生最华丽的奢侈，也是最灿烂的自由。旅行的意义不是赶路，而是慢慢下来感受路在有趣的城市，遇见彩色的梦想和许多美好。 </p>
           <p>凑个热闹，挤一趟人海，去别人呆腻的城市体验一下。有趣的人生，一半是人间烟火，一半是山海湖泊。想在海边等一场日出，在山顶看一次日落。把沿途的每一帧风景都收录进记忆的相簿，成为生命中最温柔的篇章。 </p>
       </div>

   </section>

   <section class="col-md-12 content" id="clients">
       <div class="col-lg-6 col-md-6 content-item">
           <img src="images/3.jpg" alt="Image" class="tm-image">
       </div>
       <div class="col-lg-6 col-md-6 content-item background flexbox">
           <h2 class="section-title"> 旅行的意义</h2>
           <p>我在异乡的街道漫步，听着陌生的语言，感受着不同的风土人情。每一个转角，都像是一次与未知的温柔相拥。 </p>
           <p>世界不必太清晰，爱是最好的滤镜。去旅行，去看世界，我相信，你我看到的风景定不相同。 </p>
           <p>风景，美不美，自己亲眼看过才知道，旅途愉快，停在哪里都不算太坏。旅行的意义，不在于走过多少地方，而在于在旅途中遇见了更好的自己。 </p>
           <p>在陌生的环境里学会适应，在未知的挑战中变得勇敢。旅行的意义不是看风景，而是把自己拿出去晒晒，你看过辽阔的草原、奔腾的江海、无垠的沙漠，就不会觉得人间寂寥。踏上旅程，才明白世界如此广阔，自己如此渺小。那些走过的路、见过的人，都在拓宽生命的边界，让内心更加丰盈。感受风的惬意，景色不需要多美，能卸下一身的疲惫就行，想出去浪几天，抛夫弃子的那种，走一起的不，手机一关，谁也找不着，想干啥干啥，现在就去。

</p>
           <div>
              
               <button type="button" class="btn green-btn normal-btn">更多</button>    
           </div>             
       </div>
   </section>


   <section class="col-md-12 content" id="contact">
       <div class="col-lg-6 col-md-6 col-md-push-6 content-item">
           <img src="images/4.jpg" alt="Image" class="tm-image">
       </div>
       <div class="col-lg-6 col-md-6 col-md-pull-6 content-item background flexbox">
           <h2 class="section-title">给我留言 </h2>
           <p class="margin-b-25"> 留下您的心声，来一场心灵的旅行...</p>

           <!--<div class="row"> -->
           <form method="post" name="contact-form" class="contact-form">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="form-group">
                  <input name="name" type="text" class="form-control" id="name" placeholder="名字..." required>
                </div>    
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 pad-l-3">
                <div class="form-group contact-field">
                    <input name="email" type="email" class="form-control" id="email" placeholder="邮箱..." required>
                </div>    
            </div>

2.CSS

代码如下（节选示例）：

CSS 复制代码

/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.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,menu,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-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}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;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}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-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid 

...

3.JS

代码如下（节选示例）：

JavaScript 复制代码

/*!
 * Bootstrap v3.3.5 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under the MIT license
 */
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){return a(b.target).is(this)?b.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b)

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

更多优质博客文章、网页模板点击以下链接查阅：