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

HTML

HTML+CSS静态页面网页设计作业：我的家乡网站设计——我的家乡-莆仙(6页)

發布時間：2024/8/1 HTML 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS静态页面网页设计作业：我的家乡网站设计——我的家乡-莆仙(6页) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML5期末大作業：我的家鄉網站設計——我的家鄉-莆仙(6頁)

常見網頁設計作業題材有個人、美食、公司、學校、旅游、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、明星、服裝、體育、化妝品、物流、環保、書籍、婚紗、軍事、游戲、節日、戒煙、電影、攝影、文化、家鄉、鮮花、禮品、汽車、其他等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求, 喜歡的可以下載!

獲取更多源碼

PC電腦端關注我們

🧡作者主頁-更多源碼

🧡HTML期末大作業文章專欄

作品介紹

1.網頁作品簡介 ：HTML期末大學生網頁設計作業 A+水平 ,喜歡的可以下載，文章頁支持手機PC響應式布局。

2.網頁作品編輯：作品下載后可使用任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML軟件編輯修改網頁）。

3.網頁作品技術：Div+CSS、鼠標滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，視頻、音頻元素、Flash，同時設計了logo（源文件），基本期末作業所需的知識點全覆蓋。

文章目錄

HTML5期末大作業：我的家鄉網站設計——我的家鄉-莆仙(6頁)
獲取更多源碼
作品介紹
一、作品展示
二、文件目錄
三、代碼實現
四、獲取更多源碼
五、學習資料
六、更多源碼

一、作品展示

二、文件目錄

三、代碼實現

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"><title>首頁</title><link rel="stylesheet" href="library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"><link rel="stylesheet" href="library/css/bootstrap.min.css"><link rel="shortcut icon" href="xy_favicon.ico"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css"> </head><body><script src="library/jquery-1.11.1/jquery-1.11.1.min.js"></script><script src="library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script><script src="library/js/bootstrap.min.js"></script><div class="container"><div data-role="header"><div data-role="navbar"><ul><li class="active"><a href="index.html" data-ajax="false" class="ui-icon-home ui-btn-icon-top"><span class="hidden-xs">首頁</span></a></li><li><a href="food.html" data-ajax="false" class="ui-icon-heart ui-btn-icon-top"><span class="hidden-xs">美食</span></a></li><li><a href="spor.html" data-ajax="false" class="ui-icon-location ui-btn-icon-top"><span class="hidden-xs">景區</span></a></li><li><a href="culture.html" data-ajax="false" class="ui-icon-refresh ui-btn-icon-top"><span class="hidden-xs">文化</span></a></li><li><a href="contact.html" data-ajax="false" class="ui-icon-mail ui-btn-icon-top ui-btn ui-btn-inline ui-corner-all ui-shadow"><span class="hidden-xs">信息登記</span></a></li></ul></div></div><div class="main"><div class="row"><div class="banner col-md-1 col-sm-1 col-xs-1"><img src="images/banner.jpeg" alt="" class=" visible-lg visible-md"></div></div><div class="row sv_nav clearfix" data-role="controlgroup" data-type="horizontal"><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#book" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/book.jpg" alt="" class="img-thumbnail"><p class="text-muted">購票</p></a><div data-role="popup" id="book" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>莆田購票務</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="time">發車日期:</label><input type="date" name="time" id="time"><label for="site">起止站點:</label><input type="text" name="site" id="site"><label for="money">單張票價:</label><input type="text" name="money" id="money"><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><label for="id">身份證件</label><input type="text" name="id" id="id"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>莆田購票務系統</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#hotel" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/hotel.jpg" alt="" class="img-thumbnail"><p class="text-muted">旅館</p></a><div data-role="popup" id="hotel" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>訂房</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="startime">開始住宿:</label><input type="date" name="startime" id="startime"><label for="endtime">結束住宿:</label><input type="date" name="endtime" id="endtime"><label for="room">房間號:</label><input type="text" name="room" id="room"><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><label for="id">身份證件</label><input type="text" name="id" id="id"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>訂房系統</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#tour_guide" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/tour_guide.png" alt="" class="img-thumbnail"><p class="text-muted">導游</p></a><div data-role="popup" id="tour_guide" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>導游</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="startime">開始時間:</label><input type="date" name="startime" id="startime"><label for="endtime">結束時間:</label><input type="date" name="endtime" id="endtime"><label for="tour_guide">選擇導游:</label><div class="ui-field-contain"><select name="select-native-1" id="select-native-1" data-iconpos="left"><option value="1">請選擇導游</option><option value="2">李導</option><option value="3">陳導</option><option value="4">張導</option></select></div><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>導游系統</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#shop" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/shop.jpg" alt="" class="img-thumbnail"><p class="text-muted">購物</p></a><div data-role="popup" id="shop" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>購物</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><label>菜類</label><div class="ui-field-contain"><select name="select-native-1" id="select-native-1" data-iconpos="left"><option value="1">請選擇菜品</option><option value="2">包菜</option><option value="3">西紅柿</option><option value="4">青菜</option></select></div><label for="map">配送地址:</label><input type="text" name="map" id="map"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>購物系統</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#take_out" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/take_out.png" alt="" class="img-thumbnail"><p class="text-muted">外賣</p></a><div data-role="popup" id="take_out" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>外賣</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="room">房間號:</label><input type="text" name="room" id="room"><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><label>美食</label><div class="ui-field-contain"><select name="select-native-1" id="select-native-1" data-iconpos="left"><option value="1">請選擇菜品</option><option value="2">漢堡</option><option value="3">可樂</option><option value="4">卷</option></select></div><label for="map">配送地址:</label><input type="text" name="map" id="map"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>外賣系統</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#vip" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/vip.png" alt="" class="img-thumbnail"><p class="text-muted">vip</p></a><div data-role="popup" id="vip" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>vip</h1></div><div data-role="main" class="ui-content vip"><form method="post" action="#"><img src="images/vip.png" alt="" class="img-thumbnail"><label>開通時長</label><div class="ui-field-contain"><select name="select-native-1" id="select-native-1" data-iconpos="left"><option value="1">請選擇時長</option><option value="2">1個月/30元</option><option value="3">3個月/90元</option><option value="4">12個月/360元</option></select></div><label for="phone">電話:</label><input type="text" name="phone" id="phone"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>開通VIP服務</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div></div><div class="news"><a class="row"><div class="col-md-9"><h3>翡翠媽祖安座古田天后宮</h3><p class="text-muted">2020-12-15 09:25 莆田網</p><p class="text-info hidden-xs">這尊翡翠媽祖，由中華媽祖文化交流協會副會長、上海玉成天賜有限責任公司董事長趙柳成先生捐贈。中華媽祖文化交流協會副會長、湄洲媽祖祖廟董事長林金贊到古田天后宮安排分靈安座有關信俗事宜。</p><p class="text-muted">湄洲日報蘇麗彬</p></div><div class="col-md-3"><img src="images/later.jpeg" alt="" class="img-thumbnail hidden-sm hidden-xs"></div></a><a class="row"><div class="col-md-9"><h3>莆田文峰宮為貧困大學生頒發助學金</h3><p class="text-muted">2020-12-15 09:25 莆田網</p><p class="text-info hidden-xs">莆田網訊 12月8日，莆田文峰天后宮董事長陳鷺玲走進莆田學院，為該院17名品學兼優的家庭經濟困難學生頒發“2020-2021學年文峰天后宮助學金”，每人獲助2000元，共計34000元。這是2015年以來莆田文峰天后宮連續第6年為該學院學生頒發助學金。</p><p class="text-muted">湄洲日報記者鄭已東</p></div><div class="col-md-3"><img src="images/wenfeng.jpg" alt="" class="img-thumbnail hidden-sm hidden-xs"></div></a><a class="row"><div class="col-md-9"><h3>跨越海峽兩岸的媽祖情緣</h3><p class="text-muted">2020-12-15 09:24 莆田網</p><p class="text-info hidden-xs">自兩岸開放探親以來，臺灣媽祖分靈廟源源不斷地組團來湄洲媽祖祖廟謁祖進香，掀起天下媽祖回娘家的熱潮。這份起始于鄉愁，寄托于媽祖的“火熱情感”并沒有隨時間冷卻，反而在時光輪轉中愈發凝實，蘊藏著沖破時間和空間的力量，幾十年一直如此。</p><p class="text-muted">湄洲日報周建國文/圖</p></div><div class="col-md-3"><img src="images/love.jpg" alt="" class="img-thumbnail hidden-sm hidden-xs"></div></a></div></div></div><div data-role="footer"><h1>版權?安諾</h1></div> </body></html>

四、獲取更多源碼

PC電腦端關注我們

五、學習資料

web前端零基礎-入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站

六、更多源碼

HTML5期末考核大作業源碼* 包含個人、美食、公司、學校、旅游、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、明星、服裝、體育、化妝品、物流、環保、書籍、婚紗、軍事、游戲、節日、戒煙、電影、攝影、文化、家鄉、鮮花、禮品、汽車、其他可滿足大學生網頁大作業網頁設計需求, 喜歡的可以下載!

總結

以上是生活随笔為你收集整理的HTML+CSS静态页面网页设计作业：我的家乡网站设计——我的家乡-莆仙(6页)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：绝版| 张小龙《微信背后的产品观》纸质书
下一篇： Dreamweaver网页课设做家乡网站