HTML5期末大作业：我的家乡网站设计5
生活随笔
收集整理的這篇文章主要介紹了
HTML5期末大作业：我的家乡网站设计5
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
如下代碼供學習交流，獲取完整代碼，請關注文后二維碼（coding加油站）回復家鄉(xiāng)5免費獲取。
1.網(wǎng)頁作品簡介 ：
HTML期末大學生網(wǎng)頁設計作業(yè)，可以替換文字圖片滿足不同的家鄉(xiāng)，根據(jù)百度百科的信息來替換就是自己的家鄉(xiāng)了
2.知識應用：
在操作方面上運用了html5和css3，采用了div+css結(jié)構(gòu)、表單、超鏈接、浮動、絕對定位、相對定位、字體樣式、引用視頻等基礎知識
3. 內(nèi)容介紹：
《我的家鄉(xiāng)》共有5個頁面，分別為
Index.html【首頁】
首頁主要是一個導航頁，通過大字體展示當前的家鄉(xiāng)名，效果圖如下：
全部代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>HOMETOWN</title><link rel="shortcut icon" type="image/jpg" href="IMG/head.jpg"><style type="text/css">body{background-image: url("IMG/hometown.jpg");}#title{width: 90%;margin: auto;border: 0px solid;margin-top: 18%;}#title_son{width: 25%;float: right;border: 0px solid;}#enter{width: 292px;margin: auto;border: 0px solid;}p{font-size: 130px;font-weight: 100;text-align: center;color: #00A0DA;font-family: 楷體;line-height: 0px;}h2{font-size: 100px;color: #00A0DA;font-family: 楷體;line-height: 0px;}a{font-size: 30px;font-family: 楷體;color: #00A0DA;text-decoration: none;text-align: center;}</style> </head> <body><div id="title"><p>我的家鄉(xiāng)</p><div id="title_son"><h2>家鄉(xiāng)名</h2></div></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div id="enter"><img src="IMG/right1.gif"><img src="IMG/right1.gif"><a href="HTML/home.html">進入首頁</a><img src="IMG/left1.gif"><img src="IMG/left1.gif"></div></body> </html>家鄉(xiāng)首頁主要通過輪播圖展示家鄉(xiāng)的相關介紹，輪播圖是自己寫的，適合基礎同學看看實現(xiàn)，下方展示的是家鄉(xiāng)的大致介紹，可以通過百度百科改為自己的家鄉(xiāng)，上方為導航欄，以及當前時間展示，通過js實現(xiàn)簡單的時間更新。效果圖如下：
?代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>HOME</title><link rel="shortcut icon" type="image/jpg" href="../IMG/head.jpg"><link rel="stylesheet" type="text/css" href="../CSS/mystyle.css"><link rel="stylesheet" type="text/css" href="../CSS/picture.css" ><link rel="stylesheet" type="text/css" href="../CSS/home.css"><script type="text/javascript" src="../JS/return_time.js" fontSize="20px"></script><script type="text/javascript" src="../JS/picture.js" fontSize="20px"></script> </head> <body bgcolor="#F8F8FA"> <div id="whole"><div id="head"><div class="head_left"><div class="head_img"><img class="head" src="../IMG/head.jpg" title="XXX hometown introduce"></div><h2><font> 家鄉(xiāng)名</font>------我的家鄉(xiāng)介紹</h2></div><div id="head_time"><script type="text/javascript">return_time();</script></div></div><div id="title"><div class="title_left"><div class="home_page"><a href="home.html">首頁</a></div><div class="detail_introduce"><a href="detail_introduce.html">景點介紹</a></div></div><div class="title_right"><div class="specialty"><a href="specialty.html">特產(chǎn)介紹</a></div><div class="personal_information"><a href="personal_information.html">個人資料</a></div></div></div><div id="container"><div id="list" style="left: -1050px;"><img src="../IMG/005.jpg" alt="1"/><img src="../IMG/001.jpg" alt="1" title="在山上遠眺全城" /><img src="../IMG/002.jpg" alt="2" title="登高遠望" /><img src="../IMG/003.jpg" alt="3" title="有這樣的春天，夏天" /><img src="../IMG/004.jpg" alt="4" title="也有這樣的秋天" /><img src="../IMG/005.jpg" alt="5" title="還有這樣的冬天" /><img src="../IMG/001.jpg" alt="5"/></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a></div><br /><hr width="90%" /><div id="content"><h2> 家鄉(xiāng)簡介</h2><p class="home"> 天水市甘谷縣，古稱冀，周莊王九年（公元前688年），建冀縣，迄今有2703年，為全國縣治肇始之地，有“<font class="emphasis">華夏第一縣</font>”之稱。也曾是漢朝涼州漢陽郡的郡治，唐改伏羌縣，1928年改甘谷縣。</p><p class="home"> 甘谷山川秀美，歷史悠久，民風淳樸，人文薈萃。巍巍朱圉雄峙，滔滔渭水長流，名山大川，載于《尚書》，深厚的文化積淀，孕育了不少仁人志士。相傳華夏人文初祖太昊伏羲氏誕生于縣南“古風臺”，當年大禹治水，導渭于河，遺跡猶在，春秋時石作蜀負笈齊魯，游學洙泗，師從孔子，名列七十二賢；蜀漢大將軍姜維，在三國后期繼承諸葛事業(yè)，力撐蜀漢半壁江山，“遠志”風范，遺澤后世；清代翰林院侍讀學士鞏建豐，被譽為“關西師表”。境內(nèi)文物古跡星羅棋布，縣城西南四十里處傳為秦先祖非子牧馬之地。有仰韶文化和齊家文化多處，出土珍貴文物1000多件，或藏于北京故宮，或存于省博物館。縣城西石窟群綿延十余公里，尤以全國重點文物保護。</p><p class="home"> 甘谷縣氣候溫和，物產(chǎn)豐富。川道區(qū)地勢平坦，土層深厚，灌溉條件良好，適宜于發(fā)展優(yōu)質(zhì)高效農(nóng)業(yè)，有“<font class="emphasis">金腰帶</font>”之稱。南嶺渠使南山6萬畝農(nóng)田變得富庶豐饒，十余萬畝天然次生林和廣闊的草地，為發(fā)展畜牧業(yè)提供了優(yōu)質(zhì)天然資源。甘谷是祖國的幾何中心，交通便利。隴海鐵路縱貫全境，寶蘭二線即將通車，316國道從縣城南通過。以這兩條交通大動脈為主線，和縣、鄉(xiāng)、村公路構(gòu)織成交通網(wǎng)絡，把甘谷城鄉(xiāng)和外地聯(lián)在一起。</p></div></div> </body> </html>detail_introduce.html，specialty.html【景點介紹頁，以及特產(chǎn)介紹頁】
兩個界面采用列表布局實現(xiàn)相關景點以及特產(chǎn)的介紹，比較基礎，相關效果圖如下：
?
相關代碼如下：
<div id="daxiang"><div class="daxiang_img"><img src="../IMG/大象山.png"><h2 align="center">1.大象山</h2></div><div class="daxiang_content"><p class="introduce1"> 甘谷大象山，位于甘肅省天水市甘谷縣城西南2.5公里秦嶺西端的文旗山上。自山腳石級而上至巔，總長1.5公里，占地面積約640畝，是古絲綢之路上甘肅東南部融石窟和古建為一體的重要文化遺存之一，2001年被國務院公布為<font class="emphasis">全國重點文物保護單位</font>。 山上松檜叢生，丁香溢彩，亭臺樓閣依山而建，雕棟畫廊綠樹掩映。山中懸崖間，峭壁上有大洞窟一個，洞內(nèi)坐石胎泥塑大佛一尊。</p><p class="introduce1"> 大象山石窟為甘谷八景之一的懸崖大象，大佛洞窟兩旁，依山附勢修有長長的走廊，如同一條腰帶。廊上窟龕相連，巍峨壯觀， 現(xiàn)存二十二個窟龕大都平面近方形。正壁開大圓拱龕和設高壇基，并有僧人修行的禪窟，這是大象山窟龕特殊之處，在全國也很罕見。</p><p class="introduce1"> 甘谷大佛為半圓雕石胎泥塑，高23.3米，肩寬9.5米，頭高5.8米，膝長6米。其造型高大雄偉，令人仰止，所具有的文化特質(zhì)可視為西方裝飾性雕塑和中國寫意性雕塑完美結(jié)合的藝術巨制。</p><p class="introduce1"> 據(jù)考證，甘谷塑佛造像可遠溯北魏，先后共經(jīng)歷了四個朝代，三百多年。</p></div></div><hr width="80%" /><div id="qianfo"><div class="qianfo_img"><img src="../IMG/千佛洞.jpg"><h2 align="center">2.千佛洞</h2></div><div class="qianfo_content"><p class="introduce2"> 千佛洞是位于甘肅省天水市武山縣拉稍寺西北約一公里的天然巖洞，是武山水簾洞石窟群所包括的顯圣池、拉稍寺、千佛洞、水簾洞、三清洞5處名勝景觀之一，坐落在天水市武山縣城東北約50公里處的鐘樓山峽谷中，因壁畫千佛而得名。</p><p class="introduce2"> 千佛洞又因有摩崖懸塑七佛，故俗稱七佛溝。巖洞一側(cè)崖面上以木樁棧道分為壁畫和懸塑造像兩部分。洞內(nèi)原有七窟，現(xiàn)殘存砂崖面雕像和壁畫，造像豐滿，神態(tài)各異。特別是菩薩像豐盈清秀，頗具北周特點，部分造像含有西魏遺風，是研究我國早期石窟藝術的重要資料。</p><p class="introduce2"> 行佛洞高約20米，深約500米，主要有三廳（千佛聚會廳、萬年國畫廳、八仙醉樂廳）和五室（吉祥室、聚會室、仙壁室、寶劍室和醉仙室）組成。“千佛聚會廳”由千余尊形似小石佛的畫面組成，“萬年國畫廳”由三大幅10米見方的壁畫組成，一幅如江河奔騰，一幅如天馬行空，另一幅則有山有水，有亭榭樓閣，色彩、層次均搭配得當，天工巧作，令人叫絕。</p></div></div><hr width="80%" /><div id="shuilian"><div class="shuilian_img"><img src="../IMG/水簾洞.png"><h2 align="center">3.水簾洞</h2></div><div class="shuilian_content"><p class="introduce1"> 水簾洞石窟位于甘肅省武山縣城東北25公里魯班鄉(xiāng)，現(xiàn)包括拉捎寺、千佛洞、顯圣池、水簾洞，是僅次于天水麥積山石窟的石窟群，同為渭河上游古“絲綢之路”南道的佛教藝術勝地。現(xiàn)存歷代造像90余尊，壁畫1000平方米，浮雕和半圓雕佛塔8座，古建筑18座。窟群創(chuàng)建于北周武成元年（公元559年）。水簾洞系高約50米、深20多米的天然巖洞，洞內(nèi)常年細流不斷，雨天洞檐飛流直下如水簾，因而得名。</p><p class="introduce1"> 水簾洞石窟群始建於北周，經(jīng)五代、宋．元增建重修。石窟群共有七寺（顯圣寺、拉梢寺、粉團寺、磚瓦寺、硬山寺、觀臺寺、千佛寺）五臺（蓮花臺、清靜臺、說法臺、鐘樓臺、鳴鼓臺）十二處人文古跡，分五組散布於方圓數(shù)公里以內(nèi)，與「雄奇險秀幽曠」的自然景觀融為一體，成為隴右古文化明珠和風景勝地。其中拉梢寺、水簾洞、千佛洞三處古跡保存較好，而水簾洞位於窟群中心，地形獨特，氣勢雄偉，民間影響最大，故以其名統(tǒng)稱整個石窟群。</p></div></div><hr width="80%" /><div id="hot-spring"><div class="hot-spring_img"><img src="../IMG/溫泉.jpg"><h2 align="center">4.溫泉</h2></div><div class="hot-spring_content"><p class="introduce2"> 武山溫泉又名礦泉，古稱燙池寺，有泉眼11處，日涌水量700噸。屬熱放射性礦泉，水溫為攝氏38度至40度之間，屬軟質(zhì)淡水。</p><p class="introduce2"> 經(jīng)檢測，泉水含有：放射性氡、碳酸氫鈉和硫化物等38種微量元素，是國內(nèi)外稀有的極具醫(yī)用價值的復合型礦泉。經(jīng)過三十多年的康復醫(yī)療實踐證明，該泉具有放射作用、離子作用、紅外線及機械按摩作用、機體內(nèi)環(huán)境調(diào)節(jié)作用。對目前原因不明，臨床療效欠佳的各類銀屑病、紅皮病、慢性濕疹、“癬”等皮膚病有神奇的療效。</p><p class="introduce2"> 對其它慢性病諸如風濕病、肺心病、冠心病、軟組織損傷、運動支持器官疾病、慢性胃腸炎、代償性疾病等都有非常明顯的治療效果。</p></div></div><hr width="80%" /><div id="gupo"><div class="gupo_img"><div class="gupo_img1"><img src="../IMG/古坡.jpg"></div><div class="gupo_img2"><img src="../IMG/油菜花.jpg"><h2 align="center">5.古坡草原</h2></div></div><div class="gupo_content"><p class="introduce1"> 古坡鄉(xiāng)位于甘谷縣東南部，藉河上游，地處東經(jīng)105度18分至108度19分；北緯34度31分至34度40分之間，全鄉(xiāng)總面積132。8平方公里。</p><p class="introduce1"> 古坡河東西橫貫全境，南部部深度切割為質(zhì)中山區(qū)地貌，系秦嶺山脈西延，有成片的天然次生喬灌木和牧草覆蓋、宜于畜牧。溝谷清溪常流，海拔最高2716米（石鼓山），最低1760米（下石溝門），相對高差956米。年平均氣溫7.4℃。當?shù)貫榇箨懶约撅L氣候，但由于海拔相對高差大和地形影響，主要特征為：一是熱量資源的垂直分布明顯；二是降水量多，年平均降雨量600-700㎜；三是光照較少，無霜期短（90-140天）。</p><p class="introduce1"> 境內(nèi)有5.5萬畝天然草場，發(fā)展旅游業(yè)前景廣闊。古坡鄉(xiāng)擁有茂密的原始森林及優(yōu)美的自然景觀，夏季清涼，是避暑旅游的好地方。然而，對于這些豐富的自然資源，由于交通不便的原因，沒有大面積開發(fā)，因此也保存了草原原汁原味的感覺。</p></div></div>personal_information.html【個人資料介紹】?
一個個人自我介紹的界面，用于介紹自己的情況，效果圖如下：
獲取完整代碼，請關注文后二維碼（coding加油站）回復家鄉(xiāng)5免費獲取。
總結(jié)
以上是生活随笔為你收集整理的HTML5期末大作业：我的家乡网站设计5的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何利用百度知道推广网站
- 下一篇： 点这里安装Alexa工具条