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

news2024/11/24 8:43:07

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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万平方千米。截至20239月,山西省共辖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.想要获取本文源码,点击前往吧

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

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

相关文章

蒸汽加热产品时的热量计算

使用蒸汽加热产品时&#xff0c;蒸汽释放热量&#xff0c;热量被产品吸收&#xff0c;产品得以升温&#xff1b;蒸汽释放热量后&#xff0c;迅速冷凝&#xff0c;这个过程中&#xff0c;质量不发生改变&#xff0c;所以理论上&#xff0c;消耗多少蒸汽&#xff0c;就会产生多少…

20.1 JSON-JSON接口以及在Go语言中使用JSON

1. 简介 JSON即JavaScript对象表示法(JavaScript Object Notation)&#xff0c;是一种用于存储和交换数据的格式&#xff0c;是一种可供人类阅读和理解的纯文本格式。 JSON既可以键值对的形式&#xff0c;也可以数组的形式&#xff0c;表示数据。 JSON最初是JavaScript的一个…

方法分享 |公网IP怎么指定非433端口实现https访问

公网IP可以通过指定非443端口实现HTTPS访问。在网络配置中&#xff0c;虽然HTTPS协议默认使用443端口&#xff0c;但没有规定不能在其他端口上实施HTTPS服务。使用非标准端口进行HTTPS通信需要正确配置服务器和SSL证书&#xff0c;并确保客户端能够连接到指定的端口。下面说明如…

使用Stream实现Web应用,使用YOLOv8模型对图像进行目标检测为例。

Streamlit是一个开源的Python框架&#xff0c;专门设计用于快速构建和共享数据应用程序。它使数据科学家和机器学习工程师能够通过编写简单的Python脚本&#xff0c;轻松创建美观、功能强大的Web应用程序&#xff0c;而无需具备前端开发的经验。 其他框架或web应用可以看下面两…

超全分析MybatisPlus中的MetaObjectHandler全局字段填充的基本知识(附Demo及实战)

目录 前言1. 源码及API2. Demo架构3. 全局字段填充&#xff08;实战&#xff09;4. 局部字段不填充&#xff08;实战&#xff09; 前言 对于Java的相关知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;【Java项…

消息队列的应用场景有哪些

通常来说&#xff0c;使用消息队列主要能为我们的系统带来下面三点好处&#xff1a; 异步处理 削峰/限流 降低系统耦合性 除了这三点之外&#xff0c;消息队列还有其他的一些应用场景&#xff0c;例如实现分布式事务、顺序保证和数据流处理。 异步处理 通过异步处理提高系…

Vue3、Element Plus使用v-for循环el-form表单进行校验

在开发中遇到了这样一个需求 有一个form是通过v-for生成出来的&#xff0c;并且数量不确定&#xff0c;每个表单中的字段都需要做校验&#xff0c;就将自己的解决方法记录了下来。 完整代码如下 <template><div class"for-form"><el-button type&quo…

【python】tkinter GUI开发: 多行文本Text,单选框Radiobutton,复选框Checkbutton,画布canvas的应用实战详解

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

将MAE方法用于reflacx数据集--MMpretrain/slurm

MAE—reflacx 问题问题一 对数据集reflacx的了解问题二 MAE实现的是有监督&#xff0c;还是无监督任务问题三 实验流程问题四 实验目的 一、从github上fork我师兄的项目30min&#xff08;github账号的注册什么的&#xff0c;可以去参考b站&#xff09;1.1 点开下面这个链接…

PyTorch -- 最常见激活函数的选择

首先&#xff0c;简单复习下什么是梯度&#xff1a;梯度是偏微分的集合 举例说明&#xff1a;对于 z y 2 − x 2 : ∇ z ( ∂ z ∂ x , ∂ z ∂ y ) &#xff08; 2 x , 2 y &#xff09; z y^2-x^2: \nabla z (\frac{\partial z}{\partial x}, \frac{\partial z}{\partia…

vue3+vite+ts 使用webrtc-streamer播放海康rtsp监控视频

了解webrtc-streamer webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目&#xff0c;它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpegflv.js的方案&#xff0c;延迟降低到了0.4秒左右&#xff0c;画面的…

PyTorch学习9:卷积神经网络

文章目录 前言一、说明二、具体实例1.程序说明2.代码示例 总结 前言 介绍卷积神经网络的基本概念及具体实例 一、说明 1.如果一个网络由线性形式串联起来&#xff0c;那么就是一个全连接的网络。 2.全连接会丧失图像的一些空间信息&#xff0c;因为是按照一维结构保存。CNN是…

Shell环境下的脚本编程与应用

Shell是什么&#xff1f; Shell 是一个命令行解释器&#xff0c;它接收用户输入的命令&#xff08;如 ls、cd、mkdir 等&#xff09;&#xff0c;然后执行这些命令。Shell 同时还是一种功能强大的编程语言&#xff0c;允许用户编写由 shell 命令组成的脚本&#xff08;script&…

Windows搭建nacos集群

Nacos是阿里巴巴的产品&#xff0c;现在是SpringCloud中的一个组件。相比Eureka功能更加丰富&#xff0c;在国内受欢迎程度较高。 下载地址&#xff1a;Tags alibaba/nacos GitHub 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;8888 解压文件夹 目录说明&am…

基于条件谱矩的时间序列分析(以轴承故障诊断为例,MATLAB)

谱矩方法可以对数据的表面形貌做较为细致的描述&#xff0e;它以随机过程为理论基础&#xff0c;用各阶谱矩及统计不变量等具体的参数表征表面的几何形态&#xff0c;算术平均顶点曲率是一种基于四阶谱矩的统计不变量。 鉴于此&#xff0c;采用条件谱矩方法对滚动轴承进行故障诊…

[大模型]MiniCPM-2B-chat Lora Full 微调

MiniCPM-2B-chat 介绍 MiniCPM 是面壁智能与清华大学自然语言处理实验室共同开源的系列端侧大模型&#xff0c;主体语言模型 MiniCPM-2B 仅有 24亿&#xff08;2.4B&#xff09;的非词嵌入参数量。 经过 SFT 后&#xff0c;MiniCPM 在公开综合性评测集上&#xff0c;MiniCPM …

【C++题解】1469. 数的统计

问题&#xff1a;1469. 数的统计 类型&#xff1a;嵌套循环 题目描述&#xff1a; 试计算在区间 1 到 n 的所有整数中&#xff0c;数字 x ( 0≤x≤9 )共出现了多少次&#xff1f; 例如&#xff0c;在 1 到 11 中&#xff0c;即在 1,2,3,4,5,6,7,8,9,10,11 中&#xff0c;数字…

HCIA 10 网络安全之结合ACL访问控制列表登录Telnet及FTP

ACL 本质上是一种报文过滤器&#xff0c;规则是过滤器的滤芯。设备基于这些规则进行报文匹配&#xff0c;可以过滤出特定的报文&#xff0c;并根据应用 ACL 的业务模块的处理策略来允许或阻止该报文通过。 1.实验介绍及拓扑 R3 为telnet服务器&#xff0c;R1 为客户端&#…

简单的基于Transformer的滚动轴承故障诊断(Pytorch)

递归神经网络在很长一段时间内是序列转换任务的主导模型&#xff0c;其固有的序列本质阻碍了并行计算。因此&#xff0c;在2017年&#xff0c;谷歌的研究人员提出了一种新的用于序列转换任务的模型架构Transformer&#xff0c;它完全基于注意力机制建立输入与输出之间的全局依赖…

计算机图形学入门09:深度缓存

在前面知道了怎么将一个三角形显示到屏幕上&#xff0c;那么如果有很多三角形&#xff0c;各自距离相机的远近也不一样&#xff0c;并且三角形会相互遮挡。也就是三维空间中有很多物体&#xff0c;通常近处的物体会遮挡住远处的物体&#xff0c;那么在计算机渲染中该如何处理呢…