当前位置：首页 > news >正文

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

news 来源：原创 2024/5/18 14:24:04

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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公里。北回归线从南澳—从化—封开一线横贯广东&nbsp;
。广东省境内陆地面积为17.98万平方公里，约占全国陆地面积的1.87%；其中岛屿面积1592.7平方公里，约占全省陆地面积的0.89%。全省沿海共有面积500平方米以上的岛屿759个（由于历史原因，东沙群岛被台湾当局控制），数量仅次于浙江、福建两省，居中国第三位。另有明礁和干出礁1631个。&nbsp;
广东省岸线总长度为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">广东省属于东亚季风区，从北向南分别为中亚热带、南亚热带和热带气候，是中国光、热和水资源最丰富的地区之一，且雨热同期，四季常青。&nbsp;
从北向南，年平均日照时数由不足1500小时增加到2300小时以上，年太阳总辐射量在4200～5400兆焦耳/平方米之间，年平均气温约为19℃～24℃。全省平均日照时数为1745.8小时、年平均气温22.3℃。1月平均气温约为16℃～19℃，7月平均气温约为28℃～29℃。&nbsp;



















































































中山


广东降水充沛，年平均降水量在1300～2500毫米之间，全省平均为1777毫米。降雨的空间分布基本上也呈南高北低的趋势。受地形的影响，在有利于水汽抬升形成降水的山地迎风坡有恩平、海丰和清远3个多雨中心，年平均降水量均大于2200毫米；在背风坡的罗定盆地、兴梅盆地和沿海的雷州半岛、潮汕平原少雨区，年平均降水量小于1400毫米。降水的年内分配不均，4～9月的汛期降水占全年的80%以上；年际变化也较大，多雨年降水量为少雨年的2倍以上。&nbsp;
洪涝和干旱灾害经常发生，台风的影响也较为频繁。春季的低温阴雨、秋季的寒露风和秋末至春初的寒潮和霜冻，也是广东多发的灾害性天气。</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;

	
}