一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、🔗作品效果
▶️视频演示
https://live.csdn.net/v/embed/239909
(title-D52JP 家乡广东表格、视频编 页面8个 无js)]
🧩 截图演示
08.png
07.png
06.png
05.png
04.png
03.png
02.png
01.png
三、💒 作品代码
🧱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>广东省2010年第六次全国人口普查广东省常住人口为104303132人，同第五次全国人口普查2000年11月1日零时的86420000人相比，十年共增加17883132人，增长20.69%。年平均增长率为1.90%。
2016年末常住人口10999万人。
2019年末，全省常住人口11521.00万人，比上年末增加175万人。全年出生人口143.38万人，出生率12.54‰；死亡人口50.99万人，死亡率4.46‰；自然增长人口92.38万人，自然增长率8.08‰。
<br><br>根据第七次全国人口普查结果，2020年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;
}
四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
