关于我的家乡的网页设计怎么写（HTML5期末大作业：我的家乡网站设计5）

时间2025-07-30 21:45:07分类IT科技浏览6237

导读：如下代码供学习交流，获取完整代码，请关注公众号（coding加油站）获取。...

如下代码供学习交流，获取完整代码，请关注公众号（coding加油站）获取。

1.网页作品简介：

HTML期末大学生网页设计作业，可以替换文字图片满足不同的家乡，根据百度百科的信息来替换就是自己的家乡了

2.知识应用：

在操作方面上运用了html5和css3 ，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

3. 内容介绍：

《我的家乡》共有5个页面，分别为

Index.html【首页】

首页主要是一个导航页，通过大字体展示当前的家乡名，效果图如下：

全部代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <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>我的家乡</p> <div id="title_son"> <h2>家乡名</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>

家乡首页主要通过轮播图展示家乡的相关介绍，轮播图是自己写的，适合基础同学看看实现，下方展示的是家乡的大致介绍，可以通过百度百科改为自己的家乡，上方为导航栏，以及当前时间展示，通过js实现简单的时间更新。效果图如下：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <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> 家乡名</font>------我的家乡介绍</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">特产介绍</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>      家乡简介</h2> <p class="home">      天水市甘谷县，古称冀，周庄王九年（公元前688年），建冀县，迄今有2703年，为全国县治肇始之地，有“<font class="emphasis">华夏第一县</font> ”之称。也曾是汉朝凉州汉阳郡的郡治，唐改伏羌县，1928年改甘谷县。</p> <p class="home">      甘谷山川秀美，历史悠久，民风淳朴，人文荟萃。巍巍朱圉雄峙，滔滔渭水长流，名山大川，载于《尚书》，深厚的文化积淀，孕育了不少仁人志士。相传华夏人文初祖太昊伏羲氏诞生于县南“古风台 ” ，当年大禹治水，导渭于河，遗迹犹在，春秋时石作蜀负笈齐鲁，游学洙泗，师从孔子，名列七十二贤；蜀汉大将军姜维，在三国后期继承诸葛事业，力撑蜀汉半壁江山，“远志 ”风范，遗泽后世；清代翰林院侍读学士巩建丰，被誉为“关西师表 ” 。境内文物古迹星罗棋布，县城西南四十里处传为秦先祖非子牧马之地。有仰韶文化和齐家文化多处，出土珍贵文物1000多件，或藏于北京故宫，或存于省博物馆。县城西石窟群绵延十余公里，尤以全国重点文物保护。</p> <p class="home">      甘谷县气候温和，物产丰富。川道区地势平坦，土层深厚，灌溉条件良好，适宜于发展优质高效农业，有“<font class="emphasis">金腰带</font> ”之称。南岭渠使南山6万亩农田变得富庶丰饶，十余万亩天然次生林和广阔的草地，为发展畜牧业提供了优质天然资源。甘谷是祖国的几何中心，交通便利。陇海铁路纵贯全境，宝兰二线即将通车，316国道从县城南通过。以这两条交通大动脉为主线，和县、乡、村公路构织成交通网络，把甘谷城乡和外地联在一起。</p> </div> </div> </body> </html>

detail_introduce.html ，specialty.html【景点介绍页，以及特产介绍页】

两个界面采用列表布局实现相关景点以及特产的介绍，比较基础，相关效果图如下：

相关代码如下：

<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> 。山上松桧丛生，丁香溢彩，亭台楼阁依山而建，雕栋画廊绿树掩映。山中悬崖间，峭壁上有大洞窟一个，洞内坐石胎泥塑大佛一尊。</p> <p class="introduce1">      大象山石窟为甘谷八景之一的悬崖大象，大佛洞窟两旁，依山附势修有长长的走廊，如同一条腰带。廊上窟龛相连，巍峨壮观，现存二十二个窟龛大都平面近方形。正壁开大圆拱龛和设高坛基，并有僧人修行的禅窟，这是大象山窟龛特殊之处，在全国也很罕见。</p> <p class="introduce1">      甘谷大佛为半圆雕石胎泥塑，高23.3米，肩宽9.5米，头高5.8米，膝长6米。其造型高大雄伟，令人仰止，所具有的文化特质可视为西方装饰性雕塑和中国写意性雕塑完美结合的艺术巨制。</p> <p class="introduce1">      据考证，甘谷塑佛造像可远溯北魏，先后共经历了四个朝代，三百多年。</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">      千佛洞又因有摩崖悬塑七佛，故俗称七佛沟。岩洞一侧崖面上以木桩栈道分为壁画和悬塑造像两部分。洞内原有七窟，现残存砂崖面雕像和壁画，造像丰满，神态各异。特别是菩萨像丰盈清秀，颇具北周特点，部分造像含有西魏遗风，是研究我国早期石窟艺术的重要资料。</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公里鲁班乡，现包括拉捎寺、千佛洞、显圣池、水帘洞，是仅次于天水麦积山石窟的石窟群，同为渭河上游古“丝绸之路 ”南道的佛教艺术胜地。现存历代造像90余尊，壁画1000平方米，浮雕和半圆雕佛塔8座，古建筑18座。窟群创建于北周武成元年（公元559年）。水帘洞系高约50米、深20多米的天然岩洞，洞内常年细流不断，雨天洞檐飞流直下如水帘，因而得名。</p> <p class="introduce1">      水帘洞石窟群始建於北周，经五代、宋．元增建重修。石窟群共有七寺（显圣寺、拉梢寺、粉团寺、砖瓦寺、硬山寺、观台寺、千佛寺）五台（莲花台、清静台、说法台、钟楼台、鸣鼓台）十二处人文古迹，分五组散布於方圆数公里以内，与「雄奇险秀幽旷」的自然景观融为一体，成为陇右古文化明珠和风景胜地。其中拉梢寺、水帘洞、千佛洞三处古迹保存较好，而水帘洞位於窟群中心，地形独特，气势雄伟，民间影响最大，故以其名统称整个石窟群。</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度之间，属软质淡水。</p> <p class="introduce2">      经检测，泉水含有：放射性氡、碳酸氢钠和硫化物等38种微量元素，是国内外稀有的极具医用价值的复合型矿泉。经过三十多年的康复医疗实践证明，该泉具有放射作用、离子作用、红外线及机械按摩作用、机体内环境调节作用。对目前原因不明，临床疗效欠佳的各类银屑病、红皮病、慢性湿疹、“癣 ”等皮肤病有神奇的疗效。</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">      古坡乡位于甘谷县东南部，藉河上游，地处东经105度18分至108度19分；北纬34度31分至34度40分之间，全乡总面积132 。8平方公里。</p> <p class="introduce1">      古坡河东西横贯全境，南部部深度切割为质中山区地貌，系秦岭山脉西延，有成片的天然次生乔灌木和牧草覆盖、宜于畜牧。沟谷清溪常流，海拔最高2716米（石鼓山），最低1760米（下石沟门），相对高差956米。年平均气温7.4℃ 。当地为大陆性季风气候，但由于海拔相对高差大和地形影响，主要特征为：一是热量资源的垂直分布明显；二是降水量多，年平均降雨量600-700㎜；三是光照较少，无霜期短（90-140天）。</p> <p class="introduce1">      境内有5.5万亩天然草场，发展旅游业前景广阔。古坡乡拥有茂密的原始森林及优美的自然景观，夏季清凉，是避暑旅游的好地方。然而，对于这些丰富的自然资源，由于交通不便的原因，没有大面积开发，因此也保存了草原原汁原味的感觉。</p> </div> </div>

personal_information.html【个人资料介绍】

一个个人自我介绍的界面，用于介绍自己的情况，效果图如下：

获取完整代码，请关注公众号（coding加油站）获取。