當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Web前端大作业——城旅游景点介绍(HTML+CSS+JavaScript) html旅游网站设计与实现

發布時間：2023/12/18 javascript 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web前端大作业——城旅游景点介绍(HTML+CSS+JavaScript) html旅游网站设计与实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

👨?🎓學生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><title>游記</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/amazeui.js"></script><link rel="stylesheet" type="text/css" href="css/amazeui.css"><link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body>  <div id="toolbar"><div class="cw1200"><ul class="fl"><li class="tb"><p>您好，歡迎訪問XXX文化旅游網！</p></li><li class="tb"><a href="login.html">登錄</a><span>|</span></li><li class="tb"><a href="register.html">注冊</a></li></ul><ul class="fr"><li class="tb"><a href="#">我的XXX</a><div class="user"><a class="user-hd" href="#"><img src="images/user_head_pic.jpg"/><b></b><div class="clear"></div></a><div class="user-bd"><div class="integral"><img src="images/integral_ico.png"/>當前積分 609</div><ul class="nav_sort"><li><a href="my_index.html"><i class="i1"></i>我的主頁</a></li><li><a href="write_note.html"><i class="i2"></i>寫游記</a></li><li><a href="my_note.html"><i class="i9"></i>我的游記</a></li><li><a href="collection_list.html"><i class="i3"></i>我的收藏</a></li><li><a href="project_order.html"><i class="i4"></i>商品訂單</a></li><li><a href="scenic_order.html"><i class="i5"></i>旅游訂單</a></li><li><a href="note_comments.html"><i class="i6"></i>我的評論</a></li><li><a href="my_info.html"><i class="i7"></i>設置</a></li><li><a href="#"><i class="i8"></i>退出</a></li></ul></div></div><span>|</span></li><li class="tb"><a href="shop_car.html"><i class="cart_ico"></i>購物車</a><span>|</span></li><li class="tb"><a href="news_list.html">用戶幫助中心</a><span>|</span></li><li class="tb"><img src="images/tel_ico.gif"/><font>40000-40000</font></li></ul><div class="clear"></div></div> </div>  <div id="header"><div class="cw1200"><div class="logo fl"><a href="index.html"><img src="images/t_logo.jpg"></a></div><div class="search_nav fl"><div class="search radius6"><form name="searchform" method="post" action="/e/search/index.php"><input name='ecmsfrom' type='hidden' value='9'><input type="hidden" name="show" value="title,newstext"><select name="classid" id="choose"><option value="0">景區</option><option value="1">特產</option><option value="4">游記</option><option value="22">文章</option></select> <input class="inp_srh" name="keyboard" placeholder="請輸入您要搜索的關鍵詞" ><input class="btn_srh" type="submit" name="submit" value="搜索"></form></div><script type="text/javascript" src="js/jquery.select.js"></script><div class="nav"><ul><li><a href="index.html">首頁</a></li><li><a href="scenic_list.html">孟津旅游</a></li><li><a href="mall_list.html">特產商城</a></li><li><a class="cur" href="note_list.html">美麗鄉村</a></li><li><a href="news_list.html">新聞資訊</a></li></ul></div></div><div class="clear"></div></div> </div>  <div id="note_head"><div class="head"><div class="banner"><img src="images/DD0E49BD-47F5-4B10-85DB-FE2390B91541.jpg"/></div><div class="title"><div class="cw1200"><p>孟津田間山野，一次放飛心靈的休閑體驗...</p></div><span><img src="images/eye_ico.png"/>999+</span></div></div><div class="user"><div class="cw1200"><div class="pic"><img src="images/head1.jpg"/></div><div class="meta"><label>作者：A monologue. 獨白。</label><span>發布于：2017-02-02 00:25</span></div><div class="operation"><a href="#"><img src="images/favour_ico.png"/><p>50個贊</p></a><a href="#"><img src="images/collection_ico.png"/><p>21個收藏</p></a></div></div></div></div> <div id="sub_from"><div class="cw1200"><div class="w810 fl"><div class="public_box bg1"><div class="public_title"><div class="fl"><img src="images/from_title_left.png"/></div><div class="con"><div class="lamp_ico"><img src="images/lamp_ico.png"/></div><div class="name"><img src="images/f_t_article.png"/></div></div><div class="fr"><img src="images/from_title_right.png"/></div><div class="clear"></div></div><div id="article"><div class="con"><p>日前，記者從市旅發委獲悉，我市旅游資源規劃開發質量等級評定委員會通過現場檢查、達標審核、集體研究等程序，經公示無異議后，確定我市新安函谷關景區、伊川鶴鳴峽風景區、嵩縣石頭部落景區、東方紅工業游景區4家景區為國家3A級旅游景區。</p><p>至此，我市國家A級旅游景區數量已增至45家。其中，國家5A級旅游景區5家，國家4A級旅游景區18家，國家3A級旅游景區17家，國家2A級旅游景區5家。</p><p>另悉，嵩縣白云小鎮景區也有望獲批國家3A級旅游景區，目前正在公示(2月4日至9日)。待公示結束，我市國家A級旅游景區數量將達到46家。</p><img src="images/10F118AC-FE28-4986-A6D0-B9E739F8CFDC.jpg"/><p>日前，記者從市旅發委獲悉，我市旅游資源規劃開發質量等級評定委員會通過現場檢查、達標審核、集體研究等程序，經公示無異議后，確定我市新安函谷關景區、伊川鶴鳴峽風景區、嵩縣石頭部落景區、東方紅工業游景區4家景區為國家3A級旅游景區。</p><img src="images/1470142217075p1ap5krur5imd15qq1ims12ojghn2.jpg"/><p>至此，我市國家A級旅游景區數量已增至45家。其中，國家5A級旅游景區5家，國家4A級旅游景區18家，國家3A級旅游景區17家，國家2A級旅游景區5家。</p><p>另悉，嵩縣白云小鎮景區也有望獲批國家3A級旅游景區，目前正在公示(2月4日至9日)。待公示結束，我市國家A級旅游景區數量將達到46家。</p><img src="images/DD0E49BD-47F5-4B10-85DB-FE2390B91541.jpg"/><p>市旅發委產業促進科科長趙暉表示，我市國家3A級景區隊伍的壯大，將進一步提升我市旅游業發展的核心競爭力，提高我市旅游產業經濟效益，促進我市旅游業轉型升級，為洛陽市發展全域旅游及創建國際文化旅游名城提供強大支撐。(金曦林琳)(2月4日至9日)。待公示結束，我市國家A級旅游景區數量將達到46家。</p></div></div></div><div class="public_box bg1"><div class="public_title"><div class="fl"><img src="images/from_title_left.png"/></div><div class="con"><div class="lamp_ico"><img src="images/lamp_ico.png"/></div><div class="name"><img src="images/f_t_comment.png"/></div></div><div class="fr"><img src="images/from_title_right.png"/></div><div class="clear"></div></div><div id="comment"><div class="release"><img src="images/head1.jpg"/><input class="text" type="text" placeholder="說說你的看法..."/><input class="submit" type="submit" value="發表"/><div class="clear"></div></div><div class="list"><div class="tag"><a class="cur" href="#">最新評論</a><span>|</span><a href="#">正序排列</a></div><ul><li><div class="pic"><img src="images/head1.jpg"/></div><div class="con"><label>A monologue. 獨白。</label><p>非常好</p><span>發表于：2017-02-05 14:20</span></div><div class="tip"><span>5#</span></div></li><li><div class="pic"><img src="images/head1.jpg"/></div><div class="con"><label>A monologue. 獨白。</label><p>非常好</p><span>發表于：2017-02-05 14:20</span></div><div class="tip"><span>4#</span></div></li><li><div class="pic"><img src="images/head1.jpg"/></div><div class="con"><label>A monologue. 獨白。</label><p>非常好</p><span>發表于：2017-02-05 14:20</span></div><div class="tip"><span class="t_c t_box">地板</span></div></li><li><div class="pic"><img src="images/head1.jpg"/></div><div class="con"><label>A monologue. 獨白。</label><p>非常好</p><span>發表于：2017-02-05 14:20</span></div><div class="tip"><span class="t_b t_box">板凳</span></div></li><li><div class="pic"><img src="images/head1.jpg"/></div><div class="con"><label>A monologue. 獨白。</label><p>非常好</p><span>發表于：2017-02-05 14:20</span></div><div class="tip"><span class="t_a t_box">沙發</span></div></li></ul></div></div></div></div><div class="w380 fr"><div class="public_box bg2"><div class="public_title"><div class="fl"><img src="images/from_title_left.png"/></div><div class="con"><div class="lamp_ico"><img src="images/lamp_ico.png"/></div><div class="name"><img src="images/f_t_other_share.png"/></div><div class="more"><a href="note_list.html">更多>></a></div></div><div class="fr"><img src="images/from_title_right.png"/></div><div class="clear"></div></div><div id="other_share"><ul><li><div class="pic"><div class="cover"><a href="note.html"><img class="scale-effect " src="images/1458530382234p1aebir9i21s4q2hiiso1ip6msf29.jpg"/></a></div><div class="head"><img src="images/head1.jpg"/></div></div><div class="meta"><p><a href="note.html">洛陽，歷史長河中的一處停歇</a></p><span>作者：A monologue. 獨白。<label><img src="images/state_icon1.png"/>18</label><label><img src="images/state_icon2.png"/>20</label></span></div></li><li><div class="pic"><div class="cover"><a href="note.html"><img class="scale-effect " src="images/10F118AC-FE28-4986-A6D0-B9E739F8CFDC.jpg"/></a></div><div class="head"><img src="images/head1.jpg"/></div></div><div class="meta"><p><a href="note.html">洛陽，歷史長河中的一處停歇</a></p><span>作者：A monologue. 獨白。<label><img src="images/state_icon1.png"/>18</label><label><img src="images/state_icon2.png"/>20</label></span></div></li><li><div class="pic"><div class="cover"><a href="note.html"><img class="scale-effect " src="images/10F118AC-FE28-4986-A6D0-B9E739F8CFDC.jpg"/></a></div><div class="head"><img src="images/head1.jpg"/></div></div><div class="meta"><p><a href="note.html">洛陽，歷史長河中的一處停歇</a></p><span>作者：A monologue. 獨白。<label><img src="images/state_icon1.png"/>18</label><label><img src="images/state_icon2.png"/>20</label></span></div></li><li><div class="pic"><div class="cover"><a href="note.html"><img class="scale-effect " src="images/10F118AC-FE28-4986-A6D0-B9E739F8CFDC.jpg"/></a></div><div class="head"><img src="images/head1.jpg"/></div></div><div class="meta"><p><a href="note.html">洛陽，歷史長河中的一處停歇</a></p><span>作者：A monologue. 獨白。<label><img src="images/state_icon1.png"/>18</label><label><img src="images/state_icon2.png"/>20</label></span></div></li><li><div class="pic"><div class="cover"><a href="note.html"><img class="scale-effect " src="images/10F118AC-FE28-4986-A6D0-B9E739F8CFDC.jpg"/></a></div><div class="head"><img src="images/head1.jpg"/></div></div><div class="meta"><p><a href="note.html">洛陽，歷史長河中的一處停歇</a></p><span>作者：A monologue. 獨白。<label><img src="images/state_icon1.png"/>18</label><label><img src="images/state_icon2.png"/>20</label></span></div></li><li><div class="pic"><div class="cover"><a href="note.html"><img class="scale-effect " src="images/10F118AC-FE28-4986-A6D0-B9E739F8CFDC.jpg"/></a></div><div class="head"><img src="images/head1.jpg"/></div></div><div class="meta"><p><a href="note.html">洛陽，歷史長河中的一處停歇</a></p><span>作者：A monologue. 獨白。<label><img src="images/state_icon1.png"/>18</label><label><img src="images/state_icon2.png"/>20</label></span></div></li></ul></div></div></div><div class="clear"></div></div> </div> <div id="footer"><div class="cw1200"><div class="line"><img src="images/b_line.png"/></div><div class="b_logo"><img src="images/b_logo.png"/></div><div class="con"><p>XXX文化旅游發展有限公司版權所有</p><p>地址：XXX　郵編：471000　電話：0379-60000000　業務電話：0379-6000000</p><p>Copyright 2020 All Rights Reserved | 豫ICP備XXX號　技術支持：XXX</p></div><div class="clear"></div></div> </div> </body> </html>

CSS樣式代碼🏡

@charset "utf-8"; html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, code, em, img, q, small, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, table, tbody, tr, th, td, input {margin:0;padding:0;} a{font-weight:400;color:#333;} a:hover{color:#f60;} li{list-style:none;} .clear{clear:both;} html{width:100%;} body{width:100%;min-width:1280px;} .clear{clear:both;} .cw1200{width:1200px;margin:0 auto;} .w810{width:810px;} .w380{width:380px;} .fr{float:right;} .fl{float:left;} /*--------------二維碼看手機-----------------*/ #phone_rwm{width:166px;height:286px;text-align:center;background:url(../images/phone_icon.png) no-repeat;position:fixed;z-index:9999;bottom:30%;right:2%;} #phone_rwm img{width:140px;height:140px;margin-top:42px;} /*-----------------放大圖片----------------*/ .scale-effect{transition:All 0.2s ease-in-out;-webkit-transition:All 0.2s ease-in-out;-moz-transition:All 0.2s ease-in-out;-o-transition:All 0.2s ease-in-out;} .scale-effect:hover{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);} /*-----------------工具欄----------------*/ #toolbar{height:30px;line-height:30px;border-bottom:1px solid #ddd;} #toolbar .tb{float:left;height:30px;} #toolbar .tb p{margin-right:10px;font-size:12px;} #toolbar .tb a{font-size:12px;} #toolbar .tb span{padding:0 10px;color:#ccc;} #toolbar .tb img{margin-right:5px;} #toolbar .tb font{font-size:12px;}

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

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

七、實訓總結😊

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

八、更多干貨🎁

1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

2.??【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、期末大作業模板、等! 「在這里有好多前端開發者，一起探討前端 Node 知識，互相學習」！

3.以上內容技術相關問題😈歡迎一起交流學習👇🏻👇🏻👇🏻🔥

總結

以上是生活随笔為你收集整理的Web前端大作业——城旅游景点介绍(HTML+CSS+JavaScript) html旅游网站设计与实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： AMR文件结构
下一篇： Spring IoC容器设计原理及高级特