HTML静态网页作业(HTML+CSS)——我的家乡主题网页设计制作(1个页面)

最新推荐文章于 2024-05-22 12:32:10 发布

崽子爱码

最新推荐文章于 2024-05-22 12:32:10 发布

阅读量1k

点赞数 12

分类专栏： html网页设计与制作学生HTML个人网页作业作品静态网页文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_42283461/article/details/136323223

版权

html网页设计与制作同时被 3 个专栏收录

118 篇文章 21 订阅

订阅专栏

静态网页

115 篇文章 0 订阅

订阅专栏

学生HTML个人网页作业作品

30 篇文章 0 订阅

订阅专栏

本文介绍了采用纯CSS布局的网页作品，包括HTML结构、CSS样式以及如何获取源码。内容展示了HTML头部、导航、主要内容区域和底部版权信息，展示了常德市的特色和旅游信息。

摘要由CSDN通过智能技术生成

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

一、作品介绍

🏷️本套采用DIV+CSS布局，未使用Javacsript代码，共有1个页面。

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

1、HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<div class="body_top">
			<div class="body_top_city">
				湖南省常德市
			</div>
		</div>
		<div class="body_nav">
			<div class="body_width">
				<div><a href="">常德首页</a></div>
				<div><a href="">常德简介</a></div>
				<div><a href="">常德缘来</a></div>
				<div><a href="">常德图册</a></div>
			</div>
		</div>
		<div class="body_content">
			<div class="body_width">
				<div class="body_content_1">
					<img src="./image/2f6f3040744349ba83e6dc76c6eadc91.png" alt="">
					<div>
						<p>常德，位于湖南省西北部，洞庭湖西岸，史称“川黔咽喉，云贵门户”。</p>
						<p>一篇《桃花源记》，让常德拥有了“世外桃源”、“福地洞天”的美誉，常德因此拥有了一个美丽的名字——桃花源里的城市。</p>
						<p>一则“善卷让王”的典故， 使“常德德山山有德”的民谣千古流传，常德因此被誉为中华民族道德文化发祥地。</p>
						<p>一个“刘海砍樵”的传说，把常德“爱神”追求幸福生活、美好爱情的壮举代代颂扬，常德因此成为一片多情的热土。</p>
						<p>今天的常德已成为中国中等城市建设的典范。先后荣获全国文明城市、国家节水型城市、中国优秀旅游城市、国家卫生城市、国家园林城市、中国首届魅力城市、国际花园城市、全国交通管理模范城市、国家环境保护模范城市、中华诗词之市的称号。</p>
					</div>
				</div>
				<div class="body_content_title">
					为何叫常德？
				</div>
				<div class="body_content_video">
					<video width="100%" controls>
					  <source src="./image/yl.mp4" type="video/mp4">
					</video>
				</div>
				<div class="body_content_title">
					常德图册
				</div>
				<div class="body_content_tuce">
					<div class="body_content_tu">
						<img src="./image/1.jpeg" alt="">
					</div>
					<div class="body_content_tu">
						<img src="./image/2.png" alt="">
					</div>
					<div class="body_content_tu">
						<img src="./image/3.jpeg" alt="">
					</div>
					<div class="body_content_tu">
						<img src="./image/4.jpeg" alt="">
					</div>
					<div class="body_content_tu">
						<img src="./image/5.png" alt="">
					</div>
					<div class="body_content_tu">
						<img src="./image/6.jpeg" alt="">
					</div>
					<div class="body_content_tu">
						<img src="./image/7.jpeg" alt="">
					</div>
					<div class="body_content_tu">
						<img src="./image/8.png" alt="">
					</div>
					<div class="body_content_tu">
						<img src="./image/9.jpeg" alt="">
					</div>
				</div>
				
			</div>
		</div>
		
		<div class="footer">
			欢迎大家来常德旅游！
		</div>
	</body>
</html>

2、CSS部分代码

* {
	padding: 0;
	margin: 0;
}
.body_width {
	width: 1120px;
	margin: 0 auto;
	box-sizing: border-box;
}
.body_top {
	background-color: rgb(16,86, 138);
}
.body_top_city {
	text-align: center;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 3px;
	padding: 40px 0;
}
.body_nav {
	background-color: rgba(0, 110, 171);
}
.body_nav .body_width {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
}
.body_nav .body_width div {
	width: 20%;
	text-align: center;
}
.body_nav .body_width div a {
	text-decoration: none;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}