HTML静态网页成品作业(HTML+CSS+JS)——我的家乡福州介绍网页(3个页面)

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

文章目录

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


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码实现图片轮播,共有3个页面

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div class="main">
		<div class="top">
			<img src="./images/d1.jpg" alt="" class="on">
			<img src="./images/d2.jpg" alt="">
		</div>
		
		
		<div class="nav">
			<a href="index.html" class="on">&nbsp;&nbsp;&nbsp;&nbsp;</a>
			<a href="jingdian.html">特色景点</a>
			<a href="meishi.html">特色美食</a>
		</div>
		<div class="banner">
			<img src="./images/banner.jpg" alt="">
		</div>
		
		<div class="box">
			<div class="box_index">
				<div class="box_i">
					<div class="box_img wh">
						<img src="./images/i1.jpg" alt="" class="on">
						<img src="./images/i2.jpg" alt="">
					</div>
					<div class="box_info">
						<h2>文化底蕴</h2>
						<p>福州历史悠久、渊源流长,建城至今已有2200多年,是国家历史文化名城。早在新石器时期,福州先民就创造了壳丘头文化、昙石山文化。福州民风淳朴,文化昌盛,素有“海滨邹鲁”的美誉。</p>
					</div>
				</div>
				<div class="box_i">
					<div class="box_img yf">
						<img src="./images/i3.jpg" alt="" class="on">
						<img src="./images/i4.jpg" alt="">
					</div>
					<div class="box_info">
						<h2>有福之州</h2>
						<p>福州,有“福”之州。历史记载福州是“因州北有福山”而故名,但以“有福之州”解释更显其内涵。因为福州不仅有山之仙气,水之灵气,还有人之福气。</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="footer">
			福州 欢迎您的到来
		</div>
	</div>
	<script src="./js/js.js"></script>
</body>
</html>

五、源码获取

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

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

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

相关文章

Acrel-2000ES储能能量管理系统方案

应用场合 电池厂商、储能集成商等厂家所生产的储能一体柜能集成箱

AI融资热潮:Genspark、Finaloop等初创吸金不断!中国气象局发布三大AI模型

文章推荐 AI日报&#xff5c;跃问App上架加入AI助理竞争&#xff01;GPTZero获千万美元A轮融资&#xff0c;创始人不到30岁&#xff01; AI日报&#xff5c;Luma推出AI视频模型&#xff0c;又一Sora级选手登场&#xff1f;SD3 Medium发布&#xff0c;图中文效果改善明显 ⭐️…

CentOS配置本地yum源

版本说明 操作系统版本&#xff1a;CentOS7.9 虚拟机版本 虚拟机打快照 首先给虚拟机打个快照&#xff0c;点击图下所示位置 命名快照之后&#xff0c;点击拍摄快照 可以参考图下所示进行管理和恢复快照 迁移原有yum源 先进入到/etc/yum.repos.d/ &#xff0c;可以看到有很多…

Linux 6.10也引进了蓝屏机制

众所周知&#xff0c;win死机后会有个蓝屏死机的故障提示页面&#xff0c;Linux 6.10 开始也将引入这个机制。 Linux 6.10 引入了一个新的 DRM Panic 处理程序基础设施&#xff0c;以便于在致命错误&#xff08;Panic&#xff09;发生时显示相关信息。 Linux 6.10 还在开发之…

SPI协议——读取外部SPI Flash ID

简介&#xff1a; 单片机型号&#xff1a;stm32l431rct6 SPI Flash型号&#xff1a;W25Q32JVSSIQ 使用软件&#xff1a;CubeIDE 1. W25Q32JVSSIQ简介 我们通过SPI协议来读取 SPI Flash的厂商ID和芯片独一无二的ID&#xff0c;查数据的芯片手册可以看到如下重要点&#xff1a; …

pytorch库 02 Anaconda、Jupyter常用命令及操作

文章目录 一、Anaconda Prompt1、conda常用命令2、pip常用命令 二、Jupyter1、Jupyter常用命令及基本操作2、Jupyter代码补全插件安装 一、Anaconda Prompt 1、conda常用命令 下列命令可以在Anaconda Prompt中输入。 清屏&#xff1a; cls 查看帮助&#xff1a; conda -h 查…

HTML静态网页成品作业(HTML+CSS)——手机电子商城网页(4个页面)

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

视频与音频的交响:探索达摩院VideoLLaMA 2的技术创新

一、简介 文章&#xff1a;https://arxiv.org/abs/2406.07476 代码&#xff1a;https://github.com/DAMO-NLP-SG/VideoLLaMA2 VideoLLaMA 2是由阿里巴巴集团的DAMO Academy团队开发的视频大型语言模型&#xff08;Video-LLM&#xff09;&#xff0c;旨在通过增强空间-时间建模…

分享:一个可爱的运行猫动画在你的窗口任务栏上

RunCat_for_windows&#xff1a;在 Windows 任务栏飞奔的“小猫”。这是一个用 C# 写的小工具&#xff0c;它会在 Windows 任务栏显示一只奔跑的小猫动画&#xff0c;CPU 使用率越高它跑得越快。 安装很简单 访问“发布”页面并下载 RunCat.exe。 或通过 Scoop&#xff08;x…

Android SurfaceFlinger——服务启动流程(二)

SurfaceFlinger 是 Android 系统中的一个核心服务&#xff0c;负责管理图形缓冲区的合成和屏幕显示&#xff0c;是 Android 图形系统的关键组件。 一、启动流程 SurfaceFlinger 作为一个系统服务&#xff0c;在 Android 启动早期由 init 进程通过 servicemanager 启动。它是作…

【漏洞复现】用友 NC NCFindWeb 任意文件读取漏洞

免责声明&#xff1a; 本文内容旨在提供有关特定漏洞或安全漏洞的信息&#xff0c;以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步&#xff0c;并非出于任何恶意目的。阅读者应该明白&#xff0c;在利用本文提到的漏洞信息或进行相关测…

数学建模基础:统计模型

目录 前言 一、概率与统计基础 二、统计模型 三、Matlab统计工具箱 四、实例示范&#xff1a;市场调查分析 步骤 1&#xff1a;数据导入 步骤 2&#xff1a;数据可视化 步骤 3&#xff1a;建立多元线性回归模型 步骤 4&#xff1a;模型验证 步骤 5&#xff1a;模型应…

开发人员不要嗨,B端系统颜值不过关,可能进不去客户选择范围。

市面上形形色色的B端管理系统非常多&#xff0c;大家近身搏杀&#xff0c;这个市场已经成为了红海。也就是随便某一个功能领域&#xff0c;都有N的系统可以选择&#xff0c;这个时候你坚持B端系统功能使用就行&#xff0c;那就是自嗨了。现在是个过剩的时代&#xff0c;不是供不…

MaxWell实时监控Mysql并把数据写入到Kafka主题中

配置mysql 启用MySQL Binlog MySQL服务器的Binlog默认是未开启的&#xff0c;如需进行同步&#xff0c;需要先进行开启 修改MySQL配置文件/etc/my.cnf sudo vim/etc/my.cof 增加如下配置 注&#xff1a;MySQL Binlog模式 Statement-based&#xff1a;基于语句&#xff0c;…

数据分析第十二讲 数据可视化入门(一)

数据可视化入门&#xff08;一&#xff09; 在完成了对数据的透视之后&#xff0c;我们可以将数据透视的结果通过可视化的方式呈现出来&#xff0c;简单的说&#xff0c;就是将数据变成漂亮的统计图表&#xff0c;因为人类对颜色和形状会更加敏感&#xff0c;然后再进一步解读…

三步问题00

题目链接 三步问题 题目描述 注意点 n范围在[1, 1000000]之间结果可能很大&#xff0c;需要对结果模1000000007 解答思路 动态规划的思想根据dp[i - 1]、dp[i - 2]、dp[i - 3]推出dp[i]需要注意的是结果可能很大&#xff0c;在计算的过程中需要模1000000007防止越界 代码…

宋仕强论道之华强北假货之四

宋仕强论道之华强北假货之四&#xff0c;华强北虚标货。在华强北顾名思义就是“以少充多、以小充大&#xff0c;把低级当高级卖”。同样品牌和型号的产品&#xff0c;用民用级冒充工业级&#xff0c;工业级当军用级&#xff0c;军用级再当航天级&#xff0c;品牌型号都不变&…

全面升级,票据识别新纪元:合合信息TextIn多票识别2.0

票据识别 - 自动化业务的守门员 发票、票据识别&#xff0c;是OCR技术和RPA、CMS系统结合的一个典型场景&#xff0c;从覆盖率、覆盖面的角度来说&#xff0c;应该也是结合得最成功的场景之一。 产品简介 国内通用票据识别V2.0&#xff08;简称“多票识别2.0”&#xff09;是…

深入探讨:UART与USART在单片机中串口的实际应用与实现技巧

单片机&#xff08;Microcontroller Unit, MCU&#xff09;是一种集成了处理器、存储器和输入输出接口的微型计算机。它广泛应用于嵌入式系统中&#xff0c;用于控制各类电子设备。UART和USART是单片机中常见的通信接口&#xff0c;负责串行数据传输。下面我们详细介绍它们在单…

初阶 《数组》 1. 一维数组的创建和初始化

1. 一维数组的创建和初始化 1.1 数组的创建 数组是一组相同类型元素的集合 数组的创建方式&#xff1a; type_t arr_name [const_n]; //type_t 是指数组的元素类型 //const_n 是一个常量表达式&#xff0c;用来指定数组的大小数组创建的实例&#xff1a; //代码1 int ar…