HTML静态网页成品作业(HTML+CSS)——家乡岳阳华容网页设计制作(1个页面)

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

---

一、作品介绍

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

二、作品演示

1、首页

三、代码目录

四、网站代码

HTML部分代码

<div class="top">
				<div class="logo">
					<img src="./img/logo.png" alt="">
				</div>
				<div class="top_right">
					<a href="#wrapper" class="on">华容首页</a>
					<a href="#gaikuang">华容概况</a>
					<a href="#meishi">华容美食</a>
					<a href="#jingdian">华容景点</a>
				</div>
			</div>
			
			<div class="middle">
				<div class="middle_img">
					<img src="./img/img.jpg" alt="">
				</div>
				
				<div id="gaikuang" class="gaikuang mt20">
					<div class="gaikuang_left">
						<h3>华容概况</h3>
						<p>说起华容，人们自然会想起唐代诗人李白“云想衣裳花想容，春风拂槛露华浓”的诗句，想起四十五里桃花山，想起“关公义释华容道”。华古通“花”，顾名思义，一听就知道这是一个美丽动人、秀色可餐的地方。
						</p>
						<p>
							华容地处湘北鄂南边界，万里长江流经东北，八百里洞庭绕于东南，可谓襟江带湖，得“水”独厚。省道306线、202线、203线贯穿全境，穿境而过的岳常高速即将兴建，是湘北、鄂南通往桃花源、张家界、南长城和三峡等著名旅游地带的唯一公路交通新干线。县城距京广铁路、京珠高速公路和城陵矶外贸码头仅60余公里。
						</p>
					</div>
					<div class="gaikuang_right">
						<img src="./img/img1.jpg" alt="">
						<img src="./img/img5.jpg" alt="">
						<img src="./img/img6.jpg" alt="">
						<img src="./img/img7.jpg" alt="">
					</div>
				</div>

CSS部分代码

* {
	padding: 0;
	margin: 0;
}
.mt20 {
	margin-top: 20px;
}
/* 背景图 */
.wrapper {
	background-image: url(../img/beijing.jpg);
	background-repeat: no-repeat;
	background-position: left top ;
	background-size: 100% 100%;
}
.wrapper_width {
	width: 1200px;
	margin: 0 auto;
}
.top {
	padding: 8px 0;
}
.top .logo {
	display: inline-block;
}
.top .logo img {
	height: 70px;
}
.top_right {
	float: right;
	margin-top: 23px;
	padding-right: 15px;
}
.top_right a {
	margin-left: 55px;
	font-size: 19px;
	font-weight: bold;
	text-decoration: none;
	color: #505050;
}
.top_right a:hover,.top_right a.on {
	color: #d00;
}
.middle {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
}

五、源码获取

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