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

news2025/2/28 2:47:17

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.想要获取本文源码,点击前往吧

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

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

相关文章

Linux mongodb安装及简单使用

说明&#xff1a;本文章主要是对mongodb的单击安装 1.创建文件夹&#xff0c;准备安装包 cd /user/local mkdir tools 2.解压mongodb包 mkdir mongodb tar -xvf mongodb-linux-x86_64-rhel70-5.0.11.tgz -C mongodb 3.进入解压目录 cd mongodb cd mongodb-linux-x86_64-…

spark 整合 yarn

spark 整合 yarn 1、在master节点上停止spark集群 cd /usr/local/soft/spark-2.4.5/sbin ./stop-all.sh 2、spark整合yarn只需要在一个节点整合, 可以删除node1 和node2中所有的spark文件 分别在node1、node2 的/usr/local/soft目录运行 rm -rf spark-2.4.…

千脑计划:模拟人类大脑皮层,开启AI新纪元

随着科技的飞速发展&#xff0c;人工智能已成为当今时代的热门话题。然而&#xff0c;目前主流的深度神经网络虽然取得了显著成就&#xff0c;但也面临着能耗高、稳定性差等问题。为了解决这些挑战&#xff0c;一项名为“千脑计划”的宏伟项目应运而生&#xff0c;旨在通过模仿…

Nacos配置中心不可用会有什么影响

服务端&#xff1a; Nacos的数据存储接口 com.alibaba.nacos.config.server.service.DataSourceService 有两种实现&#xff1a; 如果指定了mysq 作为数据库&#xff0c;则必须使用 mysql 如果是 集群方式部署Nacos&#xff0c;则必须使用mysql 如果是单例方式部署 并且 没…

【因果推断python】37_断点回归3

目录 羊皮效应和模糊 RDD&#xff08;Fuzzy RDD&#xff09; 麦克雷测试&#xff08;McCrary Test&#xff09; 关键思想 羊皮效应和模糊 RDD&#xff08;Fuzzy RDD&#xff09; 关于教育对收入的影响&#xff0c;经济学有两种主要观点。第一个是广为人知的论点&#xff0c;…

springboot应用cpu飙升的原因排除

1、通过top或者jps命令查到是那个java进程&#xff0c; top可以看全局那个进程耗cpu&#xff0c;而jps则默认是java最耗cpu的&#xff0c;比如找到进程是196 1.1 top (推荐)或者jps命令均可 2、根据第一步获取的进程号&#xff0c;查询进程里那个线程最占用cpu&#xff0c;发…

C++ | Leetcode C++题解之第168题Excel表列名称

题目&#xff1a; 题解&#xff1a; class Solution { public:string convertToTitle(int columnNumber) {string ans;while (columnNumber > 0) {--columnNumber;ans columnNumber % 26 A;columnNumber / 26;}reverse(ans.begin(), ans.end());return ans;} };

计算机组成原理---Cache的基本工作原理习题

对应知识点&#xff1a; Cache的基本原理 1.某存储系统中&#xff0c;主存容量是Cache容量的4096倍&#xff0c;Cache 被分为 64 个块&#xff0c;当主存地址和Cache地址采用直接映射方式时&#xff0c;地址映射表的大小应为&#xff08;&#xff09;(假设不考虑一致维护和替…

C#.Net筑基-类型系统②常见类型

01、结构体类型Struct 结构体 struct 是一种用户自定义的值类型&#xff0c;常用于定义一些简单&#xff08;轻量&#xff09;的数据结构。对于一些局部使用的数据结构&#xff0c;优先使用结构体&#xff0c;效率要高很多。 可以有构造函数&#xff0c;也可以没有。因此初始…

SpringCloud Alibaba Sentinel 流量控制之流控模式实践总结

官网文档&#xff1a;https://sentinelguard.io/zh-cn/docs/flow-control.html wiki地址&#xff1a;https://github.com/alibaba/Sentinel/wiki/%E6%B5%81%E9%87%8F%E6%8E%A7%E5%88%B6 本文版本&#xff1a;spring-cloud-starter-alibaba&#xff1a;2.2.0.RELEASE 如下图所…

【归并排序】| 详解归并排序 力扣912

&#x1f397;️ 主页&#xff1a;小夜时雨 &#x1f397;️专栏&#xff1a;归并排序 &#x1f397;️如何活着&#xff0c;是我找寻的方向 目录 1. 题目解析2. 代码 1. 题目解析 题目链接: https://leetcode.cn/problems/sort-an-array/ 我们上道题讲过归并排序的核心代码&a…

idea 创建properties文件,解决乱码

设置properties文件编码 点击file->Settings File Encodings->设置utf-8 重新创建.properties文件才生效

MySQL的自增 ID 用完了,怎么办?

MySQL 自增 ID 一般用的数据类型是 INT 或 BIGINT&#xff0c;正常情况下这两种类型可以满足大多数应用的需求。 当然也有不正常的情况&#xff0c;当达到其最大值时&#xff0c;尝试插入新的记录会导致错误&#xff0c;错误信息类似于&#xff1a; ERROR 167 (22003): Out o…

算法期末整理(正在更新中)

一 算法概述 算法的概念 通俗地讲&#xff0c;算法是指解决问题的一种方法或一个过程。更严格地讲&#xff0c;算法是由若干条指令组成的有穷序列。 算法的性质 1.输入&#xff1a;有0个或多个由外部提供的量作为算法的输入。 2.输出&#xff1a;算法产生至少一个量作为输出。…

【机器学习300问】126、词嵌入(Word Embedding)是什么意思?

人类的文字&#xff0c;作为一种高度抽象化的符号系统&#xff0c;承载着丰富而复杂的信息。为了让电脑也能像人类一样理解并处理这些文字&#xff0c;科学家们不断探索各种方法&#xff0c;以期将人类的语言转化为计算机能够理解的格式。 一、One-Hot编码的不足 在自然语言处…

每月策略会议

周一顾问策略会议&#xff0c;对于企业辅导而言&#xff0c;领导力是可以培训的&#xff0c;而决策力不是靠培训就能达成&#xff0c;是需要反复训练和反思。从最为关心的一个状况出发&#xff0c;去行动才会有结果&#xff0c;有了结果反思我们的假设是否有盲区是否有误才有可…

LVGL开发教程-Grid(网格布局)

系列文章目录 知不足而奋进 望远山而前行 目录 系列文章目录 文章目录 前言 1. 常用方法 2. 代码实现 总结 前言 网格布局&#xff08;Grid Layout&#xff09;是一种强大的布局方式&#xff0c;它允许将项目按照行和列的二维表格方式进行排列。LVGL&#xff08;Little…

分布式之日志系统平台ELK

ELK解决了什么问题 我们开发完成后发布到线上的项目出现问题时(中小型公司),我们可能需要获取服务器中的日志文件进行定位分析问题。但在规模较大或者更加复杂的分布式场景下就显得力不从心。因此急需通过集中化的日志管理,将所有服务器上的日志进行收集汇总。所以ELK应运而生…

Android Glide, first start based on loadThumbnail, Kotlin(二)

Android Glide, first start based on loadThumbnail, Kotlin&#xff08;二&#xff09; Android Glide, first start based on loadThumbnail, Kotlin&#xff08;一&#xff09;中有个小问题&#xff0c;通过loadThumbnail()采集到的缩略图真的就是整张图片的完整缩略图&…

NET Core C# 中的Action委托:语法、用法和示例_2024-06-19

Action委托是一个内置的泛型委托类型。此委托使您的程序更具可读性和效率&#xff0c;因为您无需定义自定义委托&#xff0c;如以下示例所示。 它在 System 命名空间下定义。它没有输出参数&#xff0c;输入参数最少为 1 个&#xff0c;最多为 16 个。 Action委托通常用于具有…