HTML5期末大作业：我的家乡网站设计4
生活随笔
收集整理的這篇文章主要介紹了
HTML5期末大作业：我的家乡网站设计4
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如下代碼供學習交流，獲取完整代碼，請關注文后二維碼（coding加油站）回復家鄉4免費獲取。
1.網頁作品簡介 ：
HTML期末大學生網頁設計作業，可以替換文字圖片滿足不同的家鄉，根據百度百科的信息來替換就是自己的家鄉了
2.知識應用：
在操作方面上運用了html5和css3，采用了div+css結構、表單、超鏈接、浮動、絕對定位、相對定位、字體樣式、引用視頻等基礎知識
3. 內容介紹：
《我的家鄉》共有5個頁面，分別為
Index.html【首頁】
首頁主要使用hover來實現一些動畫，主要是輪播圖的使用（沒有使用插件，適合學習輪播圖的原理），以及常用布局的使用，效果圖如下：
?全部代碼：
<!DOCTYPE html><html><head><title>汕尾游</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><script src="./js/index.js"></script></head><body><div class="header"><div class="wrap"><div class="logo"><a href="index.html"><img src="images/logo.png" title="logo" /></a></div><div class="top-nav"><ul><li class="active"><a href="index.html">主 頁</a></li><li><a href="scenic.html">景 點</a></li><li><a href="cate.html">美 食</a></li><li><a href="gewu.html">歌 舞</a></li><li><a href="video.html">更 多</a></li></ul></div><div class="clear"> </div></div></div><div id="container"><div id="list" style="left: -600px;"><img class="img" src="images/4s.jpg" alt="4"><img class="img" src="images/1f.jpg" alt="1"><img class="img" src="images/2h.jpg" alt="2"><img class="img" src="images/3r.jpg" alt="3"><img class="img" src="images/4s.jpg" alt="4"><img class="img" src="images/1f.jpg" alt="1"><div class="mask"></div></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span></div><a href="javascript:;" id="prev" class="arrow"></a><a href="javascript:;" id="next" class="arrow"></a></div> <div class="clear"> </div> <div class="content"><div class="content_top"><div class="wrap"><h1><a href="video.html">汕尾市</a></h1><p>位于廣東省東南部，是一座沿海城市，漁業發達，水產豐富。氣候條件溫和，冬暖夏涼。這座城市有著悠久的歷史文化，據東南沿海出土文物考證，最早在新石器時代就有先民在此漁獵種植，生息繁衍。汕尾是閩南文化、潮汕文化、客家文化、廣府文化交匯地，有正字戲、西秦戲、白字戲等3大稀有劇種。在飲食上，汕尾市傳統小吃品種眾多且家喻戶曉、遠近聞名，比如牛肉餅、冬節鴿、豬腸粉、、菜茶、咸茶、扁食等等。在近代，汕尾是一片紅色故土、革命老區。是全國十三塊紅色革命根據地之一，中國第一個縣級蘇維埃政權誕生地。全市4個縣（市、區）均為一類革命老區縣，有著極為濃厚的紅色氣息。</p></div></div><div class="content-grids"><div class="content-grid"><img class="pic" src="images/map.gif" title="汕尾地圖" /><h2 class="text">地理位置</h2><p>汕尾市，位于廣東省東南部沿海，東臨揭陽市，同惠來縣交界；西連惠州市，與惠東縣接壤；北接河源市，和紫金縣相連；南瀕南海。下轄城區、海豐縣、陸河縣，代管陸豐市。</p></div><div class="content-grid"><img src="images/jiaot.jpg" title="交通運輸" /><h2 class="text">交通運輸</h2><p>國家高速公路G15沈海高速公路即深汕高速公路貫穿市域東西。廈深鐵路汕尾段共設有陸豐站，汕尾站，鲘門站。這是汕尾歷史上首條鐵路。城內有多條公交車路線。</p></div><div class="content-grid con-grid"><img src="images/pengp.jpg" title="名人事跡" /><h2 class="text">名人事跡</h2> <p>汕尾是許多名人偉人的故鄉，其就包括彭湃，中國無產階級革命家，中國農民運動大王。黨早期農民運動領導人之一。彭士祿，海豐人，核動力專家，彭湃之子，第一完成人獲“國家科技進步特等獎”。</p></div><div class="clear"> </div><div class="imgrid"><div class="content-heading"><h3>旅 游 攻 略</h3></div><div class="content-grid"><a href="scenic.html"><img class="pic" src="images/xuanw.jpg" title="旅游景點" /><h1 class="text">旅游景點</h1></a><p>汕尾市有著許多風景優美的景點，包括汕尾鳳山祖廟旅游區、紅海灣旅游區、蓮花山旅游風景區、海豐紅宮紅場、陸豐金廂灘濱海景區、陸河綠色生態走廊景區、陸河神象山公園、陸豐清云山景區、陸河瑞龍莊園。</p></div><div class="content-grid"><a href="cate.html"><img src="images/xioac.jpg" title="美味小吃" /><h1 class="text">美味小吃</h1></a><p>民以食為天，汕尾的美食小吃豐富多樣，傳統小吃更是家喻戶曉、遠近聞名，比如小米、牛肉餅、菜粿（菜包粿）、韭菜餃、冬節鴿、豬腸粉、層糕粿、菜茶、咸茶、扁食等等。</p></div><div class="content-grid con-grid"><a href="gewu.html"><img src="images/qilw.jpg" title="歌舞文化" /><h1 class="text">歌舞文化</h1></a><p>汕汕尾是閩南文化、潮汕文化、客家文化、廣府文化交匯地，有正字戲、西秦戲、白字戲等3大稀有劇種，另外還有汕尾漁歌、海豐麒麟舞、錢鼓舞、河田高景、陸豐甲子英歌舞、汕尾滾地金龍等文化。</p></div><div class="clear"> </div></div><div class="clear"> </div></div> </div><div class="footer"><div class="footer-heading"></div><div class="footer-grid">你的學校 你的班級</div></div></body></html>scenic.html【景點頁】
景點頁主要介紹家鄉的景點，使用錨點技術實現跳轉，同時增加多個輪播圖效果，效果圖如下：
?核心代碼：
<div class="scenic-heading"><h3>風 景 名 勝</h3></div><div class="scenic-content"><div class="scrnic-menu"><ul><li class="bsolid"><a href="#">頂部</a></li><li class="bsolid"><a href="#pic">紅宮紅場</a></li><li class="bsolid"><a href="#pic1">鳳山媽祖</a></li><li class="bsolid"><a href="#pic2">蓮花山</a></li><li><a href="#pic3">紅海灣</a></li></ul> </div><div class="clear"></div><div class="scenic-right"><div class="box"><p id="num" class="num">1/5</p><form><img src="images/h1.jpg" id="pic"><input type="button" value="上一張" id="forward"><input type="button" value="下一張" id="next0"> </form></div><p class="scenic-text"><span>紅宮</span>位于海豐縣紅宮紅場舊址，原為明代學宮，建于明洪武十二年，由南海豐知縣鄭源所建。紅宮現存面積1850平方米，主要建筑有欞星門、泮橋泮池、大成門、大成殿和配殿。1927年，海豐人民在彭湃的領導下舉行了第三次武裝起義，武裝奪取政權。同年11月在這里召開了海豐全縣工農兵代表大會，大會會場四周都刷以紅色，場內則用紅布覆蓋墻壁，代表紅色政權，從此改稱“紅宮”。</p><div class="box"><p id="num1" class="num">1/5</p><form><img src="images/f1.jpg" id="pic1"><input type="button" value="上一張" id="forward1"><input type="button" value="下一張" id="next1"> </form></div><p class="scenic-text"><span>鳳山祖廟</span>旅游區位于汕尾市區東南面，是粵東旅游黃金海岸的主要景點。鳳山雖不高，但以形似一鳳凰展翅而得名。鳳儀臺媽祖石像高達16.83米，由468塊來自媽祖家鄉的優質花崗巖石雕刻而成，是中國目前最大型的媽祖藝術石雕像。站在鳳儀臺，汕尾市區“三山一湖”湖光山色盡收眼底，遠望汕尾港舟楫如梭，水天一色。鳳山媽祖廟正殿是旅游區的主要建筑，正殿為三進二院布局，面闊三間，風火式山墻，硬山頂，稱為“雙星抱印，龍虎相護”，屬正三山傳統廟宇建筑。還有著媽祖圣跡館、天后閣、漁家風情館、媽祖文化廣場等壯麗風光。</p><div class="box"><p id="num2" class="num">1/5</p><form><img src="images/l1.jpg" id="pic2"><input type="button" value="上一張" id="forward2"><input type="button" value="下一張" id="next2"> </form></div><p class="scenic-text"><span>汕尾蓮花山森林公園</span>位于廣東省汕尾市海豐縣北部7公里處，主峰海拔1337.3米，汕尾市八景之一，為粵東沿海第一高峰，狀如一朵盛開的蓮花，故名蓮花山。開發有蓮花山公園。森林公園方圓8萬畝，其間崇山峻嶺，峰巒疊秀，峰奇石異，林青水綠，鳥語花香，景色宜人。至于海拔1336米的蓮花山脈主峰，更是游人登高賞景之佳處。這個風景區以雞鳴寺為中心，在5公里的半徑范圍內，有金雞報曉、玉龍噴須、如來盤石、三井回音等10多處名勝古跡。再往西側有五馬歸槽、浦仔溫泉；再往東即有水庫煙波、獼猴奇石、灣廊溫泉；再往北便有紅軍石室、三坑匯水；再往南尚有把水神宮等。</p><div class="box"><p id="num3" class="num">1/5</p><form><img src="images/w1.jpg" id="pic3"><input type="button" value="上一張" id="forward3"><input type="button" value="下一張" id="next3"> </form></div><p class="scenic-textf"><span>紅海灣</span>即汕尾紅海灣遮浪半島旅游區，位于汕尾市區以東18公里處，灣內有多處潔白柔軟的沙灘，還有神秘島、龜齡島等數個秀麗的島嶼。距汕尾市區約30公里的遮浪半島現已建成紅海灣濱海旅游度假區，島上有海上運動俱樂部，是著名的帆船帆板賽場。夏天旅游必到之處。</p></div></div>cate.html【美食頁】
美食頁主要介紹家鄉美食，符合我的家鄉的場景主題設置，為簡單html中的布局，效果圖如下：
核心代碼：
?
<div class="catef"><div class="cate-text"><p>TOP 1</p>腸粉： 用米漿蒸熟后形成的皮，再自主選擇加入什么肉類，有牛肉、豬肉、海鮮，一般豬肉是最普遍的，配菜有白菜，筍絲，生菜，一般白菜最常搭配。再加入每家店都有著不同口味的醬汁，有蠔油、芝麻醬，一般芝麻醬居多，一些傳統老店的自制醬汁配上白嫩嫩的腸粉，更是視覺和味覺上的雙重享受。</div><img src="images/changf.jpg" title="腸粉"><div class="clear"> </div></div><div class="catef"><div class="cate-text"><p>TOP 2</p>鹵味： 鹵味之中有鹵鵝、鹵鴨、鹵豬腳、鹵五花肉、鹵雞腳等等，鹵味在汕尾也是不同店有著不同口味，但大體上都有一個鹵汁的香味，另外有的偏甜，有的偏咸香,一些店家只做鹵味，而有一些店家是做鹵肉飯，當一勺鹵汁淋在米飯上，配上鹵肉，美味至極。</div><img src="images/luwei.jpg" title="鹵味"><div class="clear"> </div></div><div class="catef"><div class="cate-text"><p>TOP 3</p>蠔烙： 準備新鮮的生蠔加上雞蛋和蔥花以及地瓜粉，蔥切末，雞蛋攪散加入生蠔肉、蔥花、鹽、雞精攪拌均勻。鍋中倒油，豬油都要用本地豬的鬃頭肉煎出來的豬油，倒入蛋液，煎至兩面金黃即可出鍋。具有特別鮮美的蠔香味，口感酥而不硬，脆而不軟。</div><img src="images/hao.jpg" title="蠔烙"><div class="clear"> </div></div><div class="catef"><div class="cate-text"><p>TOP 4</p>菜包粿： 從前，到了農歷的大年三十，家家戶戶都做了招待客人，由此祝愿一年四季五谷豐登，菜包粿現在已經成為海豐地區街頭巷尾常見的一種小吃，通常用作午餐。皮用生粉開水和成，餡料可用當季蔬菜、豬肉、魷魚、蝦米、花生等。包成長條的形狀，蒸熟，皮軟糯餡咸香。</div><img src="images/xioac.jpg" title="菜包粿"><div class="clear"> </div></div><div class="catef"><div class="cate-text"><p>TOP 5</p>蘿卜丸： 又名菜頭丸， 用煎炒而成，在現在的潮汕三市與 汕尾市等地區的早點、油炸攤都有售賣、是逢年過節家家必備的食品。主料是蘿卜絲和蝦米以及面粉，外表晶瑩剔透，極富彈性和嚼勁，味道也清甜甘香，有祛火除痰，消食開胃的功效。</div><img src="images/caitou.jpg" title="蘿卜丸"><div class="clear"> </div></div> <div class="catet"><div class="cate-text"><p>TOP 6</p>擂茶：是汕尾的午餐特色！當地人每家每戶都會做，當地也有一些咸茶鋪。 擂茶做法很費時，先把黑芝麻去殼，用手在牙缽里轉圈，再用水過濾！接著再把花生用擂槌（很沉的石槌）磨碎，沖入水，過濾渣再和各類的青草磨碎，濾渣煮水。通常還會再炒一個香菜，或荷蘭豆或絲瓜，搭配上炒米。</div><img src="images/leic.jpg" title="擂茶"><div class="clear"> </div></div></div>gewu.html【歌舞界面】
歌舞界面主要是展示的家鄉中的歌舞等風俗文化，可以修改為相關的家鄉的風俗，效果圖如下：
核心代碼：
<div class="gewu-content"><div class="gewuf"><div class="gewu-text gewu-right"><span>正字戲 </span>本名正音戲，用中州官話唱念，是一個多聲腔的古老稀有劇種。正字戲表演風格古樸、氣魄宏大，特別擅長連臺本戲。正字戲設12個行當，以正音曲和昆腔為主要聲腔，分文戲和武戲。文戲的唱腔比較古老，以曲牌體的正音曲（大板曲）、唱牌子（即昆腔）為主，雜以亂彈、小調等。正音曲受弋陽腔、余姚腔、青陽腔、四平腔等四種腔調影響，一唱眾和，多滾白、滾唱。武戲以做工尤其是打斗為主，沒有或少有唱腔，分為大傳戲、小傳戲、本頭和錦出四類。正字戲的昆腔，可以因劇目的同一首曲牌在不同角色的演唱中，以及在不同劇目或同一劇目的不同場次中，形成不同的情境。2006年5月20日，正字戲經中華人民共和國國務院批準列入第一批國家級非物質文化遺產名錄。</div><img src="images/zxi.jpg" title="正字戲" class="gewu-left"><div class="clear"> </div></div><div class="gewuf"><div class="gewu-text gewu-left"><span>汕尾滾地金龍 </span>是一種廣東省汕尾市民間舞蹈?[1]??，屬于龍舞的一種，適合在節日喜慶場合表演，2006年5月被國家批準為非物質文化遺產。汕尾滾地金表情豐富、套路眾多、舞段精彩、技藝兼善是這個舞蹈的基本特點。滾地金龍體現了龍能剛能柔，善靜善動，能顯能藏，自強不息的積極進取精神。“滾地金龍”始創于南宋，明嘉靖年間，黃氏光昭公一支從福建漳州移居廣東陸豐大安鎮南溪村，帶來《滾地金龍演史傳》的傳本。</div><img src="images/long.jpg" title="汕尾滾地金龍" class="gewu-right"><div class="clear"> </div></div><div class="gewuf"><div class="gewu-text gewu-right"><span>獨角麒麟舞 </span>至今為止還保留傳統的表演方式，通常以農村的曬場、空地為表演場所，由一人舞動麒麟頭、一人牽動麒麟尾。在大鼓、大鑼、大镲、大嗩吶的伴奏下，開始舞動麒麟，先朝天參拜三下（一拜天，祝風調雨順，二拜地，祝五谷豐登，三拜人，祝健康平安），接著繞圓場和朝場地四個角落覓食，此時嗩吶吹奏《吃四門》，然后在場地中間舞弄，表演出打滾、舐腳、洗須、咬騷等風趣動作及喜怒哀樂的情緒。</div><img src="images/qlinwu.jpg" title="獨角麒麟舞" class="gewu-left"><div class="clear"> </div></div><div class="gewuf"><div class="gewu-text gewu-left"><span>英歌舞 </span>是漢族獨具男子群體舞風采的3種民間舞蹈之一，它以人物為主題，以《水滸傳》中梁山泊英雄大破大名府，營救盧俊義故事為內容的群眾性廣場情景舞，是一種把武術、舞蹈、戲劇融為一體的民間娛樂形式。被認為具有驅鬼神、鎮邪惡、保平安、求福祉的作用，每逢春節、元宵、游神賽會等日子各地紛紛組織英歌舞排練及表演，已成為人們節日生活休閑娛樂健身的一種方式。</div><img src="images/jiazi.jpg" title="英歌舞" class="gewu-right"><div class="clear"> </div></div></div>?適合大多數我的家鄉標題的作業，通過百度百科的簡介修改，即可完成該作業，免費獲取代碼關注公眾號（coding加油站）回復家鄉4領取。
總結
以上是生活随笔為你收集整理的HTML5期末大作业：我的家乡网站设计4的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vijos P1304回文数
- 下一篇： 163接收邮件服务器pop3,pop3设