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

HTML静态网页成品作业(HTML+CSS+JS)——家乡莆田介绍网页(5个页面)

news 2026/3/27 1:04:26

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

文章目录

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

一、作品介绍

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

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body><div class="main"><div class="w"><div class="top"><img src="./images/top.jpg" alt="img0"><img src="./images/top1.jpeg" alt="" class="hide img1"></div><div class="nav"><ul><li><a href="index.html" class="has">莆田首页</a></li><li><a href="lishi.html">历史沿革</a></li><li><a href="meishi.html">特色美食</a></li><li><a href="jingdian.html">景点介绍</a></li><li><a href="xisu.html">传统习俗</a></li></ul></div><div class="content"><h2 class="content-t">莆田简介</h2><div class="content-l"><p>莆田市，古称“兴化”，又称“荔城”、“莆阳”、“兴安”、“莆仙”，福建省辖地级市，位居福建省沿海中部，地处北纬24°59′—25°46′，东经118°27′—119°56′之间。境内地势西北高、东南低，横剖面呈马鞍状，地处北回归线北侧边缘，东濒海洋，属典型的亚热带海洋性季风气候；辖四区一县（荔城区、城厢区、涵江区、秀屿区、仙游县），陆域面积4200平方公里，海域面积1.1万平方公里 。根据第七次人口普查数据，截至2020年11月1日零时，莆田市常住人口为321.0714万人。</p><p>莆田历史底蕴深厚，史称“兴化”，素有“海滨邹鲁”、“文献名邦”之美称，自唐以来，涌现出2482名进士、21名状元，17名宰相。</p><p>基础设施完善，湄洲湾、兴化湾、平海湾“三湾环绕”，湄洲湾为深水良港，可建万吨级以上泊位150多个；福厦铁路、永莆铁路贯穿全境 ，湄洲湾港口铁路支线投入使用；福厦高速、沈海复线、莆永高速、湄渝高速形成“两纵两横”格局。同时，莆田被列为第一批国家新型城镇化综合试点地区，及消费品工业“三品”战略示范城市。2020年10月，被评为全国双拥模范城（县）。</p><p>2022年，全市地区生产总值达到3116.25亿元，总量居全省第7位，比上年前移1位，同比增长4.0%，增幅居全省第6位，比上年前移2位。2022年,全市农林牧渔业总产值273.94亿元，同比增长2.8%。全市规模以上工业增加值同比增长4.2%，第三产业自下半年以来保持加快回升态势，全年增加值增长4.2% 。</p></div><div class="content-r"><img src="./images/jj.png" alt=""></div><div class="cl"></div><h2 class="content-t">莆田图册</h2><div class="tuce"><div class="tu"><img src="./images/1.jpg" alt=""></div><div class="tu"><img src="./images/2.jpg" alt=""></div><div class="tu"><img src="./images/3.jpg" alt=""></div><div class="tu"><img src="./images/4.jpg" alt=""></div></div></div><div class="footer"><marquee direction="left">美丽莆田欢迎您的到来</marquee></div></div></div><script src="./js/js.js"></script>
</body>
</html>

五、源码获取

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

相关文章：

HTML静态网页成品作业(HTML+CSS+JS)——家乡莆田介绍网页(5个页面)

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

编程日记 2024/6/29 3:45:56

#### grpc比http性能高的原因 ####

grpc比http性能高的原因 二进制消息格式&#xff1a;gRPC使用Protobuf&#xff08;一种有效的二进制消息格式&#xff09;进行序列化&#xff0c;这种格式在服务器和客户端上的序列化速度非常快&#xff0c;且序列化后的消息体积小&#xff0c;适合带宽有限的场景。 HTTP/2协…...

编程日记 2024/6/29 3:40:44

微软Edge浏览器搜索引擎切换全攻略

微软Edge浏览器作为Windows 10的默认浏览器&#xff0c;提供了丰富的功能和良好的用户体验。其中&#xff0c;搜索引擎的切换功能允许用户根据个人喜好和需求&#xff0c;快速更换搜索引擎&#xff0c;从而获得更加个性化的搜索服务。本文将详细介绍如何在Edge浏览器中进行搜索…...

编程日记 2024/6/29 3:39:42

＜Linux＞ 实现命名管道多进程任务派发

实现命名管道多进程任务派发 common文件 #ifndef _COMMON_H_ #define _COMMON_H_#pragma once #include <iostream> #include <unistd.h> #include <string> #include <sys/types.h> #include <sys/stat.h> #include <wait.h> #include &…...

编程日记 2024/6/29 3:37:37

BigInteger 和 BigDecimal（java)

文章目录 BigInteger(大整数&#xff09;常用构造方法常用方法 BigDecimal(大浮点数&#xff09;常用构造方法常用方法 DecimalFormat(数字格式化) BigInteger(大整数&#xff09; java.math.BigInteger。 父类&#xff1a;Number 常用构造方法 构造方法&#xff1a;BigIntege…...

编程日记 2024/6/29 3:35:29

Linux 进程间通讯

Linux IPC 方式 在Linux系统中&#xff0c;进程间通信&#xff08;IPC&#xff09;是多个运行中的程序或进程之间交换数据和信息的关键机制。Linux提供了多种IPC机制&#xff0c;每种机制都有其特定的用途和优势。以下是Linux上主要的IPC通信方式&#xff1a; 管道&#xff08…...

编程日记 2024/6/29 3:33:25

数据分析三剑客-Matplotlib

数据分析三剑客 数据分析三剑客通常指的是在Python数据分析领域中&#xff0c;三个非常重要的工具和库&#xff1a;Pandas、NumPy和Matplotlib。Pandas主要负责数据处理和分析&#xff0c;NumPy专注于数值计算和数学运算&#xff0c;而Matplotlib则负责数据可视化。这三个库相…...

编程日记 2024/6/29 3:29:18

FastAPI-Body、Field

参考&#xff1a;模式的额外信息 - 例子 - FastAPI 在FastAPI中&#xff0c;Body和Field是两个常用的注解&#xff0c;它们用于定义请求体中的数据或路径参数、查询参数等的处理方式。这两个注解都来自于Pydantic库&#xff0c;用于数据验证和解析&#xff0c;但它们的应用场景…...

编程日记 2024/6/29 3:28:13

软件设计师笔记-操作系统知识（二）

线程 以下是关于线程的一些关键点&#xff1a; 线程是进程中的一个实体&#xff1a;进程是操作系统分配资源&#xff08;如内存空间、文件句柄等&#xff09;的基本单位&#xff0c;而线程是进程中的一个执行单元。多个线程可以共享同一个进程的地址空间和其他资源。线程是CP…...

编程日记 2024/6/29 3:27:10

鸿蒙UI开发快速入门 —— part12: 渲染控制

如果你对鸿蒙开发感兴趣&#xff0c;加入Harmony自习室吧~&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; 扫描下面的二维码关注公众号。 1、前言 在声明式描述语句中开发者除了使用系统组件外&#xff0c;还可…...

编程日记 2024/6/29 3:26:08

添加用户页面（Flask+前端+MySQL整合）

首先导入Flask库和pymysql库。Flask用于创建Web应用程序&#xff0c;pymysql用于连接和操作MySQL数据库。 from flask import Flask, render_template, request import pymysql创建一个Flask应用实例。__name__参数告诉Flask使用当前模块作为应用的名称。 app Flask(__name_…...

编程日记 2024/6/29 3:24:06

素数筛(算法篇)

算法之素数筛 素数筛 引言&#xff1a; 素数(质数)&#xff1a;除了1和自己本身之外&#xff0c;没有任何因子的数叫做素数(质数) 朴素筛法(优化版) 概念&#xff1a; 朴素筛法&#xff1a;是直接暴力枚举2到当前判断的数x(不包括)&#xff0c;然后看在这范围内是否存在因…...

编程日记 2024/6/29 3:23:03

迁移Microsoft Edge

如何将Microsoft Edge迁移到d盘&#xff1f;对于Microsoft Edge想必大部分人都不陌生&#xff0c;它是Windows操作系统的默认浏览器&#xff0c;存储用户的个人数据、缓存和设置等信息。有些时候&#xff0c;我们需要对Microsoft Edge中的数据进行数据迁移&#xff0c;以释放c盘…...

编程日记 2024/6/29 3:22:01

Maven高级理解属性

属性 在这一章节内容中&#xff0c;我们将学习两个内容&#xff0c;分别是 属性版本管理 属性中会继续解决分模块开发项目存在的问题&#xff0c;版本管理主要是认识下当前主流的版本定义方式。 4.1 属性 4.1.1 问题分析 讲解内容之前&#xff0c;我们还是先来分析问题: …...

编程日记 2024/6/29 3:20:58

Trilium Notes浏览器插件保存网页内容到docker私有化部署

利用Trilium浏览器插件可以很方便的把网页内容保存到Trilium&#xff0c;需要先在docker部署好trilium&#xff0c;还没有部署的可以先看这篇文章&#xff1a;trilium笔记私有化部署-www.88531.cn资享网 1.下载Trilium浏览器插件&#xff1a;https://www.npspro.cn/33462.html…...

编程日记 2024/6/29 3:15:49

C++ 统计二进制串中0出现的个数

描述 一个32位有符号整数&#xff0c;使用二进制来表示&#xff0c;现在要统计一下二进制串中0的个数。 示例1 输入&#xff1a; 11 返回值&#xff1a; 29 说明&#xff1a; 二进制00000000000000000000000000001011中有29位0 class Solution { public:/*** 代码中的…...

编程日记 2024/6/29 3:14:46

note-网络是怎样连接的6 请求到达服务器，响应返回浏览器

助记提要 服务器程序的结构套接字的指代方式MAC模块的接收过程IP模块的接收过程TCP模块处理连接包TCP模块处理数据包TCP模块的断开操作URI转换为实际文件路径URI调用程序Web服务器访问控制响应内容的类型 6章 请求到达服务器&#xff0c;响应返回浏览器 1 服务器概览 在数据…...

编程日记 2024/6/29 3:13:43

存储过程与函数：封装数据库逻辑的艺术（七）

引言 在上一章《事务处理》中&#xff0c;我们深入探讨了事务的ACID特性以及如何通过事务控制语句和隔离级别来确保数据的一致性和完整性。本章&#xff0c;我们将把焦点转向存储过程与函数&#xff0c;这是数据库系统中用于封装复杂业务逻辑和增强代码复用性的强大工具。通过…...

编程日记 2024/6/29 3:07:35

【复旦邱锡鹏教授《神经网络与深度学习公开课》笔记】卷积

卷积经常用在信号处理中&#xff0c;用于计算信号的延迟累积。假设一个信号发射器每个时刻 t t t产生一个信号 x t x_t xt​&#xff0c;其信息的衰减率为 w k w_k wk​&#xff0c;即在 k − 1 k-1 k−1个时间步长后&#xff0c;信息为原来的 w k w_k wk​倍&#xff0c;时刻 …...

编程日记 2024/6/29 3:05:31

Trie字符串统计

Trie字符串统计 维护一个字符串集合&#xff0c;支持两种操作&#xff1a; I x 向集合中插入一个字符串 x&#xff1b;Q x 询问一个字符串在集合中出现了多少次。 共有 N个操作&#xff0c;所有输入的字符串总长度不超过 105&#xff0c;字符串仅包含小写英文字母。 输入格式…...

编程日记 2024/6/29 3:03:28

如何实现SASM多语言支持：完整国际化配置与翻译指南

如何实现SASM多语言支持&#xff1a;完整国际化配置与翻译指南 【免费下载链接】SASM SASM - simple crossplatform IDE for NASM, MASM, GAS and FASM assembly languages 项目地址: https://gitcode.com/gh_mirrors/sa/SASM SASM&#xff08;Simple Assembler IDE&…...

编程新知 2026/3/26 23:30:57

lychee-rerank-mm惊艳效果集：Qwen2.5-VL底座下BF16高精度打分可视化

lychee-rerank-mm惊艳效果集&#xff1a;Qwen2.5-VL底座下BF16高精度打分可视化 想象一下&#xff0c;你有一个包含数百张图片的图库&#xff0c;想快速找出所有“夕阳下的海边剪影”照片。传统方法要么靠记忆&#xff0c;要么一张张翻看&#xff0c;费时费力。现在&#xff0…...

编程新知 2026/3/26 23:04:50

基于双层规划模型的微网新能源经济消纳共享储能优化配置：MATLAB代码复现及详细解读

(文章复现)考虑微网新能源经济消纳的共享储能优化配置matlab代码 参考资料《考虑微网新能源经济消纳的共享储能优化配置》 提出了考虑新能源消纳的共享储能电站容量功率配置方法&#xff0c;针对储能电站投运成本最低与微能源网运行经济性最优的多目标&#xff0c;建立了双层规…...

编程新知 2026/3/26 21:38:00

别再只调参了！深入RepVgg设计思想，用CCFF模块优化你的模型特征融合效率

深入解析CCFF模块&#xff1a;用RepVgg思想重构跨尺度特征融合技术 在计算机视觉领域&#xff0c;特征融合一直是提升模型性能的关键环节。传统方法如FPN、PANet虽然有效&#xff0c;但在实时性要求高的场景下往往成为计算瓶颈。今天我们要探讨的CCFF&#xff08;Cross-scale C…...

编程新知 2026/3/26 21:15:52

Java中灵活转换日期时间字符串格式的教程

本教程详细介绍了如何使用Java Java8及更高版本.time API&#xff0c;准确地将各种不同格式的日期时间字符串转换为统一”DD.MM.YYYY“格式。本文强调了现代日期时间API的优势&#xff0c;分析了Datetimeformater模式符号的正确使用&#xff0c;并提供了完整的示例代码和最佳实…...

编程新知 2026/3/26 20:13:43

深蓝词库转换：20+输入法词库互通的完整实战指南

深蓝词库转换&#xff1a;20输入法词库互通的完整实战指南 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 你是否曾在切换输入法时&#xff0c;为无法迁移多年积累的…...

编程新知 2026/3/26 19:37:25

计算机毕业设计springboot校园外卖系统 基于Spring Boot的高校餐饮配送服务平台 Spring Boot框架下的校园在线订餐与配送管理系统

计算机毕业设计springboot校园外卖系统n322b9 &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着互联网技术的日益成熟和普及&#xff0c;网络已经深度融入人们的日常生活&…...

编程新知 2026/3/26 17:59:55

在曹妃甸哪里可以吃到当天现捕上来的野生海鲜？

在曹妃甸&#xff0c;想要吃到当天现捕上来的野生海鲜&#xff0c;高尚堡老刘海鲜绝对是个绝佳的选择。2006 年&#xff0c;一群世代靠海吃海的渔民&#xff0c;在渤海湾码头开起了这家“老刘海鲜饭店”。起初他们只是想把自家渔船捕捞的野生海鲜&#xff0c;用最朴素的做法端给…...

编程新知 2026/3/26 17:55:54

VIIRS在灾害监测中的实战应用：以洪水检测为例的Python代码解析

VIIRS在灾害监测中的实战应用&#xff1a;以洪水检测为例的Python代码解析 当洪水席卷城镇时&#xff0c;每一分钟的响应延迟都可能意味着更多生命财产的损失。VIIRS&#xff08;可见光红外成像辐射计套件&#xff09;作为NASA灾害监测系统的"鹰眼"&#xff0c;其375…...

编程新知 2026/3/26 17:55:54

LiuJuan20260223Zimage v1.0作品集：当传统工笔画遇见AI生成

LiuJuan20260223Zimage v1.0作品集&#xff1a;当传统工笔画遇见AI生成 1. 引言&#xff1a;一次跨越时空的艺术对话 想象一下&#xff0c;你拍了一张现代都市的夜景&#xff0c;或者设计了一张充满未来感的数字海报&#xff0c;然后&#xff0c;你把它交给一位深谙宋元笔法的…...

编程新知 2026/3/26 16:23:07