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.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

条款9:利用destructors避免泄露资源

对指针说拜拜。承认吧&#xff0c;你从未真正喜欢过它&#xff0c;对不&#xff1f; 好&#xff0c;你不需要对所有指针说拜拜&#xff0c;但是你真的得对那些用来操控局部性资源(local resources&#xff09;的指针说莎唷娜拉了。 举个例子&#xff0c;你正在为“小动物收养…

Flutter 中的 CircularProgressIndicator 小部件:全面指南

Flutter 中的 CircularProgressIndicator 小部件&#xff1a;全面指南 在 Flutter 应用开发中&#xff0c;加载指示器是提供用户反馈的重要组成部分&#xff0c;特别是在需要等待数据加载的场景中。CircularProgressIndicator 是 Flutter 提供的一个表现圆形加载动画的小部件。…

Python进阶:探索Python标准库和第三方库

在前两篇文章中,我们介绍了Python的基本语法和面向对象编程。在这篇文章中,我们将深入探索Python的标准库以及一些常用的第三方库。Python的强大之处不仅在于其简洁的语法,还在于丰富的库生态系统。通过使用这些库,你可以更高效地完成各种任务,从文件操作到数据分析、网络…

godot4.2 + GDextension c++在 vs code 中断点调试配置

游戏开发中如果做不到自己编写的代码做断点调试&#xff0c;无不是瞎子摸象&#xff0c;特别是C这么底层的语言。这2天开始在VS studio中折腾&#xff0c;一直折腾不出结果&#xff0c;几次想要放弃GODOT。最终今天在VS code中搞定了这断点调试C代码。 在上一篇文章我已经做好了…

React hooks - useContext

useContext 用法使用以非侵入的方式使用 Context使用 useContext 重构 useReducer 案例 用法 实现多层组件的数据传递 在全局创建 Context 对象在父组件中使用 Context.Provider 提供数据在子组件中使用 useContext 使用数据 import React, { useContext } from react // 全局…

全网爆火Remini 粘土滤镜风格,我用ComfyUI一键生成了(保姆级教程)!

一、火爆全网的Remini&#xff01; Remini真的火爆了&#xff01;最近大家的朋友应该都被粘土滤镜刷屏了。 小红书上粘土滤镜、粘土特效的帖子动不动就是几百万浏览量&#xff0c;几千赞。 在有些电商平台上还有人接单&#xff0c;帮忙定制remini粘土风格的照片&#xff01; …

解释浏览器缓存和本地存储的区别,以及如何实现事件的防抖和节流

1:浏览器缓存和本地存储的区别: 浏览器缓存:浏览器缓存是一种临时性的数据存储,用于提高网页加载速度。缓存的数据存储在内存或磁盘中,当用户再次访问相同的资源时,浏览器会优先从缓存中读取数据,而不是从服务器重新请求。缓存的数据可以在浏览器关闭后自动清除,或者根据 HTT…

vue+three.js实现3d系统的搭建

1.首先node.js是12.22版本的&#xff0c;安装three.js可以参考这篇文章 直接用Threejs入门-安装教程_安装three.js-CSDN博客 直接在终端安装three.js即可 npm install --save three 在相同目录下安装vite构建工具 npm install --save-dev vite 在项目里面看package.json中…

神秘顾客调查:第三方渠道监测如何操作?

第三方渠道监测是指通过专业的第三方机构或服务商&#xff0c;对企业的销售渠道进行系统化的监督和评估。这种监测帮助企业了解各渠道的表现&#xff0c;确保合规性&#xff0c;提升市场竞争力。深圳神秘顾客市场调查限公司&#xff08;SMS&#xff09;总结了第三方渠道监测的操…

【安装笔记-20240528-Linux-在 Vultr 云服务器上安装 OpenWRT】

安装笔记-系列文章目录 安装笔记-20240528-Linux-在 Vultr 云服务器上安装测试 OpenWRT 文章目录 安装笔记-系列文章目录安装笔记-20240528-Linux-在 Vultr 云服务器上安装测试 OpenWRT 前言一、软件介绍名称&#xff1a;OpenWRT主页官方介绍 二、安装步骤测试版本&#xff1a…

多function-calling 调用

多function-calling 调用 接上一篇function-calling调用&#xff0c;本篇实现了一个多function-calling的调用。OpenAI会根据function的描述自己来判断应该调用哪个function。最终调用function的动作是由我们来决定的&#xff0c;当然你也可以不调对应的函数。 两个函数分别是…

案例研究|MeterSphere助力万物云构建高效自动化测试平台

万物云空间科技服务股份有限公司&#xff08;以下简称为“万物云”&#xff09;&#xff0c;前身为万科物业发展股份有限公司&#xff0c;是国内领先的物管龙头上市公司。作为一家科技引领的全域空间服务商&#xff0c;万物云致力于打造产业级共享服务平台&#xff0c;基于空间…

1. lambda初体验

首先声明一个函数式接口&#xff0c;就只接口内只有一个抽象方法 //函数式接口 public interface Factory {Object getObject();}接口实现类 public class SubClass implements Factory {Overridepublic Object getObject() {return new User();}}User类 public class User …

酒店提前线上订房小程序源码系统 PHP+MySQL组合开发 源码开源可二开 带完整的安装代码包以及搭建教程

系统概述 随着移动互联网的普及&#xff0c;越来越多的人习惯通过手机进行酒店预订。传统的线下订房方式逐渐无法满足用户的需求&#xff0c;酒店提前线上订房小程序的出现成为必然趋势。该源码系统的开发旨在为酒店提供一个便捷、高效的线上订房平台&#xff0c;提升用户体验…

基于微信小程序+ JAVA后端实现的【医院挂号预约系统】 设计与实现 (内附设计LW + PPT+ 源码+ 演示视频 下载)

项目名称 项目名称&#xff1a; 《基于微信小程序的医院挂号预约系统设计与实现》 项目技术栈 该项目采用了以下核心技术栈&#xff1a; 后端框架/库&#xff1a; Java, SSM框架数据库&#xff1a; MySQL前端技术&#xff1a; 微信小程序, uni-app 项目展示 全文概括 本…

设置单群聊消息扩展

根据消息 ID &#xff0c;对单聊会话或群聊会话中已经发送的消息设置扩展信息。每次最多可以设置 100 个扩展属性信息&#xff0c;最多可设置 300 个。 通过 Server API 操作消息扩展&#xff0c;默认不会向操作者的客户端同步&#xff0c;会导致扩展信息不一致。如有需要&…

MySQL触发器实战:自动执行的秘密

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 MySQL触发器实战&#xff1a;自动执行的秘密 前言触发器的定义和作用触发器的定义和作用触发器的…

大模型领域新闻跟踪

杨值麟 月之暗面杨植麟&#xff1a;大模型开发是“承包森林”月之暗面集结最强创投&#xff0c;“清华师姐”是最强“助攻”月之暗面杨植麟&#xff1a;互联网研发是“种树”&#xff0c;大模型研发是“承包森林”月之暗面杨植麟复盘大模型创业这一年&#xff1a;向延绵而未知…

搜维尔科技:穿上Xsens Link动作捕捉套装,进行精准的运动捕捉

穿上Xsens Link动作捕捉套装&#xff0c;进行精准的运动捕捉 搜维尔科技&#xff1a;穿上Xsens Link动作捕捉套装&#xff0c;进行精准的运动捕捉

vue 笔记01

目录 01 vuejs中属性的基本使用 02 v-show指令的使用 03 v-if 指令的使用 04 v-for指令的使用 05 v-model 指令 06 template模板标签 07 v-on事件的绑定指令 08 事件中的event对象 01 vuejs中属性的基本使用 {{ }} 叫做mustache模板语法 双花括号 小胡子语法 双花括号…