javascript
一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)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> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>山河旅行社</title><link rel="stylesheet" href="css/style.css"> </head> <body> <header id="header"><div class="center"><h1 class="logo">山河旅行社</h1><nav class="link" ><h2 style="display:none;">網站導航</h2><ul><li class="active"><a href="###">首頁</a></li><li><a href="information.html"><span class="xs-hidden">旅游</span>資訊</a></li><li><a href="ticket.html">機票<span class="xs-hidden">訂購</span></a></li><li class="xs-hidden"><a href="scenery.html">風景欣賞</a></li><li><a href="about.html"><span class="xs-hidden">關于</span>公司</a></li></ul></nav></div> </header> <div id="adver"><img src="picture/adver.jpg" alt=""><div class="center"></div><div class="center copy"><input type="text" class="search" placeholder="請輸入旅游景點或城市"><button class="button">搜索</button></div> </div> <div id="tour"><section class="center "><h2>熱門旅游</h2><p>國內旅游，國外旅游、自助旅游、自駕旅游、游輪簽證、主題旅游等各種最新熱門旅游推介</p></section><figure><img src="picture/tour1.png" alt=""><figcaption><div class="tour_title"><strong><曼谷-芭提雅6日游></strong> 包團特惠，超豐富景點，升級1晚國五，無自費，更贈送600元成人資費券</div><div class="info"><em class="sat">滿意度97%</em><span class="price"> ￥<strong> 2864</strong> 起</span></div><div class="type">國內長線</div></figcaption></figure><figure><img src="picture/tour2.png" alt=""><figcaption><div class="tour_title"><strong><曼谷-芭提雅6日游></strong> 包團特惠，超豐富景點，升級1晚國五，無自費，更贈送600元成人資費券</div><div class="info"><em class="sat">滿意度97%</em><span class="price"> ￥<strong> 2864</strong> 起</span></div><div class="type">國內長線</div></figcaption></figure><figure><img src="picture/tour3.png" alt=""><figcaption><div class="tour_title"><strong><曼谷-芭提雅6日游></strong> 包團特惠，超豐富景點，升級1晚國五，無自費，更贈送600元成人資費券</div><div class="info"><em class="sat">滿意度97%</em><span class="price"> ￥<strong> 2864</strong> 起</span></div><div class="type">國內長線</div></figcaption></figure><figure><img src="picture/tour4.png" alt=""><figcaption><div class="tour_title"><strong><曼谷-芭提雅6日游></strong> 包團特惠，超豐富景點，升級1晚國五，無自費，更贈送600元成人資費券</div><div class="info"><em class="sat">滿意度97%</em><span class="price"> ￥<strong> 2864</strong> 起</span></div><div class="type">國內長線</div></figcaption></figure><figure><img src="picture/tour5.png" alt=""><figcaption><div class="tour_title"><strong><曼谷-芭提雅6日游></strong> 包團特惠，超豐富景點，升級1晚國五，無自費，更贈送600元成人資費券</div><div class="info"><em class="sat">滿意度97%</em><span class="price"> ￥<strong> 2864</strong> 起</span></div><div class="type">國內長線</div></figcaption> </figure><figure><img src="picture/tour6.png" alt=""><figcaption><div class="tour_title"><strong><曼谷-芭提雅6日游></strong> 包團特惠，超豐富景點，升級1晚國五，無自費，更贈送600元成人資費券</div><div class="info"><em class="sat">滿意度97%</em><span class="price"> ￥<strong> 2864</strong> 起</span></div><div class="type">國內長線</div></figcaption></figure><figure><img src="picture/tour7.png" alt=""><figcaption><div class="tour_title"><strong><曼谷-芭提雅6日游></strong> 包團特惠，超豐富景點，升級1晚國五，無自費，更贈送600元成人資費券</div><div class="info"><em class="sat">滿意度97%</em><span class="price"> ￥<strong> 2864</strong> 起</span></div><div class="type">國內長線</div></figcaption></figure><figure><img src="picture/tour8.png" alt=""><figcaption><div class="tour_title"><strong><曼谷-芭提雅6日游></strong> 包團特惠，超豐富景點，升級1晚國五，無自費，更贈送600元成人資費券</div><div class="info"><em class="sat">滿意度97%</em><span class="price"> ￥<strong> 2864</strong> 起</span></div><div class="type">國內長線</div></figcaption></figure><figure><img src="picture/tour9.png" alt=""><figcaption><div class="tour_title"><strong><曼谷-芭提雅6日游></strong> 包團特惠，超豐富景點，升級1晚國五，無自費，更贈送600元成人資費券</div><div class="info"><em class="sat">滿意度97%</em><span class="price"> ￥<strong> 2864</strong> 起</span></div><div class="type">國內長線</div></figcaption></figure> </div> <footer id="footer"><div class="top sm-hidden"><div class="block left"><h2>合作伙伴</h2><hr><ul class="ul"><li>途牛旅游網</li><li>驢媽媽旅游網</li><li>攜程旅游</li><li>中國青年旅社</li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul class="ul"><li>旅游合同簽訂方式？</li><li>兒童價是基于什么制定的？</li><li>旅游的線路品質是怎么界定的？</li><li>旅游保險有些什么種類？</li></ul></div><div class="block right"><h2>聯系方式</h2><hr><ul class="ul"><li>微博：weibo.com/maodo</li><li>郵件：sh@maodou.com</li><li>地址：西安市雁塔區123號</li></ul></div></div><div class="chearfix"></div><div class="version sm-visible">客戶端 | 觸屏版 | 電腦版</div><div class="bottom">Copyright ? SHMD 山河旅行社| 陜ICP 備120110119 號<span class="sm-hidden">| 旅行社經營許可證：L-SH-BK12345</span></div> </footer></body> </html>CSS樣式代碼🏡
@charset "utf-8"; body,h1,h2 ,h3,h4,ul,ol,p,form,fieldset,figure{margin:0;padding:0; } body{background-color: #fff;font-family: "Helvetica Neue",Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; } img{display:block;max-width:100%; } ul,ol{list-style:outside none none; } a{text-decoration:none; } div,figure,img,input,button{box-sizing:border-box; } #headline img{width:100%; } .none {display: none; } .sm-visible{display:none; } .clearfix:after{content:'.';height:0;visibility:hidden;display:block;clear:both; } #header{width:100%;height:70px;background-color:#333;box-shadow: 0 1px 10px rgba(0 ,0 ,0,0.3);position:fixed;top:0;z-index:9999; } #header .center{max-width:1263px;height:70px;margin:0 auto; } #header .logo{width:30%;height:70px;background:url(../images/logo.png) no-repeat left center;text-indent:-9999px;float:left; } #header .link{width:55%;height:70px;line-height:70px;color:#aaaaaa;float:right; } #header .link li{width:20%;text-align:center;float:left; } #header .link a {color:#eeeeee;display: block; } #header .link a:hover, #header .active a{background-color:#000; }#adver{padding:70px 0 0 0;max-width:1920px;margin:0 auto;position:relative; } #adver .center{width:40%;height:60px;background-color:#000000;position:absolute;top:50%;left:50%;margin:-10px 0 0 -20%;opacity:0.6;border-radius: 10px; }六、遇到問題及如何解決🔍
實訓中遇到得困難不少，比如如何收集適合網頁的圖片素材、如何讓網頁的配色看著更自然更舒適、如何用PS裁剪大小合適的圖片、以及制作表單時候如何設計等等，最后，通過上網查詢和請教別人得到了很好的解決。
七、實訓總結😊
通過這次網頁設計制作實訓，能夠靈活的運用到所學的知識和技巧制作簡單的網頁，掌握了個人網站建設的技巧和基本網站建設的過程。對于用Dreamweaver、vscode、hbuider等制作網頁更為得心應手。實訓過程中我盡量充分利用老師教過的知識，對所學知識進行了鞏固。為了制作出更好的效果我也翻閱參考了其他資料，學習到了更多的網頁處理技巧。制作網頁的過程中遇到很多的問題，通過查找資料或詢問同學都有得到解決。這次綜合實訓我的收獲很大，學有所用，在實踐的過程中學習鞏固對知識能有更深的記憶。網頁制作是一門很實用的學科，值得我以后進行更深入的學習。這次實訓中我也體會到了自己掌握的技巧太少了，以至于很多想法都沒能實現，在以后的學習過程中我要對網頁制作有更深的了解，做出更為成熟的網頁。
八、更多干貨🎁
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.??【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題😈歡迎一起交流學習👇🏻👇🏻👇🏻🔥
總結
以上是生活随笔為你收集整理的一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华师本科网络英语 计算机统考,2020华
- 下一篇： 【精】18款在线网页SVG编辑器