1200字范文 > web前端期末大作业：我的家乡广东（html+css布局）div制作

web前端期末大作业：我的家乡广东（html+css布局）div制作

时间：2020-03-01 21:16:38

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

D52JP 家乡广东表格、视频编页面8个无js

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><div class="main" ><div class="content12"><div class="daohang"><ul><li><a href="index.html">首页</a></li><li><a href="guanyu.html">关于</a></li><li><a href="lishiyange.html">历史沿革</a></li><li><a href="dilihuanjing.html">地理环境</a></li><li><a href="ziranziyuan.html">自然资源</a></li><li><a href="renkou.html">人口</a></li><li><a href="zhumingrenwu.html">著名人物</a></li><li><a href="shipinxinshang.html">视频欣赏</a></li></ul></div></div><div class="clear"></div><div class="content12"><div class="guanggaotupian"><div class="img"><img src="images/1.jpg"></div></div></div><div class="clear"></div><div class="content12"><div class="taitou"><div class="title">地理环境 <i></i></div></div><div class="dlhj"><div class="img"><img src="images/2.jpg"></div><div class="text"><div class="title">位置境域</div><div class="clear"></div><div class="desc">广东省地处中国大陆最南部。东邻福建，北接江西、湖南，西连广西，南临南海，珠江口东西两侧分别与香港、澳门特别行政区接壤，西南部雷州半岛隔琼州海峡与海南省相望。全境位于北纬20°13′～25°31′和东经109°39′～117°19′之间。东起南澳县南澎列岛的赤仔屿，西至雷州市纪家镇的良坡村，东西跨度约800公里；北自乐昌县白石乡上坳村，南至徐闻县角尾乡灯楼角，跨度约600公里。北回归线从南澳—从化—封开一线横贯广东 。广东省境内陆地面积为17.98万平方公里，约占全国陆地面积的1.87%；其中岛屿面积1592.7平方公里，约占全省陆地面积的0.89%。全省沿海共有面积500平方米以上的岛屿759个（由于历史原因，东沙群岛被台湾当局控制），数量仅次于浙江、福建两省，居中国第三位。另有明礁和干出礁1631个。 广东省岸线总长度为4114公里。已开发利用的岸线长度为1414公里，约占总长度的35%。</div><span class="more">查看详情</span></div><div class="img"><img src="images/3.jpg"></div><div class="text"><div class="title">地形地貌</div><div class="clear"></div><div class="desc">广东省山脉大多与地质构造的走向一致，以北东―南西走向居多，如斜贯粤西、粤中和粤东北的罗平山脉和粤东的莲花山脉；粤北的山脉则多为向南拱出的弧形山脉，此外粤东和粤西有少量北西―南东走向的山脉；山脉之间有大小谷地和盆地分布。平原以珠江三角洲平原最大，潮汕平原次之，此外还有高要、清远、杨村和惠阳等冲积平原。台地以雷州半岛―电白―阳江一带和海丰―潮阳一带分布较多。东莞构成各类地貌的基岩岩石以花岗岩最为普遍，砂岩和变质岩也较多，粤西北还有较大片的石灰岩分布，此外局部还有景色奇特的红色岩系地貌，如著名的丹霞山和金鸡岭等；丹霞山和粤西的湖光岩先后被评为世界地质公园；沿海数量众多的优质沙滩以及雷州半岛西南岸的珊瑚礁，也是十分重要的地貌旅游资源。沿海沿河地区多为第四纪沉积层，是构成耕地资源的物质基础。</div><span class="more">查看详情</span></div><div class="img"><img src="images/4.jpg"></div><div class="text"><div class="title">气候环境</div><div class="clear"></div><div class="desc">广东省属于东亚季风区，从北向南分别为中亚热带、南亚热带和热带气候，是中国光、热和水资源最丰富的地区之一，且雨热同期，四季常青。 从北向南，年平均日照时数由不足1500小时增加到2300小时以上，年太阳总辐射量在4200～5400兆焦耳/平方米之间，年平均气温约为19℃～24℃。全省平均日照时数为1745.8小时、年平均气温22.3℃。1月平均气温约为16℃～19℃，7月平均气温约为28℃～29℃。 中山广东降水充沛，年平均降水量在1300～2500毫米之间，全省平均为1777毫米。降雨的空间分布基本上也呈南高北低的趋势。受地形的影响，在有利于水汽抬升形成降水的山地迎风坡有恩平、海丰和清远3个多雨中心，年平均降水量均大于2200毫米；在背风坡的罗定盆地、兴梅盆地和沿海的雷州半岛、潮汕平原少雨区，年平均降水量小于1400毫米。降水的年内分配不均，4～9月的汛期降水占全年的80%以上；年际变化也较大，多雨年降水量为少雨年的2倍以上。 洪涝和干旱灾害经常发生，台风的影响也较为频繁。春季的低温阴雨、秋季的寒露风和秋末至春初的寒潮和霜冻，也是广东多发的灾害性天气。</div><span class="more">查看详情</span></div></div></div><div class="clear"></div><div class="content12"><div class="taitou"><div class="title">人口 <i></i></div></div><div class="rk"><div class="text"><div class="desc"><br><br>广东有3000多万海外侨胞，占全国海外侨胞人数一半以上，分布世界160多个国家和地区，主要在东南亚的印度尼西亚、泰国、马来西亚、新加坡、越南、柬埔寨，欧美的美国、加拿大、法国、英国、德国，南美洲的秘鲁、巴拿马、巴西、委内瑞拉，大洋洲的澳大利亚、新西兰，非洲的毛里求斯、马达加斯加、南非等国家和地区。省内有10.17万归侨、3000多万侨眷，主要集中在珠江三角洲、潮汕平原和梅州等侨乡地区以及23个华侨农场。<br><br>广东省第六次全国人口普查广东省常住人口为104303132人，同第五次全国人口普查2000年11月1日零时的86420000人相比，十年共增加17883132人，增长20.69%。年平均增长率为1.90%。末常住人口10999万人。末，全省常住人口11521.00万人，比上年末增加175万人。全年出生人口143.38万人，出生率12.54‰；死亡人口50.99万人，死亡率4.46‰；自然增长人口92.38万人，自然增长率8.08‰。<br><br>根据第七次全国人口普查结果，11月1日零时广东省的常住人口为126012510人。 </div></div></div></div><div class="clear"></div><div class="content12"><div class="taitou"><div class="title">留言板 <i></i></div></div><div class="lybd"><form id="form" class="form"><div><input type="input" name="input" class="input" id="ziduan1" value="呢称" /></div><div class="clear"></div><div><input type="input" name="input" class="input" id="ziduan2" value="电话" /></div><div class="clear"></div><div><input class="radio" type="radio" name="radio3" value="男" checked />男<input class="radio" type="radio" name="radio3" value="女" />女</div><div class="clear"></div><div><div class="title"></div><textarea class="textarea" name="textarea" > 介绍</textarea></div><div class="clear"></div><button type="button" class="submit" id="sub" >提交</button></form></div></div><div class="clear"></div><div class="content12"><div class="dibu"><div class="desc">广东 </div></div></div><div class="clear"></div></div></body></html>

🏠CSS样式代码

@charset "utf-8";*{margin:0;padding:0;}body{margin:0 auto}.clear{clear:both;}a{color:#333;text-decoration:none;}a:hover{text-decoration:underline;}li{list-style-type:none;}img{width:auto;max-width:100%;}.main{width:1200px;margin:0 auto;overflow:visible;}.content12{width:1200px;margin:0 auto;}.daohang{}.daohang ul{width:1200px;float:left;}.daohang ul li{float:left;;width:100px;height:40px;line-height:40px;text-align:center;padding:10px 0px;position: relative;}.daohang ul li a.active{color:#000000;}.daohang ul li a{color:#000000;}.daohang li:hover a{color:#000000;}.daohang ul li.active{}.guanggaotupian{text-align:center;}.guanggaotupian img{width:1200px;}.taitou .title {font-size: 22px;margin-top:10px;margin-bottom:10px;margin-left:10px;margin-right:10px; }.taitou i {display: inline-block;vertical-align: middle;width: 30px;height: 3px;background:#FF6666;margin-left: 20px;}.dlhj{width:1200px;}.dlhj .img{width:462px;padding:0px 5px;float:left;}.dlhj img{width:462px;height:310px;}.dlhj .text{width:698px;height:300px;overflow:hidden;float:left;text-align:left;padding:5px;margin-top:20px;margin-bottom:20px;}.dlhj .desc{padding:10px 0px;}.dlhj .title{font-weight:bold;padding-top:10px;font-size:18px;}.dlhj .more{padding:5px 0px;color:#333333;font-size:14px;border-bottom:1px solid #333333;}.rk{width:1200px;}.rk .text{width:1180px;margin:10px;border-bottom-color:#FF6666;border-bottom-style:solid;border-bottom-width:2px;border-top-color:#FF6666;border-top-style:solid;border-top-width:2px;border-left-color:#FF6666;border-left-style:solid;border-left-width:2px;border-right-color:#FF6666;border-right-style:solid;border-right-width:2px;}.rk .desc{padding:5px;color:#ffffff;background:#FF6666;}.lybd {width:1200px;text-align:left;margin:0 auto;}.lybd form{line-height:40px;border-bottom-color:#000000;border-bottom-style:dashed;border-bottom-width:0px;border-top-color:#000000;border-top-style:dashed;border-top-width:0px;border-left-color:#000000;border-left-style:dashed;border-left-width:0px;border-right-color:#000000;border-right-style:dashed;border-right-width:0px;}.lybd select{text-align:left;margin:0px 10px;overflow:hidden;vertical-align:middle;height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;}.lybd checkbox,radio{text-align:left;margin:0px 10px;overflow:hidden;vertical-align:middle;height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;}.lybd input{text-align:left;margin:0px 10px;overflow:hidden;vertical-align:middle;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;}.lybd textarea{text-align:left;margin:0px 10px;overflow:hidden;vertical-align:middle;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;}.lybd .title{margin:0px 10px;}.lybd button{margin:10px 0px 0px 10px;text-align:center;line-height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;}.lybd .form{width:1168px;border-radius:25px;padding:15px;margin:0 auto;}.lybd .input{width:1140px;margin-bottom:10px;padding-left:10px;color:#999999;}.lybd .checkbox{width:auto;}.lybd .radio{width:auto;}.lybd .select{width:1150px;}.lybd .textarea{width:1150px;height:130px;color:#999999;}.lybd .submit{width:1150px;}.dibu .desc{text-align:center;color:#ffffff;background:#FF6666;padding:20px 0px;margin-top:10px;}.dibu img{}.guanyu {width:1200px; text-align: justify;}.guanyu .text{padding:10px;}.guanyu .img{text-align:center;}.guanyu .desc{padding:10px;text-align:left;float:left;text-align: justify;}.guanyu .list{text-align:center;}.guanyu .img{width:1050px;margin:5px auto;}.lishiyangeliebiao ul{width:1200px;}.lishiyangeliebiao ul li{width:1180px;padding:10px;float:left;}.lishiyangeliebiao ul li:hover{}.lishiyangeliebiao ul li img{width:344px;padding:5px;height:200px;float:left;}.lishiyangeliebiao ul li .title{margin:10px 0px;font-weight:bold;font-size:16px;}.lishiyangeliebiao ul li .desc{width:796px;text-align:left;float:left;padding:5px;margin-left:20px;}.lishiyangeliebiao ul li button{display:block;text-align:left;padding:5px 10px;margin-top:20px;}.dilihuanjingliebiao table{width:1180px;}.dilihuanjingliebiao table .img{width:580px;height:200px;}.dilihuanjingliebiao table .img img{width:570px;padding:5px;height:190px;}.dilihuanjingliebiao table .title{margin:10px 0px;font-weight:bold;font-size:16px;}.dilihuanjingliebiao table .title{width:174px;text-align:center;padding:5px;}.dilihuanjingliebiao table .desc{width:406px;text-align:left;padding:5px;}.ziranziyuanliebiao ul{width:1200px;}.ziranziyuanliebiao ul li{width:1180px;padding:10px;float:left;}.ziranziyuanliebiao ul li img{width:580px;margin:0px 10px;height:200px;float:left;}.ziranziyuanliebiao ul li .title{margin:10px 20px;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:2px}.ziranziyuanliebiao ul li .desc{width:1180px;text-align:left;padding:5px;}.renkou {width:1200px; text-align: justify;}.renkou .text{padding:10px;}.renkou .img{text-align:center;}.renkou .desc{padding:10px;text-align:left;float:left;text-align: justify;}.renkou .list{text-align:center;}.renkou .img{width:1050px;margin:5px auto;}.zhumingrenwu {width:1200px; text-align: justify;}.zhumingrenwu .text{padding:10px;}.zhumingrenwu .img{text-align:center;}.zhumingrenwu .desc{padding:10px;text-align:left;float:left;text-align: justify;}.zhumingrenwu .list{text-align:center;}.zhumingrenwu .img{width:1050px;margin:5px auto;}.shipinxinshang{text-align:center;}video{width:1180px;height:100%;;object-fit:fill; margin:10px;}