HTML静态网页成品作业(HTML+CSS)——熊猫介绍网页设计制作(1个页面)

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

---

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有1个页面。
💙想要获取本文源码，点击前往吧

二、作品演示

1、首页

三、代码目录

四、网站代码

HTML部分代码

<div class="top">
			<img src="./images/logo.jpg" alt="">
		</div>
		<div class="mid">
			<div class="midl">
				<h2>熊猫简介</h2>
				<p>大熊猫（学名：Ailuropoda melanoleuca）：属于熊科、大熊猫属的哺乳动物。仅有二个亚种。雄性个体稍大于雌性。体型肥硕似熊、丰腴富态，头圆尾短，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，体色为黑白两色，脸颊圆，有很大的“黑眼圈”，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。大熊猫皮肤厚，最厚处可达10毫米。黑白相间的外表，有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。</p>
				<p>
					大熊猫已在地球上生存了至少800万年，被誉为“活化石”和“中国国宝”即国兽，世界自然基金会的形象大使，是世界生物多样性保护的旗舰物种。截至2021年1月，中国大熊猫野生种群增至1864只。大熊猫是中国特有种，主要栖息地是中国四川、陕西和甘肃的山区。
				</p>
			</div>
			<div class="midr">
				<img src="./images/brrr.jpg" alt="">
			</div>
		</div>
		
		<div class="xt">
			<h2>形态特征</h2>
			<p>
				大熊猫体型肥硕似熊、丰腴富态，头圆尾短，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，饲养的熊猫略重，一般雄性个体稍大于雌性。头部和身体毛色黑白相间分明，但黑非纯黑，白也不是纯白，而是黑中透褐，白中带黄。秦岭地区的个体偏大，体毛粗糙，腹毛略呈棕色色泽。岷山（尤以青川平武）则个体较小，体毛也较前者为细，腹毛棕色不明显，但凉山的个体并不偏小。黑白相间的外表，有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。相对锋利的爪和发达有力的前后肢，有利于大熊猫能快速爬上高大的乔木。
			</p>
			<p>
				大熊猫皮肤厚，最厚处可达10毫米。身体不同部分的皮肤厚度也不一样，体背部厚于腹侧，体外侧厚于体内侧，皮肤的平均厚度约为5毫米，并且色白而富有弹性和韧性。
			</p>
			<p>
				大熊猫的视觉极不发达。这是由于大熊猫长期生活于密密的竹林里，光线很暗，障碍物又多，致使其目光变得十分短浅。此外由于它的瞳孔像猫一样是纵裂的。因此，当夜幕降临的傍晚，它们还能活动。
			</p>
			<div class="imgs">
				<img src="./images/1.jpg" alt="">
				<img src="./images/2.jpg" alt="">
				<img src="./images/3.jpg" alt="">
				<img src="./images/4.jpg" alt="">
				<img src="./images/5.jpg" alt="">
				<img src="./images/6.jpg" alt="">
			</div>
		</div>

CSS部分代码

.con {
	width: 1290px;
	margin: 0 auto;
	background-color: #fff;
}
.top {
	text-align: center;
	padding: 5px 0;
	box-shadow: 0 0 10px 0 #b1b1b1;
}
.top img{
	height: 100px;
}

.mid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
}
.midl {
	width: 600px;
}
.midl p {
	line-height: 1.6;
	color: #666;
}
.midr {
	width: 600px;
}
.midr img {
	width: 100%;
}
.xt{
	padding: 15px 20px;
}
.xt p {
	line-height: 1.6;
	color: #666;
}

五、源码获取

🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.想要获取本文源码，点击前往吧