HTML5期末大作业：网站——美丽家乡(含源码及课程设计文档)

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：本网站设计的主要目的就是为了让更多的人了解自己的家乡。内容包括历史沿革、地理环境、自然资源、经济概况、社会发展、交通运输、古迹人物，让浏览者更好的了解我的家乡。喜欢的可以下载，

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

一、作品演示

1.首页

在这里插入图片描述

2.家乡介绍

在这里插入图片描述

3. 故城遗址

在这里插入图片描述

4.人物介绍

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

<!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>
    <!-- 网站首页 -->

    <!-- 调用css -->
    <link rel="stylesheet" type="text/css" href="css/background.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <div class="box">

        <div class="box1">
            <!-- 网站logo标识 -->
            <div class="logo">
                <a href="index.html">
                    <div style="font-size: 300%;"><b>石埇镇</b></div>
                    <div style="font-size: 150%;"><b>&nbsp;&nbsp;shiyongzhen&nbsp;</b></div>
                </a>
            </div>
            <!-- logo结束 -->

            <div>
                <!--音乐： 家乡美-卓依婷、美丽的家乡-寒冬辣月 controls播放器可见-->
                <audio height="50px" width="70px" autoplay loop>
                    <source src="media/jxm.mp3" type="audio/mp3">
                    <source src="media/mldjx.mp3" type="audio/mp3">
                    <embed height="50px" width="70px" src="media/jxm.mp3" autostart="true" loop="-1" hidden="true">
                </audio>
            </div>
        </div>

        <div>
            <!-- 中部主内容 -->
            <div class="box2">
                <div class="navigation">
                    <!-- navigation 导航 -->
                    <ul>
                        <li>
                            <h2><a href="index.html">&nbsp;&nbsp;&nbsp;&nbsp;首页&nbsp;&nbsp;&nbsp;&nbsp;</a></h2>
                        </li>
                        <li>
                            <h2><a href="#lsyg">历史沿革</a></h2>
                        </li>
                        <li>
                            <h2><a href="#dlhj">地理环境</a></h2>
                        </li>
                        <li>
                            <h2><a href="#zrzy">自然资源</a></h2>
                        </li>
                        <li>
                            <h2><a href="#jjgk">经济概括</a></h2>
                        </li>
                        <li>
                            <h2><a href="#shfz">社会发展</a></h2>
                        </li>
                        <li>
                            <h2><a href="#jtys">交通运输</a></h2>
                        </li>
                        <li>
                            <h2><a href="#gjrw">古迹人物</a></h2>
                        </li>
                    </ul>
                    <!-- 导航结束 -->
                </div>

                <div class="zhu">
                    <!-- 主要内容 -->
                    <div>
                        <h1>石埇镇简介</h1>
                        <p>传说有仙人沿南流江冲石筑城，石至上游百岁滩，下游至油滩，鸡鸣拂晓，仙人弃石返天，石埇在两石滩之中，故名。</p>
                        <P>石埇镇位于浦北县南部南流江畔，距县城62公里，地处玉林、北海、钦州三市交界处。全镇辖7个村委会和1个社区，
                            105个村民小组，总人口17000人，总面积61平方公里。 建镇十多年来，石冲镇的两个文明建设取得了丰硕的成果。
                            铺建了连接209国道的水泥公路，实现了村村通广播、程控电话。手机信号覆盖全镇，各种基础设施比较完善。
                            陶瓷、烟花、杨桃饮料是镇三大产品，其中杨桃饮料曾获1998年全国科技博览会金奖。农业以种植香蕉、荔枝、
                            龙眼、蚕桑、地菠萝、水稻为主。2002年全镇国民生产总值10620万元；其中第一产业4917万元，第二产业2817万元，
                            第三产业2886万元，财政收入202万元，农民人均纯收入2350元。 石埇镇历史悠久，人杰地灵。
                            有自治区重点保护文物南北朝时期的越州古城遗址；有曾任第二军军长和三省总司令香翰屏将军故居；
                            有美丽的越州天湖和南流江，每逢农历二、五、八圩日，各方宾客云集，商贸繁荣，是经商、旅游、度假的好地方。</P>
                    </div>
                    <!-- 拖放 -->
                    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <script src="js/tuofang.js"></script>
                        <img src="image/tuofang.png" id="drag1" draggable="true" ondragstart="drag(event)" width="65"
                            height="69">
                    </div>
                    <div>
                        <a name="lsyg" id="lsyg"></a>
                        <h3>▌历史沿革</h3>

                        <a name="ls" id="ls"></a>
                        <p>南朝宋泰始七年（471年）设立越州置临漳郡，州治、郡治即在今石埇镇坡子坪村的仰天窝。</p>
                        <p>清道光八年（1828年），石埇是合浦县16个团局中石州团的一部分。</p>
                        <img src="image/1.png" style="float: right;" width="400px" height="250px">
                        <p>民国初至民国十五年（1926年），石埇是原合浦县石州区下的公局。</p>
                        <p>民国十九年（1930年）秋，废区改公局为乡，石埇是乡治地。</p>
                        <p>1961年，石埇是张黄区下的一个公社。</p>
                        <!-- 拖放div -->
                        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                        <p>1963年，石埇社区合并泉水公社。</p>
                        <p>1987年8月，复设石埇乡。</p>
                        <p>1993年，石埇乡改为石埇镇。</p>
                    </div>

                    <div>
                        <a name="dlhj" id="dlhj"></a>
                        <h3>▌地理环境</h3>

                        <p><b>位置境域</b></p>
                        <p>石埇镇地处广西壮族自治区浦北县东南部，东接博白县菱角镇，南连合浦县曲樟镇，西与泉水镇相邻，北靠安石镇；
                            辖区东西最大距离7.2千米，南北最大距离7.8千米，总面积45.59平方千米；镇中心大致位于东经109°35′12″，
                            北纬21°57′01″。</p>

                        <p><b>地形地貌</b></p>
                        <p>石埇镇地处丘陵地带，一般海拔在200米-500米之间，辖区被南流江一分为二，存在一定区域的流水侵蚀地貌。</p>

                        <p><b>气候特征</b></p>
                        <p>石埇镇地处低纬地区，太阳辐射强，日光充足，气候温暖，热量丰富，雨量充沛，冬短夏长，属南亚热带季风气候区，
                            冬季多偏北风，夏季多偏南风。</p>
                        <img src="image/2.png" style="float: right;" width="400px" height="250px">
                        <p><b> 自然灾害</b></p>
                        <p>石埇镇的主要自然灾害有洪涝水灾、雷击、风灾等。水灾主要发生在每年春夏两季。风灾一年四季均有。</p>

                        <p><b>水文情况</b></p>
                        <p>石埇镇境内属南流江水系，南流江自菱角镇马口入境，由旺盛江村委独石角队至油滩村委山排队，至泉水镇，
                            境内河道长13.5公里，有大型水库2座。</p>

                    </div>

                    <div>
                        <a name="zrzy" id="zrzy"></a>
                        <h3>▌自然资源</h3>

                        <p><b> 土地资源</b></p>
                        <p> 截至2012年，石埇镇有耕地面积12021亩，人均0.61亩；林地面积共计26344亩。 </p>

                        <p><b> 矿藏资源</b></p>
                        <p> 石埇镇境内矿藏资源主要为建筑用沙，集中分布在南流江一带；此外还发现有玉、牛筋石、玛瑙等宝石。</p>
                    </div>

                    <div>
                        <a name="jjgk" id="jjgk"></a>
                        <h3>▌经济概括</h3>

                        <p><b>综述</b></p>
                        <p>2012年，石埇镇实现工业生产总值3.6亿元，农业总产值1.2亿元，年财政收入764万元，社会固定资产投资1.49亿元；
                            从各主要税种看，完成营业税15万元，增值税286万元，企业所得税200万元。人均财政收入5328元。</p>

                        <img src="image/xj.jpg" style="float: right;" width="300px" height="200px">
                        <p><b>第一产业</b></p>
                        <p>石埇镇在解放前，由于耕作技术落后，缺少水利设施，粮食产量较低，亩产不到100公斤。
                            解放后，实行土地改革，兴修水利，一方面加大农田水利建设力度，另一方面大力推广水稻杂交良种和水稻抛秧。
                            1987年全乡粮食播种面积1154.3公顷，总产量313万公斤。1990年全乡粮食播种面积1111.33公顷，
                            总产量391.5万公斤，人均有粮290.5公斤。1995年全镇粮食播种面积1017.73公顷，总产量365万公斤。
                            2002年开始，该镇形成以甘蔗为支柱，以水稻、水果、花生、香蕉种植为辅的农业生产结构，
                            当年全镇香蕉种植面积333.33多公顷。2005年全镇粮食播种面积1093.53公顷，总产量4593吨。
                            2008年，新增甘蔗种植面积290公顷，全镇种植面积达600公顷，占全农业生产镇耕地面积的65%以上，
                            总产量为3.6万吨，比2007年增长322%。农林渔业总产值、总产量与2007年持平。</p>
                        <p>2012年，石埇镇农业以种植甘蔗、水稻、香蕉、荔枝、龙眼、玉米、马铃薯、菠萝为主，全年农业总产值1.2亿元；
                            甘蔗种植面积1.1万亩，总产量首超5万吨，总收入达1600万元；香蕉种植面积达5800亩，总产量3万吨；
                            桉树种植面积超过1万亩；重点发展养蜂、养猪、养羊、养佛鳄龟等养殖业。</p>

                        <p><b>第二产业</b></p>
                        <p>石埇镇在解放前只有陶器小手工业。解放后，以陶器业为主的乡镇企业快速发展。
                            1990年有陶器厂15间，产值225万元，还有烟花爆竹厂、土纸厂、草帽厂、油坊、糕点加工厂等企业。
                            1994年，石埇陶器总厂投资200多万元进行技术改造，建造39孔推板窑，年产值600多万元。
                            1995年，全镇乡镇企业总产值为1.38亿元。2000年扶持地方经济能人投资200多万元创建一家烟花有限公司。
                            2004年6月，引进200多万元创建一个竹片加工厂，同年9月引进500多万元创建一家木制品有限公司。
                            2008年，全镇乡镇企业发展到26家，比1995年增加11家，从业人员450人，企业总产值达9800万元。</p>
                        <p>2012年。石埇镇工业以烟花、造纸、木材加工、建筑材料为主，全年工业生产总值3.6亿元，规模以上企业1家，职工250人。
                            实现工业增加值0.4亿元，比2011年增长30.7%。</p>

                        <p><b>第三产业</b></p>
                        <p>石埇镇在清代中期成圩，在当时是博白、合浦、浦北三县交界的唯一集市。
                            外地客商云集，稻米、禽畜、花生、豆类、蔬菜、工艺品、日用铁器、农具、合浦的海鲜干货、
                            本地的药材等都在圩市集散交易，圩日有5000~8000人赶集。解放后，随着合浦水库大坝的修筑，
                            南流江的航运基本中断，交通相对落后，圩日由3天一圩改为7～10天一圩，石埇圩市逐渐失去昔日的繁华。
                            1991年，当时的石埇乡建成集镇区18.6公顷。
                            2008年，石埇镇集市上的主要商品有时新衣服、家用电器、家具、传统农贸产品等，圩期恢复为3天一圩，
                            约3000人赶集，商品年交易额4000万元。</p>
                        <img src="image/3.png" style="float: right;" width="300px" height="200px">
                        <p>2012年末，石埇镇境内有农村信用合作联社等金融机构各类存款余额1.009亿元。</p>
                    </div>

                    <div>
                        <a name="shfz" id="shfz"></a>
                        <h3>▌社会发展</h3>

                        <p><b>文化艺术</b></p>
                        <p>解放后，石埇镇的赛龙舟等文化传统得到传承，该镇组建了石埇龙舟队，先后组队参加由县举办的4届龙舟赛。
                            1987年石埇设乡后，当年建立乡文化站，有文化活动室1间24平方米，配备文化专干1人。
                            随后陆续增添灯光球场、广播室、录像放映室、桌球室、乡电影院、乡村图书阅览室等文化娱乐设施，
                            开展墙报宣传、文艺广播、录像放映、科技培训等文化活动。1991年，经评估乡文化站达到市级标准。
                            1993年11月开通有线广播电视。2004年5月开通网络宽带。2008年，全镇共有乡村图书室1个，藏书2000册。</p>
                        <p>截至2012年，石埇镇建有镇文化、广播电视站1处；有村级文化活动中心1处，图书馆1个，各类图书室7个，
                            藏书21000册；有文艺团队3个，共45人，有县级、省级文物保护单位各1处。</p>
                        <p>石埇军乐队曾代表石埇镇在2011年钦州市第二届群众艺术节比赛中获二等奖；
                            在2012年参加第二届欢乐田园文艺汇演荣获一等奖；在2012年参加的全区基层群众文艺汇演获优秀奖。
                            伟业文艺队代表该镇在2013、2014年浦北县山歌大赛中连续两年获二等奖。</p>

                        <p><b>教育事业</b></p>
                        <p>民国三十二年（1943年），石埇乡设有中心校1所，保国民校7所。
                            1981年，建立乡级联办初中石埇中学。1988年，共集资34万元，新建校舍940平方米，维修危房2840平方米，
                            全部实现课室硬底化。1990年，全乡有中小学9所，教师162人，学生2702人。
                            小学升学率为97.3%，巩固率99.81%，毕业率99.6%，普及率98.3%，超过部颁标准。
                            1991～1995年，共集资172.1万元改造和建设各中小学教学楼，完成九年义务教育和扫盲任务。
                            小学入学率为99.95%，升学率为100%。2008年，石埇镇镇有中学1所，学生628人；小学7所，学生1869人。</p>
                        <p>截至2012年，石埇镇有正规幼儿园1所，在园幼儿110人，专任教师5人；小学7所，在校学生1518人，专任教师104人，
                            小学适龄儿童入学率100%；初中1所，初中在校学生515人，专任教师32人。九年义务教育覆盖率100%。</p>

                        <p><b>医疗卫生</b></p>
                        <p>1988年8月，石埇镇成立石埇卫生院（之前属泉水卫生院下属卫生所），占地面积2534平方米，有职工3人。
                            1997年，全院职工8人，其中卫技人员6人（中医师2人，西医士3人，其他1人），工勤2人。1990年，有乡卫生院1个，
                            村卫生室10个，经抽查，儿童防疫接种合格率为97%，全乡人均预期寿命从解放前的50岁增加到70岁。
                            1991年，新建门诊楼占地面积1667平方米，建筑面积700平方米。1997年全院门诊量7689人次。
                            2004年，投资70多万元建设镇卫生院综合大楼，占地面积800平方米，建筑面积1996平方米，设有病床30张，
                            有医务人员26人；同时购进一批先进医疗设备，推行新型农村合作医疗和城镇居民医疗保险制度。
                            2008年，镇卫生院设有内科、外科、妇产科、儿科、中医科、防保科等科室和住院部，有卫生技术人员22人，
                            年门诊量11234人次，住院1600人次。全镇参加新型农村合作医疗14105人，参合率85%。</p>
                        <p>截至2012年，石埇镇有镇卫生院1个，村级卫生室7处，专业卫生人员33名，其中执业医师1人，主治医师2人，
                            执业助理医师3人，注册护士2人。村民绝大部分参加新型农村合作医疗，参保率达95%。</p>

                        <p><b>社会保障</b></p>
                        <p>2012年，石埇镇城镇最低生活保障户数54户，89人，发放保障金22万元，月人均200元。农村最低生活保障户数714户，
                            1187人，发放保障金129万元，月人均91元。五保供养214人，有敬老院1家，五保新村3个，集中供养35人，
                            发放五保供养费43万元。大病救助110人，共计40万元，临时救济40人，共计0.8万元。发放棉被、棉衣等衣物1200多件，
                            发放荒粮2.8万公斤，受惠群众1100多户。</p>
                    </div>

                    <div>
                        <a name="jtys" id="jtys"></a>
                        <h3>▌交通运输</h3>
                        <img src="image/gc1.png" style="float: right;" width="250px" height="250px">
                        <p>解放前，石埇镇交通闭塞，没有车辆，只靠南流江的水运交通；旧街道狭窄，楼房稀少，只有一个小圩场。
                            解放后，兴修了公路，有可直达浦北、北海、合浦、南宁的班车。1993年投入资金20多万元修建了越州大道。
                            2007年1月，投资460万元，建设长256米、宽8.5米的石埇大桥；同年11月，又投资460万元建设长338米、
                            宽8.5米的八东大桥。2008年，投资910.2万元续建石埇大桥、八东大桥；同时，
                            筹资修建石埇至旺盛江6公里长的四级公路和3条总长6公里的村道；投资15万元，硬底化长300多米的石埇老街。</p>

                        <p>截至2012年，石埇镇境内有省道S313线贯穿，另有县道X316公路穿越。2016年8月，
                            石埇镇至钦州的二级公路进入施工图勘察设计招标阶段，该二级公路属省道S313线，
                            终点与国道G242钦州至陆屋一级公路相接。路线总里程约112.3公里，项目估算总投资98620万元。</p>

                    </div>

                    <div>
                        <a name="gjrw" id="gjrw"></a>
                        <h3>▌古迹人物</h3>

                        <p><b>越州故城遗址</b></p>
                        <p>越州故城遗址位于石埇镇坡子坪村的仰天窝。据《南齐书》记载，为南朝宋泰始七年（471年）建立，平面呈回字形，
                            占地面积约24万平方米，城周长2028米。北城墙依山建筑，地势高耸险要，南城墙比较平缓。残墙最高处达14米，
                            其余平均高3米，城基最宽处达16米，一般宽8～9米，四周每百步筑一马面。古城分内外城，外城南北长800米，
                            东西宽500米。城内有城（俗称官厅地），城外有沟。内城亦称子城（指官厅地），依山坡筑于城内西北区，地势较高，
                            可俯视全城，并有墙与外城相隔，其北面又有壕沟险阻。1981年，越州故城遗址被定为自治区级重点文物保护单位。
                            2013年，被国务院列为第七批全国重点文物保护单位。</p>
                        <img src="image/gj10.png" style="float: right;" width="350px" height="200px">
                        <p><a href="building_site.html">了解详情>>></a></p>

                        <p><b>香翰屏故居</b></p>
                        <p>香翰屏故居座落在石埇镇坡子坪村，分为增城子、嘉李园两个部分，分别始建于1936年、1929年，
                            由于部分建材来源于广州等地，筹建时间较长。它是一座集西方建筑风格和中国传统古建筑特色于一体的别墅式、
                            庄园式的将军府邸，共有大小房屋116间，占地面积35亩，建筑面积5044平方米。</p>
                        <p><a href="building_xhp_guju.html">了解详情>>></a></p>

                        <p><b>香翰屏</b></p>
                        <p>香翰屏（1890～1978），别名桂珍，别号墨林，石埇镇坡子坪村人。民国元年（1912年）赴广州学法政，加入国民党，
                            曾任闽粤赣边区上将总司令。1946年7月27日退役，1949年秋迁居香港。</p>
                        <p>香翰屏是1931年、1935年、1945年、1947年的全国国民大会代表，并被连选连任四届国民党中央监察委员。
                            1978年8月7日，病逝于香港。1966年4月于台湾出版了《香翰屏将军草书初集》。</p>
                        <p><a href="person_xhp.html">了解详情>>></a></p>
                    </div>
                </div>
            </div>
        </div>


        <div class="box3">
            <!-- 底部 -->
            <footer>
                <a href="index.html">本站首页</a>
                <b>|</b>
                <a href="building_site.html">故城遗址</a>
                <b>|</b>
                <a href="building_xhp_guju.html">香翰屏故居</a>
                <b>|</b>
                <a href="#">关于我们</a>
                <b>|</b>
                <a href="http://www.gxpb.gov.cn/">浦北县门户网</a>
            </footer>
            <footer>本网站始建于2019年12月</footer>
            <footer>网站创建人：陈科锋（chenkefeng）</footer>
            <footer>本网站为HTML5期末考查作品</footer>
        </div>
    </div>


    <button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
    <!-- 调用js代码 -->
    <script src="js/return_top.js"></script>
</body>

</html>