如下代碼供學習交流，獲取完整代碼，請關注文后二維碼（coding加油站）回復家鄉2免費獲取。

1.網頁作品簡介 ：

HTML期末大學生網頁設計作業，可以替換文字圖片滿足不同的家鄉，根據百度百科的信息來替換就是自己的家鄉了

2.知識應用：

在操作方面上運用了html5和css3，采用了div+css結構、表單、超鏈接、浮動、絕對定位、相對定位、字體樣式、引用視頻等基礎知識

3. 內容介紹：

《我的家鄉》共有5個頁面，分別為

index.html【首頁】

該頁面引用了超鏈接、div盒子、浮動等，主要是展示家鄉的風景，特色等，如下是效果圖：

下面是核心代碼區域：

<header class="container-fluid"><div class="row"><img src="img/bg02.png" class="img-fluid" alt="Responsive image"></div><div class="row"><div class="col-lg-12"><nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#" style="margin-left: 50px; margin-top: 5px"><h2>湖北 · 宜昌</h2></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item food"><a class="nav-link" href="food.html">特色美食</a></li><li class="nav-item culture"><a class="nav-link" href="culturalConstruct.html">歷史文化</a></li><li class="nav-item culture"><a class="nav-link" href="landscapeAppreciate.html">風景欣賞</a></li><li class="nav-item culture"><a class="nav-link" href="MessageBoard.html">留言板</a></li></ul><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search"><button class="btn btn-primary " type="submit">搜索</button></form></div></nav></div></div></header> <div class="container-fluid"><div class="row"><div class="container-fluid "><div class="bg bg-blur"></div><div class="content-front"><div class="jumbotron-fluid"><div class="container mid" ><div class="row"><h1 class="display-4 cityIntro" >城市介紹·宜昌</h1></div><div class="row"><div class="col-lg-6"><p class="lead introWords">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宜昌古稱夷陵，因“水至此而夷、山至此而陵”得名，清朝時取“宜于昌盛”之意改稱“宜昌”，是屈原、嫘祖、王昭君、楊守敬等歷史名人的故里。宜昌是長江三峽起始地、三峽工程所在地，擁有水電站468座（含三峽大壩、葛洲壩），以全國0.2%的土地裝備了全國7%的水電裝機容量</div><div class="col-lg-6 introImg"><img src="img/img01.png" class="introImg shadow-lg p-0 mb-2 rounded" ></div></div></div></div></div></div></div><div class="row"><div class="container-fluid "><div class="bg2 bg-blur"></div><div class="content-front"><div class="jumbotron-fluid"><div class="container mid" ><div class="row"style="margin-left: 650px"><h1 class="display-4 cityIntro">地理環境·宜昌</h1></div><div class="row"><div class="col-lg-6 introImg"><div class="row" style="margin-top: 10px"><img src="img/img03.png" class="introImg shadow-lg p-0 mb-2 rounded" ></div><div class="row" style="margin-top: 60px"><img src="img/img02.png" class="introImg shadow-lg p-0 mb-2 rounded" ></div></div><div class="col-lg-6"><h4 style="margin-top: 30px; margin-left: 60px">地形地貌：</h4><p class="lead introWords" style="margin-left: 60px">宜昌市位于湖北省西南部，地處長江上游與中游的結合部、鄂西武陵山脈和秦巴山脈向江漢平原的過渡地帶，“上控巴蜀，下引荊襄”。地跨東經110°15'～112°04'、北緯29°56'～31°34'之間，東西最大橫距174.08千米，南北最大縱距180.6千米。東鄰荊州市和荊門市，南抵湖南省石門縣，西接恩施土家族苗族自治州，北靠神農架林區和襄陽市。</p><h4 style="margin-top: 30px; margin-left: 60px">水文：</h4><p class="lead introWords" style="margin-left: 60px">宜昌市河流均屬長江流域的長江上游干流水系、長江中游干流水系、清江水系、洞庭湖區的四口水系及澧水水系等五大水系。以長江干流為主脈，河流多、密度大、水量豐富。據全國水利普查調查，宜昌市集水面積在50平方千米以上135條，在境內的集水面積占全市總面積的91.5%，河網密度0.24千米/平方千米。河流集水面積大于1000平方千米，長度大于100千米以上河流主要有長江、清江、沮漳河、黃柏河、漁洋河等。</p><h4 style="margin-top: 30px; margin-left: 60px" style="margin-left: 60px">氣候：</h4><p class="lead introWords" style="margin-left: 60px">宜昌位于中亞熱帶與北亞熱帶的過渡地帶，屬亞熱帶季風性濕潤氣候。有四季分明，水熱同季，寒旱同季的氣候特征。多年平均降水量1215.6毫米。平均氣溫16.9攝氏度，極端最高溫度41.4攝氏度（7月），極端最低溫度零下9.8攝氏度（元月）。年平均大于10度的活動積溫5200攝氏度以上，持續天數達250天。無霜期250～300天，年平均輻射量100.7千卡每平方厘米，年平均日照時數1538～1883小時，日照率40%。 </p></div></div></div></div></div></div></div><div class="row"><div class="container-fluid "><div class="bg3 bg-blur"></div><div class="content-front"><div class="jumbotron-fluid"><div class="container mid" ><div class="row" ><h1 class="display-4 cityIntro">人口民族·宜昌</h1></div><div class="row"><div class="col-lg-6"><h4 style="margin-top: 105px">人口：</h4><p class="lead introWords">2020年末全市戶籍人口為389.90萬人。全年出生人口2.45萬人，出生率為6.3‰；死亡人口2.65萬人，死亡率為6.8‰；自然增長率為-0.5‰。</p><h4 style="margin-top: 50px">民族：</h4><p class="lead introWords">宜昌是一個多民族地區，除漢族以外，有瑤、壯等48個少數民族，少數民族人口63.0867萬，占全市總人口10%。</p></div><div class="col-lg-6 introImg"><img src="img/img04.png" class="introImg shadow-lg p-0 mb-2 rounded" style="margin-top: 90px" ></div></div></div></div></div></div></div> </div>

Food.html【家鄉美食介紹】

核心代碼如下：

<div class="container-fluid"><div class="bg bg-blur"></div><div class="bg2 bg-blur"></div><div class="row content-front"><div class="col-lg-12 "><div style="margin-top: 130px; margin-left: 100px; color: gainsboro"><h1 class="display-1">特色美食</h1><p class="lead" style="font-size: larger ; margin-top: 20px ">characteristic and delicious Food</p><hr class="my-4"><p>永州，為瀟、湘二水匯合處，獨特的地理環境，造就了永州豐富多樣的特色美食</p></div></div></div><div class="row content-front2"><div class="col-lg-12" style="margin-top: 900px"><img src="img/img05.png" class="img-fluid shadow-lg p-0 mb-2 rounded" alt="Responsive image" style="width: 700px; height=450px"><div class="col-lg-6" style="margin-left: 380px; margin-top: 20px"><h3 style="margin-top: 20px">永州血鴨</h3><p class="lead" >永州血鴨是湖南永州的一款地方傳統名菜。永州血鴨分為多種，有江永，道縣，新田、寧遠、藍山、東安、雙牌等多個說法。在當地，幾乎家家戶戶都會制作此菜。具有美味、開胃涼血的特點。</p></div></div></div><div class="row content-front2"><div class="col-lg-12" style="margin-top: 1600px"><img src="img/img06.png" class="img-fluid shadow-lg p-0 mb-2 rounded" alt="Responsive image" style="width: 700px; height: 450px;"><h3 style="margin-top: 20px">祁陽米粉</h3><div class="col-lg-6" style="margin-left: 380px; margin-top: 20px"><p class="lead">祁陽米粉又稱文明米粉，是湖南古城祁陽的傳統小吃。因其明末清初始創于該縣文明鋪地方而得名。在原料選用、粉絲制作和粉湯配制等方面，均有其獨特的技巧和講究。用來榨粉的原料，必須是優質稻米，以新谷新米為佳。粉湯是用新鮮豬骨頭燉出來的，猛火燒開，文火燉爛，把粘附在骨頭上的肉燉化，把骨頭里面的髓燉溶，再加佐料。</p><a class="btn btn-primary" href="index.html" style="margin-top: 30px;;">回到首頁</a></div></div></div> </div>

culturalConstruct.html【歷史文化界面】

該頁面使用全局背景圖，介紹家鄉歷史，同時使用單獨的card頁面展示不同的歷史介紹，如下是效果圖：

?核心代碼：

<style>.bg {background: url('img/bg17.jpg');height:800px;text-align: center;line-height: 800px;}.bg2 {background: url('img/bg20.jpeg');height:1730px;text-align: center;line-height: 1600px;}.bg-blur {float: left;width: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;-webkit-filter: blur(15px);-moz-filter: blur(15px);-o-filter: blur(15px);-ms-filter: blur(15px);filter: blur(15px);}.content-front {position:absolute;left: 10px;right: 10px;height:600px;text-align: center;}</style></head> <body> <div class="container-fluid"><div class="bg bg-blur"></div><div class="bg2 bg-blur"></div><div class="row content-front"><div class="col-lg-12 "><div style="margin-top: 200px; color: honeydew"><h1 class="display-4">千年歷史文化名城，湖南省永州市</h1><p class="lead"></p><br><hr class="my-4"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-"><p class="lead">永州，古稱“零陵”，為瀟、湘二水匯合處，也稱“瀟湘”。永州市歷史悠久，自公元前124年始置泉陵侯國以來，至今已有2100多年的建制史。永州在隋朝以前稱零陵。零陵得名于舜葬九嶷。《史記、五帝本紀》載，舜“南巡狩，崩于蒼梧之野，葬于江南九嶷，是為零陵”。零陵在夏代屬荊州之域，春秋戰國時屬楚國南境，秦時屬長沙郡。</p></div></div></div></div></div></div><div class="row content-front"><div class="col-lg-12" style="margin-top: 900px"><img src="img/img07.jpg" class=" shadow-lg p-0 mb-2 rounded img-fluid" alt="Responsive image"><h3 style="margin-top: 30px">九嶷山—舜帝陵風景名勝區</h3><div class="col-lg-6" style="margin-left: 380px; margin-top: 20px"><p class="lead">舜帝陵位于湖南省寧遠縣城南三十公里處的du九嶷山，是中華民族始祖“五帝”之一舜帝的陵廟。舜帝陵占地面積5萬平方米，分為兩個自然院落，九個單體建筑，從外入內有玉帶橋，儀門、神道、山門、干門、拜殿、正殿、寢殿、左右廂房、左右碑房和碑廊，三面宮墻環繞；氣勢恢宏，結構嚴謹，是我國始祖陵中最高最大的陵，被稱為“華夏第一陵”。</p></div></div></div><div class="row content-front"><div class="col-lg-12" style="margin-top: 1650px"><img src="img/img08.jpg" class="img-fluid shadow-lg p-0 mb-2 rounded" alt="Responsive image"><h3 style="margin-top: 30px">永州勾藍瑤寨景區</h3><div class="col-lg-6" style="margin-left: 380px; margin-top: 20px"><p class="lead">勾藍瑤是江永“四大民瑤” 之一，將瑤寨圍得固若金湯。三層防御工事，層層把守，鎮守該村通往外界的各個隘口，加上在兩山之間的要道上筑造由大塊青石構成的寨墻，可說是“一夫當關，萬夫莫開”。這種類似古代關隘的城墻保護方式在一個少數民族村落出現，非常珍貴。蘭溪勾藍瑤寨古建筑群不僅體現了當地較為高超的民間工藝，也集中反映了當地的習俗，加之千余年的瑤寨歷史和豐富的文化底蘊，具有較高的歷史價值、藝術價值和科學價值。2011年，被列為省重點文物保護單位。有培元橋、盤王廟、石鼓登亭、古民居等古跡，建有瑤族表演廳。</p><a class="btn btn-primary" href="index.html" style="margin-top: 50px;">回到首頁</a></div></div></div> </div>

landscapeAppreciate.html【風景介紹界面】

主要通過輪播圖展示風景，通過設置背景音樂烘托氣氛，如下是效果圖，該界面使用到的技術主要是輪播圖的使用，定位布局的使用等

?核心代碼如下：

<div class="content-front container-fluid" style=""><div class="row"><div style="margin-left: 570px;margin-top: 50px;"><h2 class="display-4" style="color: gainsboro;"> 宜昌市風景欣賞</h2></div></div><div class="row" style="margin-top: 50px;margin-left: 360px"><div id="carouselExampleControls" class="carousel slide" data-ride="carousel" style="width: 800px;height: 400px"><div class="carousel-inner" role="listbox"><div class="carousel-item active"><img src="img/bg03.jpg" class="d-block w-100 img-thumbnail" alt="..."></div><div class="carousel-item"><img src="img/bg04.jpg" class="d-block w-100 img-thumbnail" alt="..."></div><div class="carousel-item"><img src="img/bg05.jpg" class="d-block w-100 img-thumbnail" alt="..."></div></div><a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div><div class="row"><div style="margin-top:50px; margin-left: 615px"><audio controls="controls" autoplay="autoplay" style="background-color: transparent"><source src="video/m01.mp3" type="audio/mpeg" />Your browser does not support the audio element.</audio></div><div style="text-align: center;"><a href="index.html" type="button" class="btn btn-primary-outline border rounded-pill" style="color: gainsboro;margin-top: 50px; margin-left: 725px">返回首頁</a></div></div> </div>

MessageBoard.html【留言板界面】

主要用于留言使用，學習使用表單form等等使用，效果圖如下：

核心代碼如下：

<style>.bg {background: url('img/bg01.jpg');height: 820px;text-align: center;line-height: 800px;}.bg-blur {float: left;width: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;-webkit-filter: blur(15px);-moz-filter: blur(15px);-o-filter: blur(15px);-ms-filter: blur(15px);filter: blur(15px);}.content-front {position:absolute;}</style></head> <body> <div class="bg bg-blur"></div> <div class="content-front container-fluid" style="color: gainsboro"><div class="row"><div class="col-md-4"></div><div class="col-md-4"><div style="text-align: center; color: gainsboro;"><div class="" style="margin-top: 50px"><h1 class="display-4">留言板</h1><p class="lead" style="margin-top: 30px">a place u can record or release sth. </p><hr class="my-4" style="background-color: gainsboro"><form method="post" action="#"><div class="mb-3" ><label for="validationTextarea"></label><textarea name="message" class="form-control" id="validationTextarea" placeholder="在這里可以寫對本網站的意見或建議" style="background-color: transparent;color: gainsboro; margin-top: 19px"></textarea><button type="submit" class="btn btn-primary-outline border rounded-pill" style="color: gainsboro; margin-top: 10px">提交</button></div></form></div></div></div></div><div class="row"><div class="col-md-4"></div><div class="col-md-4" style="margin-top: 20px"><p>歷史留言</p><hr class="my-4" style="background-color: gainsboro"><div style="text-align: center;margin-top: 200px"><a href="index.html" type="submit" class="btn btn-primary-outline border rounded-pill" style="color: gainsboro; margin-top: 10px">返回首頁</a></div></div></div> </div>

?適合大多數我的家鄉標題的作業，改改其中部分圖片以及簡潔即可，免費獲取代碼關注公眾號（coding加油站）回復家鄉2領取。

總結

以上是生活随笔為你收集整理的HTML5期末大作业：我的家乡网站设计——可以根据百度百科更换家乡适用多数我的家乡的全部內容，希望文章能夠幫你解決所遇到的問題。

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