当前位置： 首页 > news >正文

HTML静态网页成品作业(HTML+CSS)—— 家乡山西介绍网页(3个页面)

news 2026/2/9 2:52:51

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

文章目录

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

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有6个页面。

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="k"><img class="toubu" src="./images/toubu.jpg" alt=""><ul class="nav"><li><a href="index.html" class="xuanzhong">首页简介</a></li><li><a href="fengjing.html">风景名胜</a></li><li><a href="meishi.html">地方美食</a></li></ul><div class="neirong"><div class="neirong1"><img class="neirong1_tupian" src="./images/neirong1.jpeg" alt=""><div class="neirong1_jieshao">山西省，简称“晋”，中华人民共和国省级行政区，省会太原市，位于中国华北，东与河北省为邻，西与陕西省相望，南与河南省接壤，北与内蒙古自治区毗连，介于北纬34°34′—40°44′，东经110°14′—114°33′之间，总面积15.67万平方千米。截至2023年9月，山西省共辖11个地级市。2023年末，山西省常住人口为3465.99万人。山西省地势呈东北斜向西南的平行四边形，是典型的为黄土覆盖的山地高原，地势东北高西南低。高原内部起伏不平，河谷纵横，地貌有山地、丘陵、高原、盆地、台地等，其中山地、丘陵占 80%。山西省地跨黄河、海河两大水系，河流属于自产外流型水系。山西省地处中纬度地带的内陆，属温带大陆性季风气候。 山西地处秦晋文化区，历史代表文化为“三晋文化” 。</div></div><div class="neirong_name">山西风光</div><div class="neirong2"><div class="neirong2_tupian"><img src="./images/neirong2_1.jpg" alt=""></div><div class="neirong2_tupian"><img src="./images/neirong2_2.jpg" alt=""></div><div class="neirong2_tupian"><img src="./images/neirong2_3.jpg" alt=""></div><div class="neirong2_tupian"><img src="./images/neirong2_4.jpg" alt=""></div><div class="neirong2_tupian"><img src="./images/neirong2_5.jpeg" alt=""></div><div class="neirong2_tupian"><img src="./images/neirong2_6.jpeg" alt=""></div></div></div><div class="dibu">美丽山西 欢迎您</div></div>
</body>
</html>

五、源码获取

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

相关文章：

HTML静态网页成品作业(HTML+CSS)—— 家乡山西介绍网页(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有6个页面。 二、作品演示 三、代…...

编程日记 2024/6/22 6:20:26

【抽代复习笔记】20-群（十四）：定理6的补充证明及三道循环置换例题

例1&#xff1a;找出S3中所有不能和(123)交换的元。 解&#xff1a;因为 (123)(1) (1)(123) (123)&#xff0c;(123)(132) (132)(123) (1)&#xff0c;所以(1)、(132)和(123)均可以交换&#xff1b; 而(12)(123) (23)&#xff0c;(123)(12) (13)&#xff0c;故 (12)(12…...

编程日记 2024/6/22 6:18:25

【单片机毕业设计选题24018】-基于STM32和阿里云的农业大棚系统

系统功能: 系统分为手动和自动模式&#xff0c;上电默认为自动模式&#xff0c;自动模式下系统根据采集到的传感器值 自动控制&#xff0c;温度过低后自动开启加热&#xff0c;湿度过高后自动开启通风&#xff0c;光照过低后自动开启补 光&#xff0c;水位过低后自动开启水泵…...

编程日记 2024/6/22 6:17:24

【计算机毕业设计】​206校园顺路代送微信小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…...

编程日记 2024/6/22 6:16:23

9、PHP 实现调整数组顺序使奇数位于偶数前面

题目&#xff1a; 调整数组顺序使奇数位于偶数前面 描述&#xff1a; 输入一个整数数组&#xff0c;实现一个函数来调整该数组中数字的顺序&#xff0c;使得所有的奇数位于数组的前半部分&#xff0c; 所有的偶数位于位于数组的后半部分&#xff0c;并保证奇数和奇数&#xff…...

编程日记 2024/6/22 6:15:21

iOS开发工具-网络封包分析工具Charles

一、Charles简介 Charles 是在 Mac 下常用的网络封包截取工具&#xff0c;在做 移动开发时&#xff0c;我们为了调试与服务器端的网络通讯协议&#xff0c;常常需要截取网络封包来分析。 Charles 通过将自己设置成系统的网络访问代理服务器&#xff0c;使得所有的网络访问请求…...

编程日记 2024/6/22 6:14:21

7、PHP 实现矩形覆盖

题目&#xff1a; 矩形覆盖 描述&#xff1a; 我们可以用21的小矩形横着或者竖着去覆盖更大的矩形。 请问用n个21的小矩形无重叠地覆盖一个2*n的大矩形&#xff0c;总共有多少种方法&#xff1f; <?php function rectCover($number) {$prePreNum 1;$preNum 2;$temp 0;i…...

编程日记 2024/6/22 6:13:19

鸿蒙开发通信与连接：【@ohos.wifiext (WLAN)】

WLAN 说明&#xff1a; 本模块首批接口从API version 8开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 该文档中的接口只供非通用类型产品使用&#xff0c;如路由器等&#xff0c;对于常规类型产品&#xff0c;不应该使用这些接口。 导入模块 …...

编程日记 2024/6/22 6:12:18

Ps：脚本事件管理器

Ps菜单&#xff1a;文件/脚本/脚本事件管理器 Scripts/Script Events Manager 脚本事件管理器 Script Events Manager允许用户将特定的事件&#xff08;如打开、存储或导出文件&#xff09;与 JavaScript 脚本或 Photoshop 动作关联起来&#xff0c;以便在这些事件发生时自动触…...

编程日记 2024/6/22 6:11:17

redis哨兵模式下业务代码连接实现

目录 一&#xff1a;背景 二&#xff1a;实现过程 三&#xff1a;总结 一&#xff1a;背景 在哨兵模式下&#xff0c;真实的redis服务地址由一个固定ip转变为可以变化的ip,这样我们业务代码在连接redis的时候&#xff0c;就需要判断哪个主redis服务地址&#xff0c;哪个是从…...

编程日记 2024/6/22 6:09:15

Java中将文件转换为Base64编码的字节码

在Java中&#xff0c;将文件转换为Base64编码的字节码通常涉及以下步骤&#xff1a; 读取文件内容到字节数组。使用java.util.Base64类对字节数组进行编码。 下面是一个简单的Java示例代码&#xff0c;演示如何实现这个过程&#xff1a; import java.io.File; import java.io…...

编程日记 2024/6/22 6:08:14

【C++高阶】探索STL的瑰宝 map与set：高效数据结构的奥秘与技巧

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;初步了解 二叉搜索树 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀map与set &#x1f4d2;1.…...

编程日记 2024/6/22 6:07:12

cd 命令特殊路径符 mkdir命令

cd 特殊路径符 cd . 表示当前目录&#xff0c;比如 cd ./Desktop表示切换到当前目录下的Desktop目录内&#xff0c;和 cd Desktop效果一致。cd … 表示上一级目录&#xff0c;比如 cd … 即可切换到上一级目录&#xff0c;cd…/…切换到上二级目录。cd ~ 表示 HOME 目录&#…...

编程日记 2024/6/22 6:06:11

Mongodb UPDATE, 使用$position指定向数组中插入新元素的位置

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第72篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…...

编程日记 2024/6/22 6:05:10

【Kafka】Kafka Broker工作流程、节点服役与退役、副本、文件存储、高效读写数据-08

【Kafka】Kafka Broker工作流程、节点服役与退役、副本、文件存储、高效读写数据 1. Kafka Broker 工作流程1.1 Zookeeper 存储的 Kafka 信息1.2 Kafka Broker总体工作流程1.2.1 Controller介绍 1.3 Broker 重要参数 2. 节点服役与退役3. Kafka副本 1. Kafka Broker 工作流程 …...

编程日记 2024/6/22 6:04:09

如何恢复未格式化分区数据？看这里！

什么是未格式化分区&#xff1f; 未格式化或RAW文件系统的分区无法被Windows操作系统识别和挂载&#xff0c;因此&#xff0c;Windows会提示你进行格式化以创建新的文件系统。注意&#xff0c;不要进行格式化。通常&#xff0c;文件系统变为未格式化或RAW会出现以下常见错误消…...

编程日记 2024/6/22 6:03:08

通过“BOSS”精通比特币，深入认识私钥、账户和钱包

来源:币界原创 作者:636Marx 无论当今数字货币技术如何发展&#xff0c;认识区块链技术幕后的关键机制至关重要。无论您是新手还是经验丰富的数字货币从业者&#xff0c;掌握钱包地址、公钥和私钥的复杂性都有无可替代重要性。进入 BOSS Wallet&#xff0c;这是一款尖端的 Web…...

编程日记 2024/6/22 6:02:07

进程与线程的区别

进程&#xff08;Process&#xff09; 1&#xff1a;进程是操作系统分配资源的基本单位 2&#xff1a;每个进程都有自己独立的虚拟地址空间&#xff0c;虚拟地址空间映射真实物理地址 3&#xff1a;进程之间相互隔离&#xff0c;某一个进程的崩溃不会影响到其它进程 4&…...

编程日记 2024/6/22 6:01:05

【AI基础】第五步：纯天然保姆喂饭级-安装并运行chatglm3-6b

类似于 【AI基础】第三步&#xff1a;纯天然保姆喂饭级-安装并运行chatglm2-6b&#xff0c;有一些细节不一样。 此系列文章列表&#xff1a; 【AI基础】概览 【AI基础】第一步&#xff1a;安装python开发环境-windows篇_下载安装ai环境python 【AI基础】第一步&#xff1a;安装…...

编程日记 2024/6/22 6:00:03

【学习笔记】Elastic-Job和Quartz 实现企业级定时任务

Elastic-Job和Quartz 实现企业级定时任务 知识拆解框架整合Java高级玩法定时任务案例 第1章 课程介绍 课程的总体介绍&#xff0c;定时任务的应用场景和发展趋势&#xff0c;以及分布式走时任务的介绍 1-1、导学 1-2、为什么学习定时任务 1-3、定时任务技术发展趋势 1-4、主…...

编程日记 2024/6/22 5:59:02

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/8 20:42:48

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2026/1/28 21:45:43

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2026/1/31 6:20:15

云原生周刊：k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

编程新知 2025/12/1 3:15:17

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2026/2/4 3:31:19