html+css+javascript+jquery+bootstarp響應式旅行社旅遊平台網站模闆(14頁)

文章目錄🌰

一、網站題目👨‍🎓
二、網站描述✍️
三、網站介紹📖
四、網站效果🌐
五、網站代碼制作部分 📕
HTML結構代碼🧱
CSS樣式代碼🏡
六、遇到問題及如何解決🔍
七、實訓總結😊
八、更多幹貨🎁

一、網站題目👨‍🎓

🚀 旅遊景點介紹、旅遊風景區、家鄉介紹、等網站的設計與制作。

二、網站描述✍️

旅遊景點介紹、旅遊風景區是一個介紹簡介、行政區劃、地理環境、自然環境、教育事業、體育事業、旅遊景點、城市榮譽等等。網站集中主要展示了的地方風土人情，并通過訪客留言，增加遊客的互動體驗。同時，地方旅遊網站裡的每一個網頁都采用了統一的設計風格，以加強城市整體面貌統一的宣傳效果。最重要的是做出旅遊網站獨特的風格，更能吸引浏覽者的眼球。

三、網站介紹📖

網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。

網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。

網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。

網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；

網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體(如：

Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++

等任意html編輯軟體進行運作及修改編輯等操作)。

其中：

(1)html檔案包含：其中index.html是首頁、其他html為二級頁面；

(2)css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；

(3)js檔案包含：js實作動态輪播特效, 點選事件等等(個别網頁中運用到js代碼)。

四、網站效果🌐

網站設計制作的重點是對網頁整體設計的布局和對網頁整體内容的選題。網站設計方面：計劃實作簡潔大氣的網頁設計效果。網站功能方面：計劃實作各個頁面之間的連結跳轉功能、滑鼠懸停在文字上的變色功能、簡單的首頁動态圖檔切換功能、簡單的表單送出功能。

html+css+javascript+jquery+bootstarp響應式旅行社旅遊平台網站模闆(14頁)

五、網站代碼制作部分 📕

(1)網站首頁布局确定好各個闆塊的内容，并使用了DIV+CSS布局。另外首頁使用到的知識主要有圖檔插入、圖檔動态切換、導覽列、利用CSS固定字型、文字大小、文字顔色、背景顔色。

(2)頁面使用了DIV+CSS布局，使用到的知識主要有圖檔插入、導覽列、利用CSS固定字型、文字大小、文字顔色、背景顔色。

(3)表單部分頁面使用了DIV+CSS布局，使用到的知識主要有運用了form表單、input文本框和input送出按鈕，完成表單資訊收集。利用CSS設定input送出按鈕文字大小和顔色。

HTML結構代碼🧱

<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="TravelStar - Tour, Travel, Travel Agency Template">
    <meta name="keywords" content="Tour, Travel, Travel Agency Template">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TravelStar - Tour, Travel & Travel Agency Template</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="css/assets/bootstrap.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="css/assets/animate.css">
    <!-- Button Hover animate css -->
    <link rel="stylesheet" href="css/assets/hover-min.css">
    <!-- jquery-ui.min css -->
    <link rel="stylesheet" href="css/assets/jquery-ui.min.css">
    <!-- meanmenu css -->
    <link rel="stylesheet" href="css/assets/meanmenu.min.css">
    <!-- owl.carousel css -->
    <link rel="stylesheet" href="css/assets/owl.carousel.min.css">
    <!-- slick css -->
    <link rel="stylesheet" href="css/assets/slick.css">
    <!-- chosen.min-->
    <link rel="stylesheet" href="css/assets/jquery-customselect.css">
    <!-- font-awesome css -->
    <link rel="stylesheet" href="css/assets/font-awesome.min.css">
    <!-- magnific Css -->
    <link rel="stylesheet" href="css/assets/magnific-popup.css">
    <!-- Revolution Slider -->
    <link rel="stylesheet" href="css/assets/revolution/layers.css">
    <link rel="stylesheet" href="css/assets/revolution/navigation.css">
    <link rel="stylesheet" href="css/assets/revolution/settings.css">
    <!-- Preloader css -->
    <link rel="stylesheet" href="css/assets/preloader.css"> 
    <!-- custome css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/master.css">
    <!-- modernizr css -->
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body> 
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
<!-- header area start here -->
<header>
   <div class="header_top_area">
      <div class="container">
         <div class="row">
            <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
               <div class="contact_wrapper_top">
                  <ul class="header_top_contact">
                     <li><i class="fa fa-phone" aria-hidden="true"></i>+123-456-7890</li>
                     <li><i class="fa fa-envelope-o" aria-hidden="true"></i>[email protected]</li>
                  </ul>
                  <div class="book-btn">
                     <a href="#">Book Now</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div> <!-- header top end -->

   <div class="main_nav">
      <div class="container">
         <div class="row">
            <div class="col-md-2 col-sm-2 col-xs-12 tap-v-responsive">
               <div class="logo-area">
                  <a href="index.html"><img src="images/logo.png" alt="">
                  </a>
               </div>
            </div>
            <div class="col-md-10">
               <nav>
                  <ul class="main-menu text-right">
                     <li class="active"><a href="index.html">Home</a>
                        <ul class="dropdown">
                           <li><a href="index.html">Home V1</a></li>
                           <li><a href="index-2.html">Home V2</a></li>
                           <li><a href="index-3.html">Home V3</a></li>
                           <li><a href="index-4.html">Home V4</a></li>
                        </ul>
                     </li>
                     <li><a href="package-version-one.html">Package List</a>
                        <ul class="dropdown">
                           <li><a href="package-version-one.html">Package One</a></li>
                           <li><a href="package-version-two.html">Package Two</a></li>
                           <li><a href="single-package.html">Package Details</a></li>
                        </ul>
                     </li>
                     <li><a href="hotel-version-one.html">Hotels</a>
                        <ul class="dropdown">
                           <li><a href="hotel-version-one.html">Hotel One</a></li>
                           <li><a href="hotel-version-two.html">Hotel Two</a></li>
                           <li><a href="hotel-details.html">Hotel Details</a></li>
                        </ul>
                     </li>
                     <li><a href="#">Flights</a></li>
                     <li><a href="blog-version-one.html">Blog</a>
                        <ul class="dropdown">
                           <li><a href="blog-version-one.html">Blog One</a></li>
                           <li><a href="blog-version-two.html">Blog Two</a></li>
                           <li><a href="blog-single.html">Blog Post</a></li>
                        </ul>
                     </li>
                     <li><a href="#">Pages</a>
                        <ul class="dropdown">
                           <li><a href="package-version-one.html">Package One</a></li>
                           <li><a href="package-version-two.html">Package Two</a></li>
                           <li><a href="single-package.html">single package</a></li>
                           <li><a href="hotel-version-one.html">Hotel One</a></li>
                           <li><a href="hotel-version-two.html">Hotel Two</a></li>
                           <li><a href="blog-version-one.html">Blog One</a></li>
                           <li><a href="hotel-version-two.html">Blog Two </a></li>
                           <li><a href="blog-single.html">Single Blog</a></li>
                           <li><a href="contact.html">Contact</a></li>
                        </ul>
                     </li>
                     <li><a href="contact.html">Contact</a></li>
                  </ul>
               </nav>
            </div> <!-- main menu end here -->
         </div>
      </div>
   </div> <!-- header-bottom area end here -->

   </div>
</html>

CSS樣式代碼🏡

.pt-100 {
  padding-top: 100px;
}
.pb-75 {
  padding-bottom: 75px;
}
.pb-65 {
  padding-bottom: 65px;
}
.pb-70 {
  padding-bottom: 70px;
}
.mbt-100 {
  margin-bottom: 45px;
}
.image-bg-padding-100 {
  padding: 100px 0;
}
.border-raduis-3 {
  border-radius: 3px;
}
.bg-f4f4f4 {
  background: #f4f4f4;
}
html,
body {
  height: 100%;
  font-family: 'Poppins', sans-serif;
}
body {
  position: relative;
}
.floatleft {
  float: left;
}
.floatright {
  float: right;
}
.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}
.aligncenter {
  display: block;
  margin: 0 auto 15px;
}
a:focus {
  outline: 0px solid;
}
img {
  max-width: 100%;
  height: auto;
}
.fix {
  overflow: hidden;
}
p {
  margin: 0 0 15px;
  font-size: 15px;
  color: #727272;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 10px;
  font-family: 'Poppins', sans-serif;
}
a {
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active,
a:hover {
  outline: 0 none;
}

html+css+javascript+jquery+bootstarp響應式旅行社旅遊平台網站模闆(14頁)

文章目錄🌰

一、網站題目👨‍🎓

二、網站描述✍️

三、網站介紹📖

四、網站效果🌐

五、網站代碼制作部分 📕

HTML結構代碼🧱

CSS樣式代碼🏡

六、遇到問題及如何解決🔍

七、實訓總結😊

繼續閱讀

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條