一、??作品介紹
HTML實(shí)例網(wǎng)頁(yè)代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)度秘。該實(shí)例里面有設(shè)置了css的樣式設(shè)置顶伞，有div的樣式格局，這個(gè)實(shí)例比較全面剑梳，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開(kāi)始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)唆貌。
二、??作品效果
??視頻演示
https://live.csdn.net/v/embed/239909
(title-D52JP 家鄉(xiāng)廣東表格垢乙、視頻編 頁(yè)面8個(gè) 無(wú)js)]
?? 截圖演示
三锨咙、?? 作品代碼
??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">首頁(yè)</a>
</li>
<li><a href="guanyu.html">關(guān)于</a></li>
<li><a href="lishiyange.html">歷史沿革</a></li>
<li><a href="dilihuanjing.html">地理環(huán)境</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">地理環(huán)境 <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">廣東省地處中國(guó)大陸最南部。東鄰福建追逮，北接江西酪刀、湖南，西連廣西钮孵，南臨南海骂倘，珠江口東西兩側(cè)分別與香港、澳門(mén)特別行政區(qū)接壤巴席，西南部雷州半島隔瓊州海峽與海南省相望历涝。全境位于北緯20°13′～25°31′和東經(jīng)109°39′～117°19′之間。東起南澳縣南澎列島的赤仔嶼漾唉，西至雷州市紀(jì)家鎮(zhèn)的良坡村荧库，東西跨度約800公里；北自樂(lè)昌縣白石鄉(xiāng)上坳村毡证，南至徐聞縣角尾鄉(xiāng)燈樓角电爹，跨度約600公里。北回歸線從南澳—從化—封開(kāi)一線橫貫廣東
料睛。廣東省境內(nèi)陸地面積為17.98萬(wàn)平方公里丐箩，約占全國(guó)陸地面積的1.87%摇邦；其中島嶼面積1592.7平方公里，約占全省陸地面積的0.89%屎勘。全省沿海共有面積500平方米以上的島嶼759個(gè)（由于歷史原因施籍，東沙群島被臺(tái)灣當(dāng)局控制），數(shù)量?jī)H次于浙江概漱、福建兩省丑慎，居中國(guó)第三位。另有明礁和干出礁1631個(gè)瓤摧。
廣東省岸線總長(zhǎng)度為4114公里竿裂。已開(kāi)發(fā)利用的岸線長(zhǎng)度為1414公里，約占總長(zhǎng)度的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">廣東省山脈大多與地質(zhì)構(gòu)造的走向一致腻异，以北東―南西走向居多，如斜貫粵西这揣、粵中和粵東北的羅平山脈和粵東的蓮花山脈悔常；粵北的山脈則多為向南拱出的弧形山脈，此外粵東和粵西有少量北西―南東走向的山脈给赞；山脈之間有大小谷地和盆地分布机打。平原以珠江三角洲平原最大，潮汕平原次之片迅，此外還有高要残邀、清遠(yuǎn)、楊村和惠陽(yáng)等沖積平原障涯。臺(tái)地以雷州半島―電白―陽(yáng)江一帶和海豐―潮陽(yáng)一帶分布較多罐旗。
東莞
構(gòu)成各類地貌的基巖巖石以花崗巖最為普遍，砂巖和變質(zhì)巖也較多唯蝶，粵西北還有較大片的石灰?guī)r分布九秀，此外局部還有景色奇特的紅色巖系地貌，如著名的丹霞山和金雞嶺等粘我；丹霞山和粵西的湖光巖先后被評(píng)為世界地質(zhì)公園鼓蜒；沿海數(shù)量眾多的優(yōu)質(zhì)沙灘以及雷州半島西南岸的珊瑚礁，也是十分重要的地貌旅游資源征字。沿海沿河地區(qū)多為第四紀(jì)沉積層都弹，是構(gòu)成耕地資源的物質(zhì)基礎(chǔ)。</div>
<span class="more">查看詳情</span>
</div>
<div class="img"><img src="images/4.jpg"></div>
<div class="text">
<div class="title">氣候環(huán)境</div>
<div class="clear"></div>
<div class="desc">廣東省屬于東亞季風(fēng)區(qū)匙姜，從北向南分別為中亞熱帶畅厢、南亞熱帶和熱帶氣候，是中國(guó)光氮昧、熱和水資源最豐富的地區(qū)之一框杜，且雨熱同期浦楣，四季常青。
從北向南咪辱，年平均日照時(shí)數(shù)由不足1500小時(shí)增加到2300小時(shí)以上振劳，年太陽(yáng)總輻射量在4200～5400兆焦耳/平方米之間，年平均氣溫約為19℃～24℃油狂。全省平均日照時(shí)數(shù)為1745.8小時(shí)历恐、年平均氣溫22.3℃。1月平均氣溫約為16℃～19℃专筷，7月平均氣溫約為28℃～29℃弱贼。
中山
廣東降水充沛，年平均降水量在1300～2500毫米之間仁堪，全省平均為1777毫米哮洽。降雨的空間分布基本上也呈南高北低的趨勢(shì)填渠。受地形的影響弦聂，在有利于水汽抬升形成降水的山地迎風(fēng)坡有恩平、海豐和清遠(yuǎn)3個(gè)多雨中心氛什，年平均降水量均大于2200毫米莺葫；在背風(fēng)坡的羅定盆地、興梅盆地和沿海的雷州半島枪眉、潮汕平原少雨區(qū)捺檬，年平均降水量小于1400毫米。降水的年內(nèi)分配不均贸铜，4～9月的汛期降水占全年的80%以上堡纬；年際變化也較大，多雨年降水量為少雨年的2倍以上蒿秦。
洪澇和干旱災(zāi)害經(jīng)常發(fā)生烤镐，臺(tái)風(fēng)的影響也較為頻繁。春季的低溫陰雨棍鳖、秋季的寒露風(fēng)和秋末至春初的寒潮和霜凍炮叶，也是廣東多發(fā)的災(zāi)害性天氣。</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多萬(wàn)海外僑胞渡处，占全國(guó)海外僑胞人數(shù)一半以上镜悉，分布世界160多個(gè)國(guó)家和地區(qū)，主要在東南亞的印度尼西亞医瘫、泰國(guó)侣肄、馬來(lái)西亞、新加坡醇份、越南稼锅、柬埔寨叮喳，歐美的美國(guó)、加拿大缰贝、法國(guó)馍悟、英國(guó)、德國(guó)剩晴，南美洲的秘魯锣咒、巴拿馬、巴西赞弥、委內(nèi)瑞拉毅整，大洋洲的澳大利亞、新西蘭绽左，非洲的毛里求斯悼嫉、馬達(dá)加斯加、南非等國(guó)家和地區(qū)拼窥。省內(nèi)有10.17萬(wàn)歸僑戏蔑、3000多萬(wàn)僑眷，主要集中在珠江三角洲鲁纠、潮汕平原和梅州等僑鄉(xiāng)地區(qū)以及23個(gè)華僑農(nóng)場(chǎng)
总棵。<br><br>廣東省2010年第六次全國(guó)人口普查廣東省常住人口為104303132人，同第五次全國(guó)人口普查2000年11月1日零時(shí)的86420000人相比改含，十年共增加17883132人情龄，增長(zhǎng)20.69%。年平均增長(zhǎng)率為1.90%捍壤。
2016年末常住人口10999萬(wàn)人骤视。
2019年末，全省常住人口11521.00萬(wàn)人鹃觉，比上年末增加175萬(wàn)人专酗。全年出生人口143.38萬(wàn)人，出生率12.54‰帜慢；死亡人口50.99萬(wàn)人笼裳，死亡率4.46‰；自然增長(zhǎng)人口92.38萬(wàn)人粱玲，自然增長(zhǎng)率8.08‰躬柬。
<br><br>根據(jù)第七次全國(guó)人口普查結(jié)果，2020年11月1日零時(shí)廣東省的常住人口為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;
}
四允青、??更多源碼
【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉(cāng)庫(kù)（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)、計(jì)算機(jī)基礎(chǔ)到前端常用框架的教程卵沉，涵蓋前端大部分必備知識(shí)（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
Gitee倉(cāng)庫(kù)地址（來(lái)個(gè)Star吧~）： https://gitee.com/zhanyuqiu2022/my-app
