html旅遊網站設計與實作——綠色古典旅遊景區 HTML+CSS+JavaScript

👨‍🎓學生HTML靜态網頁基礎水準制作👩‍🎓，頁面排版幹淨簡潔。使用HTML+CSS頁面布局設計,web大學生網頁設計作業源碼，這是一個不錯的旅遊網頁制作，畫面精明，排版整潔，内容豐富，主題鮮明，非常适合初學者學習使用, 這個執行個體比較全面，有助于同學的學習,本文将介紹如何通過從頭開始設計個人網站并将其轉換為代碼的過程來實踐設計。

文章目錄🌰

一、網站題目👨‍🎓
二、網站描述✍️
三、網站介紹📖
四、網站效果🌐
五、網站代碼制作部分 📕

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旅遊網站設計與實作——綠色古典旅遊景區 HTML+CSS+JavaScript

五、網站代碼制作部分 📕

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

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

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

HTML結構代碼🧱

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/animate.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/banner.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("ul.nav li").hover(function () {
    $(this).find(".navtwo").toggle();
  })  
})
</script>
</head>

<body>
<div class="header">
  <ul class="nav">
    <li>
      <a href="index.html">首頁</a>
    </li>
    <li>
      <a href="about.html">景區概況</a>
    </li>
    <li>
      <a href="piclist.html">文苑之旅</a>
      <div class="navtwo">
        <a href="piclist.html">文苑之旅</a>
        <a href="piclist.html">文苑之旅</a>
        <a href="piclist.html">文苑之旅</a>
      </div>
    </li>
    <li>
      <a href="piclist.html">舒雅住宅</a>
    </li>
    <li>
      <a href="list.html">新聞動态</a>
      <div class="navtwo">
        <a href="list.html">公司新聞</a>
        <a href="list.html">行業新聞</a>
      </div>
    </li>
    <li>
      <a href="about.html">聯系我們</a>
    </li>
  </ul>
</div>
<div class="clear"></div>
<div class="banner">
  <div class="b-img">
      <img src="images/banner1.jpg" width="100%"/>
      <img src="images/banner1.jpg" width="100%" />
  </div>
  <div class="clear"></div>
  <div class="b-list"> </div>
</div>
<div class="clear"></div>
<div class="part1">
  <div class="main">
    <div class="contitbox">
      <p><a href="about.html" class="ccsl">景區概況</a></p>
      <span class="ccsl">SCENIC OVERVIEW</span>
    </div>
    <div class="conbox">
      石家莊飛天益遊天下旅行社有限公司是首批專注于精品民宿的新型創業連鎖平台。<br>公司成立于2017年2月，注冊資金1000萬元。益遊使命在于構築"萬衆創新、大衆創業"的新型平台，建立一個為曆史和未來負責的、"留得住濃濃的鄉愁"的城鎮化村落服務體系，<br>為中國城鎮化程序中的美麗鄉村建設貢獻一份力量。
    </div>
    <div class="morebox">
      <span class="img"></span>
    </div>
  </div>
</div>
<div class="clear"></div>
<div class="part2">
  <div class="contitbox">
    <p><a href="piclist.html" class="ccsl">文苑之旅</a></p>
    <span class="ccsl">COURT TRAVEL</span>
  </div>
  <ul>
    <li>
      <div class="kug"></div>
      <div class="proimg">
        <a href="picdetail.html"><img src="images/1.png" /></a>
      </div>
      <a href="picdetail.html"><p class="ccsl">萬竹林海(一)</p></a>
    </li>
    <li>
      <div class="kug"></div>
      <div class="proimg">
        <a href="picdetail.html"><img src="images/1.png" /></a>
      </div>
      <a href="picdetail.html"><p class="ccsl">萬竹林海(一)</p></a>
    </li>
    <li>
      <div class="kug"></div>
      <div class="proimg">
        <a href="picdetail.html"><img src="images/1.png" /></a>
      </div>
      <a href="picdetail.html"><p class="ccsl">萬竹林海(一)</p></a>
    </li>
  </ul>
</div>
<div class="clear"></div>
<div class="part3">
  <div class="contitbox">
    <p><a href="piclist.html" class="ccsl">舒雅住宅</a></p>
    <span class="ccsl">COURT TRAVEL</span>
  </div>
  <div class="p3con">
    <div class="p3conL">
      <div class="subBox0">
        <ul style="margin-left: 0px; overflow: hidden">
          <li><a href="picdetail.html"><img src="images/2.png" /></a></li>
          <li><a href="picdetail.html"><img src="images/2.png" /></a></li>
          <li><a href="picdetail.html"><img src="images/2.png" /></a></li>
        </ul>
      </div>
    </div>
    <div class="p3conR">
      <img src="images/3.png" />
      <div class="tit ccsl">客 | 房 | 介 | 紹</div>
      <div class="sub">桃花林苑中有各式客房100套,房型分為中式、現代兩個類型,以滿足客人的不同需求…</div>
      <div class="updowm">
        <p class="up">上一個</p>
        <p class="down">下一個</p>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $(function () {
        var left = $(".up");
        var right = $(".down");
        var obj = $(".subBox0 ul");
        var w = obj.find("li").innerWidth();

        left.click(function () {
            obj.find("li:last").prependTo(obj);
            obj.css("margin-left", -w);
            obj.animate({ "margin-left": 0 });
        });

        right.click(function () {
            obj.animate({ "margin-left": -w }, function () {
                obj.find("li:first").appendTo(obj);
                obj.css("margin-left", "0");
            });
        });
        var moving = setInterval(function () { right.click() }, 3000);
        obj.hover(function () {
            clearInterval(moving);
        }, function () {
            moving = setInterval(function () { right.click() }, 3000);
        })
    });
   </script>
   <div class="morebox">
    <span class="img"></span>
   </div>
</div>
<div class="clear"></div>
<div class="part4">
  <div class="main">
    <div class="contitbox">
      <p><a href="list.html" class="ccsl">新聞動态</a></p>
      <span class="ccsl">NEWS</span>
    </div>
    <ul>
      <li>
        <div class="newl">
          <a href="detail.html" class="ccsl">暑假去哪玩？桃花苑天地避暑甚好！</a>
          <div class="sub">暑期近在眼前，還在猶豫帶孩子去哪兒玩嗎？炎熱的夏天，一顆躁動的心，背上收拾好的背包，走遍大好河山感受大千世界，還不如隐房間外桃源桃花苑天地精品。少一些城市的喧嚣，回歸大自然的清新脫俗，來一場說走就走的夏日之旅吧。</div>
        </div>
        <div class="newr">
          <span>07.21</span>
          <time>2016</time>
        </div>
        <div class="clear"></div>
      </li>
      <li>
        <div class="newl">
          <a href="detail.html" class="ccsl">暑假去哪玩？桃花苑天地避暑甚好！</a>
          <div class="sub">暑期近在眼前，還在猶豫帶孩子去哪兒玩嗎？炎熱的夏天，一顆躁動的心，背上收拾好的背包，走遍大好河山感受大千世界，還不如隐房間外桃源桃花苑天地精品。少一些城市的喧嚣，回歸大自然的清新脫俗，來一場說走就走的夏日之旅吧。</div>
        </div>
        <div class="newr">
          <span>07.21</span>
          <time>2016</time>
        </div>
        <div class="clear"></div>
      </li>
      <li>
        <div class="newl">
          <a href="detail.html" class="ccsl">暑假去哪玩？桃花苑天地避暑甚好！</a>
          <div class="sub">暑期近在眼前，還在猶豫帶孩子去哪兒玩嗎？炎熱的夏天，一顆躁動的心，背上收拾好的背包，走遍大好河山感受大千世界，還不如隐房間外桃源桃花苑天地精品。少一些城市的喧嚣，回歸大自然的清新脫俗，來一場說走就走的夏日之旅吧。</div>
        </div>
        <div class="newr">
          <span>07.21</span>
          <time>2016</time>
        </div>
        <div class="clear"></div>
      </li>
      <li>
        <div class="newl">
          <a href="detail.html" class="ccsl">暑假去哪玩？桃花苑天地避暑甚好！</a>
          <div class="sub">暑期近在眼前，還在猶豫帶孩子去哪兒玩嗎？炎熱的夏天，一顆躁動的心，背上收拾好的背包，走遍大好河山感受大千世界，還不如隐房間外桃源桃花苑天地精品。少一些城市的喧嚣，回歸大自然的清新脫俗，來一場說走就走的夏日之旅吧。</div>
        </div>
        <div class="newr">
          <span>07.21</span>
          <time>2016</time>
        </div>
        <div class="clear"></div>
      </li>
    </ul>
    <div class="more2">
      <a href="list.html">MORE</a>
    </div>
  </div>
</div>
<div class="clear"></div>
<div class="footer">
  <div class="main">
    <div class="foot">
      <div class="fnav">
        <a href="index.html">首頁</a>
        <a href="about.html">景區概況</a>
        <a href="piclist.html">文苑之旅</a>
        <a href="piclist.html">舒雅住宅</a>
        <a href="list.html">新聞動态</a>
        <a href="about.html">聯系我們</a>
      </div>
      <div class="clear"></div>
      <div class="fot">
        <div>電話：0311-12345678<br />郵箱：[email protected]<br />手機：123 4560 7890<br />位址：河北省石家莊市裕華區西灣子鎮旅遊商貿新區勝利大街香雪A區11号 </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

CSS樣式代碼🏡

.part3{ width:1200px; margin:0 auto; overflow:hidden; padding-top:30px}
.p3con{ width:1200px; height:450px; overflow:hidden; background:#81a849}
.p3con .p3conL{ width:900px; height:450px; float:left; overflow:hidden}
.subBox0 ul {width:100000px;margin:0;padding:0;}
.subBox0 ul li {width:900px;height:450px;float: left;display:inline;}
.subBox0 ul li img{width:900px; height:450px;}
.p3con .p3conR{ width:230px; padding:0 35px; height:450px; float:right; overflow:hidden}
.p3con .p3conR img{ display:block; margin:0 auto; margin-top:60px; width:67px; height:67px; overflow:hidden}
.p3con .p3conR .tit{ text-align:center;font-size: 18px;color: #fff; margin: 25px auto;}
.p3con .p3conR .sub{border-top: 1px solid #c0d4a4;border-bottom: 1px solid #c0d4a4;padding: 20px 18px;line-height: 20px;color: #fff;max-height: 142px;overflow: hidden;}
.p3con .p3conR .updowm{width:230px;font-size: 14px;color: #fff;margin-top: 20px;}
.p3con .p3conR .updowm .up{background: url(../images/left.png) no-repeat left;padding-left: 10px;float: left; cursor:pointer}
.p3con .p3conR .updowm .down{padding-right: 10px;background: url(../images/right.png) no-repeat right;float: right; cursor:pointer}


.part4{width:100%; min-width:1200px; background:#fff; overflow:hidden}
.part4 ul{ overflow:hidden;}
.part4 ul li{background: #f8f8f8; padding: 20px 20px;cursor: pointer;margin-bottom: 30px;transition: all 0.5s;}
.part4 ul li .newl{ float:left; width:900px; height:98px; overflow:hidden}
.part4 ul li .newl a{color: #4c4c4c;font-size: 16px;font-weight: bold;overflow: hidden;width: 95%;display: block;margin-bottom: 15px;height: 25px;line-height: 25px;}
.part4 ul li .newl .sub{font-size: 14px;color: #666666;line-height: 24px;width: 95%;max-height:50px;overflow: hidden;}
.part4 ul li .newr{ float:right;border-left: 1px solid #cccccc; width:255px;height:98px; overflow:hidden;color: #e0e0e0;font-family: arial; background:url(../images/icon.png) center right no-repeat}
.part4 ul li .newr span{font-size: 42px;display: block;line-height: 45px; text-align:right; padding-right:60px}
.part4 ul li .newr time{font-size: 18px; text-align:right; display:block; padding-right:60px}
.part4 ul li:hover{background: #81a849;}
.part4 ul li:hover .newl a{ color:#fff}
.part4 ul li:hover .newl .sub{color: #dee7d4;}
.part4 ul li:hover .newr{border-left: 1px solid #9ab96d;background: url(../images/icon2.png) no-repeat right;color: #c6d7b3;}
.part4 ul li:hover .newr span{ color:#fff}

.more2{ width: 57px;height: 57px;margin:0 auto; margin-bottom: 30px;}
.more2 a{width: 57px;height: 57px;display: block;background: url(../images/more.png) no-repeat;color: #4f8320;font-size: 12px;line-height: 57px;text-align: center;margin: auto;cursor: pointer;}
.more2 a:hover{font-weight: bold;}



.footer{width:100%; min-width:1200px;background: url(../images/fbg.png) no-repeat; background-size:100% 100%;overflow: hidden;padding-bottom: 40px;}
.footer .foot{margin: 60px auto 20px;background: #ffffff;padding: 10px;border: 1px solid #f7f5ee;}
.footer .foot .fnav{width: 60%;margin:0 auto; padding-top:60px}
.footer .foot .fnav a{ display:inline-block;float: left;width:100px;background: url(../images/navbg.png) no-repeat right;text-align: center; line-height: 30px;font-size: 14px; color:#666;}
.footer .foot .fot{ padding-bottom:60px; padding-top:15px;width: 60%;margin:0 auto;color: #999999;font-size: 14px;text-align: center;line-height: 26px;}


.brandnav{ width:1200px; margin:0 auto; height:35px; overflow:hidden;line-height: 35px;color: #999999;font-size: 14px;}
.brandnav .con{ max-width:1200px; height:35px; float:right; overflow:hidden}

.typebox{ width:1200px; margin:0 auto; padding-top:10px;background: url(../images/line.png) repeat-x bottom;text-align: center; padding-bottom:25px}
.typebox a{display: inline-block;font-size: 14px;color: #666;line-height: 35px;margin: auto 25px;}
.typebox a:hover{ background:url(../images/typebg.png) no-repeat}

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

實訓中遇到得困難不少，比如如何收集适合網頁的圖檔素材、如何讓網頁的配色看着更自然更舒适、如何用PS裁剪大小合适的圖檔、以及制作表單時候如何設計等等，最後，通過上網查詢和請教别人得到了很好的解決。

七、實訓總結😊

通過這次網頁設計制作實訓，能夠靈活的運用到所學的知識和技巧制作簡單的網頁，掌握了個人網站建設的技巧和基本網站建設的過程。對于用Dreamweaver、vscode、hbuider等制作網頁更為得心應手。實訓過程中我盡量充分利用老師教過的知識，對所學知識進行了鞏固。為了制作出更好的效果我也翻閱參考了其他資料，學習到了更多的網頁處理技巧。制作網頁的過程中遇到很多的問題，通過查找資料或詢問同學都有得到解決。這次綜合實訓我的收獲很大，學有所用，在實踐的過程中學習鞏固對知識能有更深的記憶。網頁制作是一門很實用的學科，值得我以後進行更深入的學習。這次實訓中我也體會到了自己掌握的技巧太少了，以至于很多想法都沒能實作，在以後的學習過程中我要對網頁制作有更深的了解，做出更為成熟的網頁。

八、更多幹貨🎁

1.如果我的部落格對你有幫助、如果你喜歡我的部落格内容，

請 “👍點贊” “✍️評論” “💙收藏”

一鍵三連哦！

❤️【👇🏻👇🏻👇🏻關注我| 擷取更多源碼 | 優質文章】

帶您學習各種前端插件、3D炫酷效果、圖檔展示、文字效果、以及整站模闆、大學生畢業HTML模闆、期末大作業模闆、等! 「在這裡有好多前端開發者，一起探讨前端 Node 知識，互相學習」！

html旅遊網站設計與實作——綠色古典旅遊景區 HTML+CSS+JavaScript

文章目錄🌰

一、網站題目👨‍🎓

二、網站描述✍️

三、網站介紹📖

四、網站效果🌐

五、網站代碼制作部分 📕

HTML結構代碼🧱

CSS樣式代碼🏡

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

七、實訓總結😊

八、更多幹貨🎁

繼續閱讀

Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動

HTML addEventListener() 方法和attachEvent()差別分析

web前端布局練手項目

Django之驗證碼（十七）驗證碼

Vue項目 - 單檔案元件和Vue中的路由

龍珠訓練營task04

趕工心得（一）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

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