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

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

news 2026/2/8 8:12:04

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/2/5 17:51:52

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

多模态大语言模型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

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2026/1/23 10:51:19

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2026/1/31 6:53:53

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2026/1/31 14:34:46