當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript
生活随笔
收集整理的這篇文章主要介紹了
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
👨?🎓學生HTML靜態網頁基礎水平制作👩?🎓，頁面排版干凈簡潔。使用HTML+CSS頁面布局設計,web大學生網頁設計作業源碼，這是一個不錯的旅游網頁制作，畫面精明，排版整潔，內容豐富，主題鮮明，非常適合初學者學習使用, 這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網站并將其轉換為代碼的過程來實踐設計。
🏀 精彩專欄推薦👇🏻👇🏻👇🏻
💝 【作者主頁——🔥獲取更多優質源碼】
💝 【web前端期末大作業——🔥🔥畢設項目精品實戰案例(1000套)】
文章目錄🌰
- 一、網站題目👨?🎓
- 二、網站描述??
- 三、網站介紹📖
- 四、網站效果🌐
- 五、網站代碼制作部分 📕
- 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代碼）。
四、網站效果🌐
網站設計制作的重點是對網頁整體設計的布局和對網頁整體內容的選題。
網站設計方面：計劃實現簡潔大氣的網頁設計效果。
網站功能方面：計劃實現各個頁面之間的鏈接跳轉功能、鼠標懸停在文字上的變色功能、簡單的首頁動態圖片切換功能、簡單的表單提交功能。
五、網站代碼制作部分 📕
（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 />郵箱：123.sjz@456.com<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.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.??【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題😈歡迎一起交流學習👇🏻👇🏻👇🏻🔥
總結
以上是生活随笔為你收集整理的html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（3298）：effect的练习
- 下一篇： JS中变量和函数的使用