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

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="header">
			<img src="./images/logo.png" alt="">
		</div>
		<div class="nav">
			<ul>
				<li><a href="#main">沅陵首页</a></li>
				<li><a href="#weizhi">沅陵地理</a></li>
				<li><a href="#meishi">沅陵美食</a></li>
				<li><a href="#meijing">沅陵美景</a></li>
			</ul>
		</div>
		<div class="banner">
			<img src="./images/banner.jpg" alt="">
		</div>
		<div class="content">
			<div id="weizhi" class="weizhi">
				<div class="tit">
					<div class="tit_text">沅陵地理</div>
					<div class="tit_line"></div>
				</div>
				<div class="weizhi_content">
					<div class="weizhi_text">
						<p>
							沅(yuán)陵县,隶属于湖南省怀化市。地处湖南省西北部,怀化市北端,沅水中游,处武陵山南麓与雪峰山东北尾端交汇处。东与桃源、安化相连,南与溆浦、辰溪接壤,西与泸溪、古丈、永顺毗邻,北与张家界市永定区交界。介于东经110°0531″—111°0627″,北纬28°0448″—29°0226″之间,总面积5852平方千米。
						</p>
						<p>
							沅陵以始置故城北枕沅水,南傍高大土阜,古称高大土阜为陵而得名。随同县名始于汉初。因史上历为辰州府治地,所以又称辰州。境内有国保单位唐代龙兴讲寺、省保单位黔中郡遗址等历史文化遗存百余处,馆藏国家一级文物41件,“辰州傩戏”、“沅陵传统龙舟”被列入国家非物质文化遗产名录。
						</p>
					</div>
					<img src="./images/weizhi.jpg" alt="">
				</div>
			</div>
			<div id="meishi" class="meishi">
				<div class="tit">
					<div class="tit_text">沅陵美食</div>
					<div class="tit_line"></div>
				</div>
				<div class="meishi_content">
					<div class="meishi1">
						<img src="./images/meishi1.jpg" alt="">
						<div>沅陵猪脚粉</div>
					</div>
					<div class="meishi1">
						<img src="./images/meishi2.jpg" alt="">
						<div>沅陵晒兰</div>
					</div>
					<div class="meishi1">
						<img src="./images/meishi3.jpg" alt="">
						<div>沅陵腊肉</div>
					</div>
					<div class="meishi1">
						<img src="./images/meishi4.jpg" alt="">
						<div>沅陵枞菌</div>
					</div>
				</div>
			</div>


五、源码获取

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

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

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

相关文章

加速模型训练 GPU cudnn

GPU的使用 在定义模型时&#xff0c;如果没有特定的GPU设置&#xff0c;会使用 torch.nn.DataParallel 将模型并行化&#xff0c;充分利用多GPU的性能&#xff0c;这在加速训练上有显著影响。 model torch.nn.DataParallel(model).cuda() cudnn 的配置&#xff1a; cudnn.…

R可视化:另类的柱状图

介绍 方格状态的柱状图 加载R包 knitr::opts_chunk$set(echo TRUE, message FALSE, warning FALSE) library(patternplot) library(png) library(ggplot2) library(gridExtra)rm(list ls()) options(stringsAsFactors F)导入数据 data <- read.csv(system.file(&qu…

TM7707 SOP-16 双通道全差分输入的24位A/D转换芯片

TM7707是一款24位A/D转换芯片&#xff0c;主要用于低频测量&#xff0c;并能直接将传感器测量的微小信号进行A/D转换。它具有高分辨率、良好的抗噪声性能&#xff0c;以及低电压和低功耗的特点。这些特性使得TM7707非常适合用于以下应用领域&#xff1a; 1.仪表测量&#xff1a…

idea 中配置 Java 注释模板

引言&#xff1a; 在软件工程中&#xff0c;良好的代码注释习惯对于项目的可维护性和可读性至关重要。IntelliJ IDEA&#xff0c;作为一款强大的Java开发IDE&#xff0c;提供了灵活的注释模板配置功能&#xff0c;帮助开发者快速生成规范的代码注释。本文将详细介绍如何在Inte…

OpenHarmony 入门——初识JS/ArkTS 侧的“JNI” NAPI(一)

引言 在Android中Java可以通过JNI 与C/C 通信&#xff0c;而在OpenHarmony 中前段语言目前是ETS&#xff0c;那么OpenHarmony中的 “JNI” 角色是什么呢&#xff1f; 一、NAPI概述 NAPI全称Native Application Programming Interface&#xff08;最新版的文档已经改为Node-A…

AI炒股:批量下载东方财富choice中的投资数据

工作任务&#xff1a;批量下载东方财富choice中的创投数据 在ChatGPT中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;写一个关于键盘鼠标自动化操作的Python脚本&#xff0c;具体步骤如下&#xff1a; 打开东方财富choice软件&#xff0c;软件路径为&#xff1…

企业微信hook接口协议,ipad协议http,语音转文字

语音转文字 参数名必选类型说明uuid是String每个实例的唯一标识&#xff0c;根据uuid操作具体企业微信msgid是int要转文字的语音消息id 请求示例 {"uuid":"a4ea6a39-4b3a-4098-a250-2a07bef57355","msgid":1063645 } 返回示例 {"data&…

开发中的常用快捷键

开发中的常用快捷键 文章目录 开发中的常用快捷键一、window11快捷键二、WebStrom 快捷键三、IDEA快捷键四、vscode快捷键五、eclipse快捷键项目备注 一、window11快捷键 快捷切屏 、来回切屏alttab 二、WebStrom 快捷键 常规快捷键和idea差不多 ttab生成vue模版 htab生成ht…

Apache Impala 4.4.0正式发布了!

历时半年多&#xff0c;Impala 4.4终于发布了&#xff01;本次更新带来了不少新功能&#xff0c;受限于篇幅&#xff0c;这里简要列举一些&#xff0c;后续文章再挑重点的进行介绍。 支持更多Iceberg表上的语句 支持对 Iceberg V2 表的 UPDATE 语句&#xff0c;用来更新已有数…

AI全自动生成视频MoneyPrinterTurbo源码

如今&#xff0c;短视频风靡全球&#xff0c;流量已然成为财富的象征。若能实现短视频的全自动生成&#xff0c;岂不是轻而易举地吸引眼球&#xff0c;进而赚取丰厚收益&#xff1f; MoneyPrinter 这一开源项目便能够自动生成短视频&#xff0c;且质量上乘&#xff0c;绝非那些…

WordPress建网站公司 建易WordPress建站

建易WordPress建网站公司是一家专业从事WordPress网站建设、网站维护、网站托管、运营推广和搜索引擎优化(SEO)等服务的公司。建易WordPress建网站公司提供多种服务&#xff0c;包括模板建站和定制网站&#xff0c;并且明码标价&#xff0c;价格透明&#xff0c;竭诚为全国各地…

安装Lubuntu24.04

Lubuntu24.04安装过程与22.04、20.04等完全一致。 记录 01 02 03 04 05 09 给出提示 10 11 12 13 特点 Lubuntu 22.04的特点主要包括以下几点&#xff1a; 轻量级且高效&#xff1a;Lubuntu作为Ubuntu的一个轻量级分支&#xff0c;专注于为低端电脑、老旧电脑或需要最大限…

2023年信息素养大赛小学组C++智能算法复赛真题

今天给大家分享2023年全国青少年信息素养大赛小学组C智能算法挑战赛复赛里面的一套真题&#xff0c;希望有助于大家了解复赛的难度及备考。 其他真题下载&#xff1a;网盘-真题-信息素养大赛

JUC框架-并发容器源码详解

文章目录 并发容器ConcurrentHashMapJDK 1.7 及之前的实现原理JDK 1.8 及之后的实现原理 CopyOnWriteArrayList & CopyOnWriteArraySet工作原理&#xff08;附源码&#xff09;特点适用场景 ConcurrentLinkedQueue数据结构入队列操作ConcurrentLinkedQueue 特性ConcurrentL…

深入分析 Android Activity (八)

文章目录 深入分析 Android Activity (八)1. Activity 的资源管理1.1 使用资源 ID1.2 动态加载资源1.3 资源的本地化1.4 使用 TypedArray 访问资源 2. Activity 的配置变更处理2.1 在 Manifest 文件中声明配置变更2.2 重写 onConfigurationChanged 方法2.3 保存和恢复实例状态 …

MySQL--InnoDB体系结构

目录 一、物理存储结构 二、表空间 1.数据表空间介绍 2.数据表空间迁移 3.共享表空间 4.临时表空间 5.undo表空间 三、InnoDB内存结构 1.innodb_buffer_pool 2.innodb_log_buffer 四、InnoDB 8.0结构图例 五、InnoDB重要参数 1.redo log刷新磁盘策略 2.刷盘方式&…

联想应用商店开发者常见问题FAQ

Phone/Pad应用常见问题 应用上传FAQ Q. 上传apk包时&#xff0c;提示“该包名已存在”如何处理&#xff1f; A&#xff1a;若应用包名出现冲突&#xff0c;请先核实该账号是否已存在该包名产品&#xff0c;若不在该账号下&#xff0c;请进行应用认领。 Q. 应用是否可以授权…

计算机网络——TCP / IP 网络模型

OSI 七层模型 七层模型是国际标准化的一个网络分层模型&#xff0c;大体结构可以分成七层。每层提供不同的功能。 图片来源 JavaGuide 但是这样七层结构比较复杂&#xff0c;不太实用&#xff0c;所以有了 TCP / IP 模型。 TCP / IP 网络模型 TCP / IP 网络模型可以看作是 O…

Overall Accuracy(OA)、Average Accuracy(AAcc)计算公式

四个重要的指标&#xff1a; True Positive&#xff08;TP&#xff09;、False Positive&#xff08;FP&#xff09;、True Negative&#xff08;TN&#xff09;和False Negative&#xff08;FN&#xff09;。 TP表示分类器预测结果为正样本&#xff0c;实际也为正样本&#xf…

第16篇:JTAG UART IP应用<三>

Q&#xff1a;如何通过HAL API函数库访问JTAG UART&#xff1f; A&#xff1a;Quartus硬件工程以及Platform Designer系统也和第一个Nios II工程--Hello_World的Quartus硬件工程一样。 Nios II软件工程对应的C程序调用HAL API函数&#xff0c;如open用于打开和创建文件&#…