HTML5期末大作业：我的家乡网站设计——我的家乡
生活随笔
收集整理的這篇文章主要介紹了
HTML5期末大作业：我的家乡网站设计——我的家乡
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
如下代碼供學(xué)習(xí)交流，獲取完整代碼，請關(guān)注文后二維碼（coding加油站）回復(fù)家鄉(xiāng)免費(fèi)獲取。
1.網(wǎng)頁作品簡介 ：
HTML期末大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)，可以替換文字圖片滿足不同的家鄉(xiāng)
2.知識應(yīng)用：
在操作方面上運(yùn)用了html5和css3，采用了div+css結(jié)構(gòu)、表單、超鏈接、浮動(dòng)、絕對定位、相對定位、字體樣式、引用視頻等基礎(chǔ)知識
3. 內(nèi)容介紹：
《我的家鄉(xiāng)》共有8個(gè)頁面，分別為
index.html【首頁】
該頁面引用了超鏈接、div盒子、浮動(dòng)、輪播圖、視頻播放等知識將頁面能夠醒目的呈現(xiàn)出來，同時(shí)提供導(dǎo)航欄，提供底部導(dǎo)航。如下演示圖：
核心代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>主頁</title><link rel="stylesheet" href="../css/Index.css" type="text/css"><link rel="stylesheet" href="../css/photoC.css" type="text/css"></head><body><div id="top"><img src="../image/chizhouLogo.png" class="img1"><div id="top-right"><input type="text" name="search" placeholder="請輸入關(guān)鍵字"><div id="search">搜索</div></div><div id="top-gov"><a href="http://www.cj.gov.cn//">昌吉政府官網(wǎng)</a> <a href="http://www.weather.com.cn/weather1d/101130401.shtml#input">昌吉天氣</a></div></div><hr style="height:10px;border:none;border-top:10px groove rgb(14,143, 194);" /><div id="top2"><div id="nav"><ul><li><a href="../html/Index.html">首頁</a></li><li><a href="../html/History.html">歷史</a></li><li><a href="../html/Culture.html">人文</a></li><li><a href="../html/Foods.html">美食</a></li><li><a href="../html/Views.html">景點(diǎn)</a></li><li><a href="../html/Traffic.html">交通經(jīng)濟(jì)</a></li><li><a href="../html/Natural.html">自然</a></li><li><a href="../html/honor.html">榮譽(yù)</a></li></ul></div></div><hr style="height:1px;border:none;border-top:1px dashed goldenrod;"/><div id="top1"><div id="flash"><img src="../image/view1.jpg" style="display: block"><img src="../image/view2.jpg"><img src="../image/view3.jpg"><img src="../image/view4.jpg"><img src="../image/view5.jpg"><ul><li class="li_1"></li><li></li><li></li><li></li><li></li></ul><div class="span-r"><span>></span></div><div class="span-l"><span><</span></div></div></div><hr style="height:1px;border:none;border-top:1px dashedgoldenrod;" /><div id="center"><p><img src="../image/mark.png" width="20px"height="20px">昌吉，取“昌盛吉祥”之意。昌吉回族自治州成立于1954年，州域總面積7.39萬平方公里，總?cè)丝?613585人（不包括五家渠市），生活著漢族、回族、維吾爾族、哈薩克族等42個(gè)民族，全州轄5縣（瑪納斯縣、呼圖壁縣、吉木薩爾縣、奇臺縣、木壘哈薩克自治縣）、2市（昌吉市、阜康市）、3個(gè)國家級園區(qū)（新疆準(zhǔn)東經(jīng)濟(jì)技術(shù)開發(fā)區(qū)、昌吉高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)、昌吉國家農(nóng)業(yè)科技園區(qū)）。駐有新疆生產(chǎn)建設(shè)兵團(tuán)第六師和第八師部分團(tuán)場21個(gè)。</p><p><img src="../image/mark.png" width="20px"height="20px">區(qū)位優(yōu)勢明顯。昌吉州從東西北三面環(huán)抱首府烏魯木齊市，地處天山北坡經(jīng)濟(jì)帶和烏昌石城市群率先發(fā)展的核心區(qū)域，是建設(shè)新疆絲綢之路經(jīng)濟(jì)帶核心區(qū)的重要組成部分。州府昌吉市距烏魯木齊市中心35公里，距烏魯木齊國際機(jī)場18公里。G312、G216、G7等高速公路貫穿全境，是東聯(lián)內(nèi)地、西接中亞和歐洲市場的橋頭堡和黃金通道。</p><p><img src="../image/mark.png" width="20px"height="20px">自然資源富集。州內(nèi)已發(fā)現(xiàn)的能源、金屬和非金屬礦產(chǎn)資源有煤炭、石油、天然氣、石灰石、芒硝、鐵、鈾、金、銅等40種。煤炭資源富集，預(yù)測儲量5732億噸，占全疆的26%、全國的12%，其中：準(zhǔn)東煤田是目前全國最大的整裝煤田，預(yù)測資源量3900億噸，已探明2531億噸。石油預(yù)測儲量27億噸、天然氣預(yù)測儲量6000億立方米。天然草場9981萬畝，森林1231萬畝。年日照時(shí)數(shù)2700—3100小時(shí)，無霜期155—180天。</p><p><img src="../image/mark.png" width="20px"height="20px">經(jīng)濟(jì)蓬勃發(fā)展。昌吉州始終堅(jiān)持新發(fā)展理念，推動(dòng)經(jīng)濟(jì)高質(zhì)量發(fā)展，深化市場化改革，擴(kuò)大高水平開放，加快建設(shè)現(xiàn)代化經(jīng)濟(jì)體系，人均生產(chǎn)總值1.2萬美元。</p><video width="800" height="480" controls><source src="../video/xcVideo.mp4" type="video/mp4"><source src="../video/xcVideo.ogg" type="video/ogg"><source src="../video/xcVideo.webm" type="video/webm"><object data="../video/xcVideo.mp4" width="800"height="480"><embed src="../video/xcVideo.swf" width="800"height="480"></object>History.html【家鄉(xiāng)歷史介紹】
該頁面使用背景圖進(jìn)行背景繪制、使用h2標(biāo)簽將文字進(jìn)行排版，使頁面整潔，充分利用外來資源，引入相關(guān)資料。
Culture.html【家鄉(xiāng)人文】
以圖片和文字的形式展現(xiàn)出家鄉(xiāng)的人文特征。
核心代碼：
<div id="C1-center" style="background: url(image/culture-bc.jpg);background-size: cover;"><br><br><p>昌吉州有藝術(shù)表演團(tuán)體7個(gè)；公共文化館 8 個(gè)；公共圖書館 8 個(gè)；博物館 9 所。已探明文物點(diǎn) 642 處，被公布為各級文物保護(hù)單位的有 169 處，世界文化遺產(chǎn) 1 處、其中國家級 4 處、自治區(qū)級 53處、縣市級 111 處，全州有館藏文物 12600 多件，其中國家珍貴文物 223 件（套），反映地方民族特色的民俗實(shí)物近 2000 件，其它藏品 10000 多件。</p><p>州級廣播電視臺 1 座，全州廣播人口綜合覆蓋率 99.68％；縣級廣播電視臺 7 座。</p><img src="../image/culture-poem.jpg"><p>昌吉州旅游文化資源獨(dú)具特色。“新疆天山”成功申報(bào)為世界自然遺產(chǎn)、“北庭故城”成功申報(bào)為世界文化遺產(chǎn)，是新疆唯一同時(shí)擁有“雙世界遺產(chǎn)”的地州。州域內(nèi)有奇臺漢代疏勒城、吉木薩爾北庭故城、車師古道、呼圖壁康家石門子生殖崇拜巖畫等400多處歷史遺跡，奇臺硅化木·恐龍溝國家地質(zhì)公園、魔鬼城等地質(zhì)遺跡，國家5A級風(fēng)景名勝區(qū)——天山天池、國家森林公園——江布拉克等自然景觀，新疆曲子、美食小吃等民間藝術(shù)和風(fēng)味飲食。</p><img src="../image/culture-god.jpg"><p>根據(jù)第七次全國人口普查結(jié)果，現(xiàn)將2020年11月1日零時(shí)我州常住人口的基本情況公布如下：</p><img src="../image/culture-Opera.jpg"><p>全州常住人口為1613585人（不包含五家渠市），與2010年第六次全國人口普查的1428587人相比，增加184998人，增長12.95%，年平均增長率為1.22%。分別比全國平均水平高出7.57個(gè)百分點(diǎn)和0.69個(gè)百分點(diǎn)，分別比全區(qū)平均水平低5.57個(gè)百分點(diǎn)和0.49個(gè)百分點(diǎn)。</p><img src="../image/culture-hd.jpg"></div>Foods.html【家鄉(xiāng)美食】
以圖片和文字的形式展現(xiàn)出家鄉(xiāng)的美景，添加a標(biāo)簽超級鏈接，跳轉(zhuǎn)到相關(guān)介紹界面。如下是實(shí)現(xiàn)圖：
核心代碼：
<div id="F-center"><div id="leftF" style="background: url(../image/food-choutofu.jpg);background-size: cover;"><div><p class="p1">大盤雞</p><p class="p2">大盤雞色彩鮮艷，有爽滑麻辣的雞肉和軟糯甜潤的土豆，辣中有香，粗中帶細(xì)，而且經(jīng)濟(jì)實(shí)惠，親朋聚會食用尚家</p></div></div><div id="leftF" style="background: url(../image/food-doujiao.jpg);background-size: cover;"><div><p class="p1">香酥羊腿</p><p class="p2">羊肉性溫味甘，既可食補(bǔ)，又可食療，為優(yōu)良的強(qiáng)壯祛疾食品，有益氣補(bǔ)虛，溫中暖下，補(bǔ)腎壯陽，生肌健力，抵御風(fēng)寒之功效。</p></div></div><div id="leftF" style="background: url(../image/food-duck.jpg);background-size: cover;"><div><p class="p1">黃面</p><p class="p2">在昌吉市、奇臺縣、米泉市等地的回族人中間，多有出名的拉黃面師傅，拉出的面細(xì)如游絲，柔韌耐嚼。再加上配料精致獨(dú)到，蒜、醋、辣味俱全，深受群眾歡迎。而昌吉州流行的“烤肉拌涼面”的獨(dú)特吃法，更是受到外地來客的青睞。</p></div></div><div id="leftF" style="background: url(../image/food-ggtofu.jpg);background-size: cover;"><div><p class="p1">烤包子</p><p class="p2">烤包子（維語叫“撒木薩”）和薄皮包子（維語叫“皮特爾曼它”）是維吾爾族同胞喜愛的食品之一。城鄉(xiāng)巴扎的飯館、食攤多銷售這種食品。烤包子主要是在馕坑烤制。包子皮用死面搟薄，四邊折合成方形。包子餡用羊肉丁、羊尾巴油丁、洋蔥、孜然粉、精鹽和胡椒粉等原料，加入少量水，拌勻而成。</p></div></div><div id="leftF" style="background: url(../image/food-mijiao.jpg);background-size: cover;"><div><p class="p1">馕燜肉</p><p class="p2">食時(shí)一邊吃馕，一邊吃肉。因這種食品兼有主食和菜肴的功能，所以不用另加主食即可飽腹。加之其味濃郁醇香，所以深受食者喜愛。</p></div></div><div id="leftF" style="background: url(../image/food-subin.jpg);background-size: cover;"><div><p class="p1">烤全羊</p><p class="p2">烤全羊不僅是街頭的風(fēng)味小吃，而且也是維吾爾人招待貴客的上等佳肴，現(xiàn)在也成為高級筵席中的一道佳品，倍受中外客人的青睞。</p></div></div>Traffic.html 【交通經(jīng)濟(jì)】
嵌入百度地圖圖片，通過按鈕點(diǎn)擊可以直接跳轉(zhuǎn)到百度界面顯示家鄉(xiāng)的位置，使用hover來控制動(dòng)畫效果
?效果圖：
核心代碼：
<div id="T-center"><div id="T-text1"><p style="font-size: 30px;">公路</p><p>昌吉回族自治州州府昌吉市距烏魯木齊市中心35公里，距烏魯木齊國際機(jī)場18公里。</p><p style="font-size: 20px; line-height: 35px">北疆鐵路、312國道、216國道、115省道、吐烏大高等級公路貫穿全境。 2017年，昌吉回族自治州客運(yùn)量2767萬人，同比下降9.0%，客運(yùn)周轉(zhuǎn)量218142萬人公里，同比下降26.2%；貨運(yùn)量13410萬噸，同比增長14.8%，貨物周轉(zhuǎn)量2817876萬噸公里，同比增長18.5%。截至2017年底，昌吉回族自治州民用汽車保有量為32.7萬輛（包括三輪汽車和低速貨車）。其中，私人汽車保有量19.4萬輛</p></div><div id="T-map"><div id="down"><ahref="https://map.baidu.com/search/%E6%98%8C%E5%90%89%E5%B8%82/@9575494.05779743,5471499.88,8.88z?querytype=s&da_src=shareurl&wd=%E6%98%8C%E5%90%89&c=299&src=0&pn=0&sug=0&l=14&b=(13068126,3563552.25;13092702,3575104.25)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&device_ratio=2">點(diǎn)擊跳轉(zhuǎn)至百度地圖</a></div><img src="../image/map.png" width="100%"height="560px"></div><div id="T-text2"><p style="font-size: 30px;">經(jīng)濟(jì)綜述</p><p>2020年昌吉州全地域（含兵團(tuán)）地區(qū)生產(chǎn)總值（GDP）1387.25億元，按可比價(jià)格計(jì)算，同比增長5.3%，增速位居全疆第四位，經(jīng)濟(jì)實(shí)現(xiàn)平穩(wěn)增長。其中，第一產(chǎn)業(yè)增加值242.45億元，同比增長4.5%；第二產(chǎn)業(yè)增加值581.28億元，增長12.4%；第三產(chǎn)業(yè)增加值563.51億元，下降1.1%，三次產(chǎn)業(yè)結(jié)構(gòu)為17.5：41.9：40.6，第三產(chǎn)業(yè)雖然遭到兩次疫情重創(chuàng)，但占GDP的比重依然達(dá)到40%以上，總體結(jié)構(gòu)基本保持穩(wěn)定</p><p>2017年，昌吉回族自治州地區(qū)生產(chǎn)總值1220.0億元，按可比價(jià)格計(jì)算，比上年增長7.0%。其中，第一產(chǎn)業(yè)增加值242.0億元，增長4.0%；第二產(chǎn)業(yè)增加值577.0億元，增長6.0%；第三產(chǎn)業(yè)增加值401.0億元，增長10.4%。三次產(chǎn)業(yè)分別拉動(dòng)經(jīng)濟(jì)增長1.0、2.6、和3.4個(gè)百分點(diǎn)。三次產(chǎn)業(yè)結(jié)構(gòu)為19.8：47.3:32.9。實(shí)現(xiàn)地域工業(yè)增加值444.1億元，增長4.7%，拉動(dòng)經(jīng)濟(jì)增長1.8個(gè)百分點(diǎn)。人均生產(chǎn)總值76097元，同比增長6.4%。按當(dāng)年平均匯率折合11271美元。城鎮(zhèn)居民家庭人均可支配收入30201元，同比增長8.0%。農(nóng)村居民人均可支配收入17316元，同比增長5.3%。</p><p>2017年，昌吉回族自治州城鎮(zhèn)新增就業(yè)28853人，其中：就業(yè)困難人員實(shí)現(xiàn)再就業(yè)3666人，實(shí)名登記高校畢業(yè)生實(shí)現(xiàn)就業(yè)4929人，城鎮(zhèn)登記失業(yè)人員期末實(shí)有人數(shù)3369人。城鎮(zhèn)登記失業(yè)率2.2%，“零就業(yè)家庭”24小時(shí)動(dòng)態(tài)清零成果繼續(xù)鞏固。居民消費(fèi)價(jià)格比上年上漲2.6%，其中，食品煙酒類價(jià)格上漲1.4%。商品零售價(jià)格比上年上漲2.9%。</p><p>2017年，昌吉回族自治州全社會完成固定資產(chǎn)投資1800.0億元（不含農(nóng)戶、不含跨地區(qū)項(xiàng)目，計(jì)劃總投資達(dá)到500萬以上項(xiàng)目），同比增長20.0%。從產(chǎn)業(yè)投向看，第一產(chǎn)業(yè)投資99.8億元，同比增長111.4%；第二產(chǎn)業(yè)投資644.1億元，下降17.6%，其中工業(yè)投資643.0億元，下降17.7%；第三產(chǎn)業(yè)投資1056.2億元，增長56.0%。三次產(chǎn)業(yè)投資構(gòu)成5.5：35.8：58.7。</p></div></div>Natural.html【家鄉(xiāng)自然景點(diǎn)】
使用js添加左側(cè)欄目點(diǎn)擊事件，切換看板的顯示，讓不同的按鈕展示不同的文字。效果圖如下：
核心代碼：
<div id="N-center"><div class="left"><ul><li><img src="../image/water.png">氣候 </li><li><img src="../image/Mine.png">地緣特點(diǎn)</li><li><img src="../image/Ecological.png">資源情況</li><li><img src="../image/Land.png">地貌</li></ul></div><div class="right"><p>昌吉市屬中溫帶區(qū)，為典型的大陸性干旱氣候，具有冬季寒冷、夏季炎熱、晝夜溫差大的特點(diǎn)。由于地形條件的影響，由南向北氣候差異較大，南部夏季降水較多；北部沙漠性氣候特征顯著。昌吉州日照充足，年日照時(shí)數(shù)為2700小時(shí)；熱量條件也較為充足，年≥10℃積溫為3450℃，年平均氣溫6.8℃，1月份平均氣溫為-15.6℃，7月份平均氣溫為24.5℃；年平均降水量為190毫米，夏季降水量明顯多于冬季；年無霜期為160-190天。</p><p>昌吉州是建設(shè)新疆絲綢之路經(jīng)濟(jì)帶核心區(qū)的重要組成部分，是天山北坡經(jīng)濟(jì)帶和烏昌石城市群率先發(fā)展的核心區(qū)域，從東西北三面環(huán)抱首府烏魯木齊市，具有與烏魯木齊市同城一體化發(fā)展的區(qū)位優(yōu)勢，州府昌吉市距烏魯木齊市中心35公里，距烏魯木齊國際機(jī)場18公里。北疆鐵路、312國道、216國道、115省道、吐烏大高等級公路貫穿全境，是東聯(lián)內(nèi)地、西接中亞和歐洲市場的橋頭堡和黃金通道。</p><p>昌吉州內(nèi)已發(fā)現(xiàn)的能源、金屬和非金屬礦產(chǎn)資源有煤炭、石油、天然氣、石灰石、芒硝、鐵、鈾、金、銅等50多種。煤炭資源富集，預(yù)測儲量5732億噸，占全疆的26%、全國的12%，其中：準(zhǔn)東煤田是目前全國最大的整裝煤田，預(yù)測資源量3900億噸，已探明2136億噸。石油預(yù)測儲量27億噸、天然氣預(yù)測儲量6000億立方米。水土光熱資源豐富，常年耕種面積800萬畝左右，人均耕地10畝左右，盛產(chǎn)棉花、小麥、大麥、玉米、制醬番茄等50多種高效優(yōu)質(zhì)農(nóng)作物，是全國重要的商品糧、商品棉、制醬番茄、釀酒葡萄生產(chǎn)基地。</p><p>昌吉自治州地勢南高北低，由東南向西北傾斜，南部是天山山地，中部為廣袤的沖積平原，北部為浩瀚的沙漠盆地，此區(qū)域?yàn)闄M亙南部的天山的北坡，習(xí)慣稱之為“天山北坡”。</p></div></div>?適合大多數(shù)我的家鄉(xiāng)標(biāo)題的作業(yè)，改改其中部分圖片以及簡潔即可，免費(fèi)獲取代碼關(guān)注公眾號（coding加油站）回復(fù)家鄉(xiāng)領(lǐng)取。
總結(jié)
以上是生活随笔為你收集整理的HTML5期末大作业：我的家乡网站设计——我的家乡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ukey网络连接异常_连接UKEY设备失
- 下一篇： Alexa工具条嵌入浏览器技术解析