HTML静态网页成品作业(HTML+CSS)——家乡常德介绍网页(1个页面)

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

文章目录

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


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

 <div class="top">
		<div class="topLogo">
			常德
		</div>
		<div class="topNav">
			<ul>
				<li><a href="">常德首页</a></li>
				<li><a href="">常德概况</a></li>
				<li><a href="">常德古迹</a></li>
				<li><a href="">常德民俗</a></li>
			</ul>
		</div>
		<div class="topGk">
			<p>
				常德,古称“武陵”“朗州”,湖南省辖地级市,位于湖南北部,江南洞庭湖西侧,武陵山下,史称“川黔咽喉,云贵门户”,是长江经济带、长江中游城市群、环洞庭湖生态经济圈的重要城市。全市总面积1.82万平方千米。根据2020年第七次人口普查数据,截止2020111日零时,全市常住人口5279102人。
			</p>
			<p>
				常德城名源自《老子》“为天下溪,常德不离”;历史故事“刘海砍樵”“孟姜女哭长城”以及陶渊明笔下的《桃花源记》等浪漫主义情结贯穿常德城二千多年的历史,开创了常德独有的“善德文化”。
			</p>
			<p>
				常德先后荣获全国文明城市 、中国优秀旅游城市、国家卫生城市、国家园林城市、中国首届魅力城市、国际湿地城市、国际花园城市、全国交通管理模范城市、国家环境保护模范城市、中华诗词之市等称号。
			</p>
			<p>
				2017年,常德市复查确认继续保留全国文明城市荣誉称号。 [5]  2018年重新确认国家卫生城市(区)。 [6]  2022年,常德实现地区生产总值4274.52亿元。
			</p>
			<p>
				20224月,第三届全国文明城市湖南省常德市因创建工作滑坡被取消全国文明城市荣誉称号。
			</p>
		</div>
	</div>
	
	<div class="midGj">
		<div class="miWidth">
			<div class="mgTitBox">
				<div class="mgTit">
					常德<span class="red">古迹</span>
				</div>
			</div>
			
			<div class="miList">
				<div class="miItem">
					<div class="miItemImg">
						<img src="./img/gj1.jpg" alt="">
					</div>
					<div class="miItemName">
						城头山古文化遗址
					</div>
				</div>
				<div class="miItem">
					<div class="miItemImg">
						<img src="./img/gj2.jpg" alt="">
					</div>
					<div class="miItemName">
						余家牌坊
					</div>
				</div>
				<div class="miItem">
					<div class="miItemImg">
						<img src="./img/gj3.jpg" alt="">
					</div>
					<div class="miItemName">
						八十垱遗址
					</div>
				</div>
				<div class="miItem">
					<div class="miItemImg">
						<img src="./img/gj4.jpg" alt="">
					</div>
					<div class="miItemName">
						桃花源古建筑群
					</div>
				</div>
			</div>
		</div>
	</div>


五、源码获取

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/672472.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Qt 学习笔记】Qt窗口 | 对话框 | Qt对话框的分类及介绍

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt窗口 | 对话框 | 模态对话框 文章编号&#xff1a;Qt 学习笔记 / 51…

API开发秘籍:揭秘Swagger与Spring REST Docs的文档自动化神技

在这个数字化时代&#xff0c;如何让你的业务像外卖一样快速送达顾客手中&#xff1f;本文将带你走进Spring Boot的世界&#xff0c;学习如何利用RESTful API构建一个高效、直观的“外卖帝国”。从基础的REST架构风格&#xff0c;到Spring MVC的魔力&#xff0c;再到Swagger和S…

解决kettle界面右上角的connect消失——且使用admin登录不上Kettle资源库

一、问题描述 1.1、Kettle界面右上角的connect消失了 当我们配置Kettle界面的资源库(Other Repositories)内容后,Kettle界面右上角的connect消失了;如下图所示: 1.2、使用默认的账户【admin】和密码【admin】登录不上kettle资源库 当我们切换到我们配置的数据库使用超管账…

排序-希尔排序

介绍 希尔排序属于那种没有了解过的直接看代码一脸懵逼的&#xff0c; 所以同学们尽量不要直接看代码&#xff0c;仔细阅读本篇博客内容。 插入排序本来算是一个低效排序&#xff0c; 一次只可以挪动一个数据&#xff0c; 但是&#xff0c;它的强来了&#xff01;&#xff01…

513.找树左下角的值

给定一个二叉树&#xff0c;在树的最后一行找到最左边的值。 示例 1: 示例 2: 思路&#xff1a; 深度最大的叶子结点一定是最后一行。 优先左边搜索&#xff0c;记录深度最大的叶子节点&#xff0c;此时就是树的最后一行最左边的值 代码&#xff1a; class Solution:def fi…

272 基于matlab的形态滤波和局域值分解(LMD)的齿轮故障诊断

基于matlab的形态滤波和局域值分解&#xff08;LMD&#xff09;的齿轮故障诊断&#xff0c;GUI交互界面。通过形态滤波对一维信号进行降噪处理&#xff0c;并通过LMD局部均值分解提取故障信号&#xff0c;最后提取处故障频率。程序已调通&#xff0c;可直接运行。 272 形态滤波…

红外听力教学考试系统-红外语音听力广播在大学英语四六级听力考试中应用

红外听力教学考试系统-红外语音听力广播在大学英语四六级听力考试中的应用 由北京海特伟业科技有限公司任洪卓发布于2024年6月1日 红外语音听力广播&#xff08;即红外听力教学考试系统&#xff09;在英语四六级听力考试的应用正日益凸显出其重要性和优越性。在当前的高等教育…

排序-插入排序与选择排序

插入排序 基本思想 把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新的有序序列 。 打扑克牌整理手牌用的就是插入排序的思想 代码实现 void InsertSort(int* a, int n) { assert(a); …

中间件模版引擎

文章目录 中间件1.自定义中间件1&#xff09;全局2&#xff09;局部中间件 2.内置中间件(静态资源目录&#xff09; Art-template1.模板语法1&#xff09;输出2&#xff09;原文输出3&#xff09;条件判断4&#xff09;循环5&#xff09;子模版6&#xff09;模版继承7&#xff…

2024四川三支一扶“考生信息表”照着填❗

2024四川三支一扶“考生信息表”照着填❗ ☑️四川三支一扶开始报名&#xff0c;大家要按照提示如实、准确、完整填写《高校毕业生“三支一扶”计划招募考生信息表》哦~ ☑️不知道怎么填写的宝子们&#xff0c;可以参考图1。 ☑️毕业证书编号如实填写&#xff0c;若是应届生&…

vue3 todolist 简单例子

vue3 简单的TodList 地址&#xff1a; https://gitee.com/cheng_yong_xu/vue3-composition-api-todo-app-my 效果 step-1 初始化项项目 我们不采用vue cli 搭建项目 直接将上图文件夹&#xff0c;复制到vscode编辑器&#xff0c;清空App.vue的内容 安装包 # 安装包 npm…

JVM双亲委派模型

在之前的JVM类加载器篇中说过&#xff0c;各个类加载器都有自己加载的范围&#xff0c;比如引导类加载器只加载Java核心库中的class如String&#xff0c;那如果用户自己建一个包名和类名与String相同的类&#xff0c;会不会被引导类加载器加载。可以通过如下代码测试&#xff0…

每周统计-20240531

用于测试程序的稳定性&#xff1a; 龙虎榜&#xff1a; 成交额&#xff1a; 封成比&#xff1a; 收盘前放量&#xff1a; 开盘抢筹&#xff1a; 封单额&#xff1a;

堆排序-java

这次主要讲了堆排序和堆的基本构造&#xff0c;下一期会详细讲述堆的各种基本操作。 文章目录 前言 一、堆排序 1.题目描述 2.堆 二、算法思路 1.堆的存储 2. 结点下移down 3.结点上移up 4.堆的基本操作 5.堆的初始化 三、代码如下 1.代码如下&#xff1a; 2.读入数据&#xff…

24年护网工具,今年想参加护网的同学要会用

24年护网工具集 吉祥学安全知识星球&#x1f517;http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247483727&idx1&sndb05d8c1115a4539716eddd9fde4e5c9&chksmc0e47813f793f105017fb8551c9b996dc7782987e19efb166ab665f44ca6d900210e6c4c0281&scene21…

2024拼多多 最新理论+实战干货,从入门到精通全链路多角度学习-7节课

基于最新规则理论结合实际的干货 课程内容&#xff1a; 01 2024年多多防比价新规则破局理论课与实操课.mp4 02 24年多多强付费第二节课基础内功.mp4 03 24年多多强付费第三节课直通车实操 .mp4 04 24年多多强付费第一节课市场定价格段,mp4 05 24年多多自然流第一节课市场…

Java+SVNCloud+Mysql课程设计

文章目录 1、主要内容2、所需准备3、与sql访问的中间类&#xff1a;SqlMessage4、窗口界面5、main方法 1、主要内容 课程设计&#xff0c;主要通过Javas wing创建窗口&#xff0c;jdbc连接云端mysql数据库进行基本操作&#xff0c;支持随机生成数据并用动态展示数据结果。 先…

计算机毕业设计 | springboot+vue会议室管理系统(附源码)

1&#xff0c;绪论 1.1 项目背景 随着企业规模的不断扩大&#xff0c;会议室管理愈加复杂。传统的手工预约会议室的方式已经无法满足现代企业的需求&#xff0c;因此&#xff0c;开发一套会议室系统方案变得尤为重要。会议室系统可以实现会议室的在线预约、会议室资源的有效利…

[SQL-SERVER:数据库安全及维护]:MSSM工具进行附加还原备份等操作

文章目录 目的介绍一、完整备份与还原&#xff08;20分&#xff09;1.将教师提供的TeachingDB数据库附加到个人使用的服务器上&#xff0c;并更名为TeachingDB_***&#xff08;***为个人姓名&#xff09;1.1 操作流程&#xff1a;将docker容器sqlserver数据库已有的mdf镜像文件…

C语言之旅:探索单链表

目录 一、前言 二、实现链表的功能&#xff1a; 打印 创建节点 尾插 尾删 头插 头删 查找 在指定位置之前插入数据 指定位置删除 在指定位置之后插入数据 打印 销毁 三、全部源码&#xff1a; 四、结语 一、前言 链表是一个强大且基础的数据结构。对于很多初…