HTML静态网页成品作业(HTML+CSS)——我的家乡北京网页设计制作(7个页面)

🎉不定期分享源码，关注不丢失哦

文章目录

一、作品介绍
二、作品演示
三、代码目录
四、网站代码
- HTML部分代码
- CSS部分代码
五、源码获取

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有7个页面。

🏷️想要获取本文源码，点击前往吧

二、作品演示

1、首页

2、子页1

3、子页2

4、子页3

5、子页4

6、子页5

7、子页6

三、代码目录

四、网站代码

HTML部分代码

c 复制代码

<div class="page">
		<div class="banner"><img src="images/banner.jpeg" alt=""></div>
		<div class="nav">
			<ul>
				<a href="index.html"><li>首页</li></a>
				<a href="yg.html"><li>历史沿革</li></a>
				<a href="zy.html"><li>自然资源</li></a>
				<a href="jj.html"><li>经济</li></a>
				<a href="wh.html"><li>文化遗产</li></a>
				<a href="fj.html"><li>风景名胜</li></a>
				<a href="ms.html"><li>特产美食</li></a>
			</ul>
		</div>
		
		<div class="mid">
			<h2 class="mid-tit">北京</h2>
			<p>
				北京市（Beijing），简称"京"，古称燕京、北平，是中华人民共和国首都、直辖市、国家中心城市、超大城市， 国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心， 中国历史文化名城和古都之一，世界一线城市。 截至2023年10月，北京市下辖16个区，总面积16410.54平方千米。 2022年末，北京市常住人口2184.3万人。
			</p>
			<p>
				北京市地处中国北部、华北平原北部，东与天津市毗连，其余均与河北省相邻，中心位于东经116°20′、北纬39°56′，北京市地势西北高、东南低。西部、北部和东北部三面环山，东南部是一片缓缓向渤海倾斜的平原。境内流经的主要河流有：永定河、潮白河、北运河、拒马河等，北京市的气候为暖温带半湿润半干旱季风气候，夏季高温多雨，冬季寒冷干燥，春、秋短促。
			</p>
			<div class="img">
				<img src="./images/1.jpg" alt="">
			</div>
			<p>
				北京市是中国共产党中央委员会、中华人民共和国中央人民政府和中华人民共和国全国人民代表大会常务委员会所在地。 北京市成功举办夏奥会与冬奥会，成为全世界第一个"双奥之城"。 北京市是中华民族的发祥地之一， 世界著名古都和现代化国际城市， 荟萃了自元、明、清以来的中华文化优秀成果和优良传统，拥有众多名胜古迹和人文景观，是全球拥有世界文化遗产数量最多的城市。
			</p>
			<p>
				2023年， 北京全年实现地区生产总值43760.7亿元，按不变价格计算，比上年增长5.2%。第一产业实现增加值105.5亿元，下降4.6%；第二产业实现增加值6525.6亿元，增长0.4%；第三产业实现增加值37129.6亿元，增长6.1%。
			</p>
		</div>
		
		<div class="foot">我的家乡北京</div>
		
	</div>

CSS部分代码

复制代码

* {
	padding: 0;
	margin: 0;
}
li{
	list-style: none;
}
a{
	color: #000;
	text-decoration: none;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clear{
	clear: both;
}
body{
	background-color: #dbdada;
	font-size: 12px;
	color: #333;
}
.page{
	width: 1000px;
	margin: 0 auto;
	background-color: #FFF;
}
.banner{
	width: 100%;
	height: 260px;
	overflow: hidden;
}
.banner img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.nav{
	width: 100%;
	background-color:#5473b5;
}
.nav ul{
	width: 994px;
	margin: 0 auto;
	overflow: hidden;
}
.nav li{
	width: 142px;
	text-align: center;
	line-height: 40px;
	font-size: 16px;
	color: #FFF;
	float: left;
}

.nav li:hover{
	background-color: #40627d;
}

五、源码获取

🥇 ~ 关注我，点赞博文~ 每天带你涨知识!

🎁1.看到这里了就[点赞+好评+收藏]三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。

💙2.想要获取本文源码，点击前往吧