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

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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万平方公里 。根据第七次人口普查数据,截至2020111日零时,莆田市常住人口为321.0714万人。</p><p>莆田历史底蕴深厚,史称“兴化”,素有“海滨邹鲁”、“文献名邦”之美称,自唐以来,涌现出2482名进士、21名状元,17名宰相。</p><p>基础设施完善,湄洲湾、兴化湾、平海湾“三湾环绕”,湄洲湾为深水良港,可建万吨级以上泊位150多个;福厦铁路、永莆铁路贯穿全境 ,湄洲湾港口铁路支线投入使用;福厦高速、沈海复线、莆永高速、湄渝高速形成“两纵两横”格局。同时,莆田被列为第一批国家新型城镇化综合试点地区,及消费品工业“三品”战略示范城市。202010月,被评为全国双拥模范城(县)。</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.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言基础笔记(全)

一、数据类型 数据的输入输出 1.数据类型 常量变量 1.1 数据类型 1.2 常量 程序运行中值不发生变化的量&#xff0c;常量又可分为整型、实型(也称浮点型)、字符型和字符串型 1.3 变量 变量代表内存中具有特定属性的存储单元&#xff0c;用来存放数据&#xff0c;即变量的值&a…

【Echarts】散点图 制作 气泡 类型图表

目录 需求主要代码效果展示注 需求 需参照设计图画出对应图表 主要代码 /**** 数据 ****/ this.dataList [...Array(8).keys()].map((item) > {return {ywlxmc: 业务类型 (item 1),sl: item > 4 ? 50 : 70} })/**** 气泡样式 ****/ const styleList [{offset: [56…

MySQL实训

项目名称与项目简介 股票交易系统是一个综合性的金融服务平台&#xff0c;它提供了股票买卖、交易查询、用户管理、股票信息管理以及资金账户管理等功能。系统旨在为用户提供一个安全、高效、便捷的股票交易环境&#xff0c;让用户能够实时掌握市场动态&#xff0c;做出合理的…

探索Facebook的未来世界:数字社交的演进之路

在数字化和全球化的浪潮中&#xff0c;社交网络如Facebook已经成为了人们日常生活不可或缺的一部分。然而&#xff0c;随着技术的迅猛发展和用户需求的不断变化&#xff0c;Facebook正在经历着社交平台的演进之路。本文将探索Facebook的未来世界&#xff0c;分析数字社交的发展…

用英文介绍美国总统Trump: Donald J. Trump Twice Impeached (2017 – 2021)

Donald J. Trump: Twice Impeached (2017 – 2021) Link: https://www.youtube.com/watch?vJ7RC2DKf6rs&listPLybg94GvOJ9E-ZM1U6PAjgPUmz-V4-Yja&index45 Summary Summary of Donald Trump’s Rise and Presidency Donald John Trump, originally from Queens, Ne…

【MTK平台】如何学习Bluedroid A2DP Code

一 Bluedroid A2DP架构图 备注: vendor/mediatek/proprietary/packages/modules/Bluetooth/system/audio_a2dp_hw/src 目录下编译生成audio.a2dp.default.so,主要实现a2dp做为设备的功能 二 A2DP File Hierarchy ModuleFileDescriptionAudio HAL (hardware/libhardware/…

Arcgis 计算经纬度坐标并补齐6位小数

工作中我们经常需要在Arcgis中计算点的经纬度或者线的起点、终点坐标&#xff0c;为确保数据的准确性&#xff0c;我们必须保留6位小数&#xff0c;但我们在默认计算的时候偶尔会遇到算出来的经纬度坐标小数位不足6位&#xff0c;那我们应该如何补齐呢&#xff0c;这里我将方法…

智芯开发板----环境配置

一、软件准备 Keil IDE/ IAR IdeSupport_Install_Package已经上传到资源中自行下载即可。 二、IAR环境配置 1.首先将IdeSupport_Install_Package内的IAR文件复制到你的IAR安装路径中如图所示&#xff1a; 2.按如图所示的路径进行复制即可 3.以记事本的方式打开这个xml文件…

RK3588 Android13 TvSetting 中性能浮窗RAM显示bug

前言 电视产品,客户发现在设备偏好设置->高级设置->性能浮窗菜单里显示的 RAM 大小是错误的, 要求改成正确的,并且屏幕密度修改后,这个浮窗显示不全,也需要一起处理。 效果图 TvSetting 部分修改文件清单 bug 原因在于 Formatter.formatFileSize 这个 API,我们…

聚观早报 | iPhone 16核心硬件曝光;三星Galaxy全球新品发布会

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 6月28日消息 iPhone 16核心硬件曝光 三星Galaxy全球新品发布会 苹果正多方下注布局AI商店 黄仁勋2024年薪酬3400…

OpenHarmony开发实战:HDF驱动开发流程

概述 HDF&#xff08;Hardware Driver Foundation&#xff09;驱动框架&#xff0c;为驱动开发者提供驱动框架能力&#xff0c;包括驱动加载、驱动服务管理、驱动消息机制和配置管理。并以组件化驱动模型作为核心设计思路&#xff0c;让驱动开发和部署更加规范&#xff0c;旨在…

构建个人文件上传服务:Python Flask实现上传和下载完整指南

介绍 在本教程中&#xff0c;我们将学习如何使用Python Flask框架将文件上传到服务器&#xff0c;并使用SQLite数据库来跟踪上传的文件。我们将提供后端代码和一个示例项目的Git链接&#xff0c;以便您可以轻松地跟随本教程。 准备工作 首先&#xff0c;您需要安装Python和F…

Java基础知识-线程

Java基础知识-线程 1、在 Java 中要想实现多线程代码有几种手段&#xff1f; 1. 一种是继承 Thread 类 2. 另一种就是实现 Runnable 接口 3. 最后一种就是实现 Callable 接口 4. 第四种也是实现 callable 接口&#xff0c;只不过有返回值而已 2、Thread 类中的 start() 和 …

Python 面试【★★★】

阐述以下方法 classmethod, staticmethod, property&#xff1f; 解释什么是lambda函数&#xff1f;它有什么好处&#xff1f;

手机远程控制另一台手机的全新使用教程(安卓版)

看完这篇文章&#xff0c;你可以了解到安卓手机如何远程控制安卓手机&#xff0c;以及苹果手机如何远程控制安卓手机。 如果想要用安卓手机远程管控苹果手机&#xff0c;或者苹果手机远程管控另一台苹果手机&#xff0c;请点击查看视频《手机远程管控另一台手机的全新使用教程…

springcloud第4季 分布式事务seata作用服务搭建1

一 seata作用 1.1 seata简介 1.seata是一款解决分布式事务的解决方案&#xff0c;致力于在微服务架构下提供高性能和简单易用的分布式事务服务。 1.2 seata的术语 一个中心&#xff1a;全局事务id&#xff0c;xid&#xff0c;在调用服务链路的上下文中进行传播。TC(Transa…

使用API有效率地管理Dynadot域名,为文件夹中的域名设置域名转发

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

VUE大屏的开发过程(纯前端)

写在前面&#xff0c;博主是个在北京打拼的码农&#xff0c;工作多年做过各类项目&#xff0c;最近心血来潮在这儿写点东西&#xff0c;欢迎大家多多指教。 对于文章中出现的任何错误请大家批评指出&#xff0c;一定及时修改。有任何想要讨论和学习的问题可联系我&#xff1a;1…

基于Redis和openresty实现高并发缓存架构

目录 概述缓存架构设计实践代码路由业务封装redis 效果 概述 本文是对项目中 QPS 高并发相关问题的一种解决方案&#xff0c;利用 Nginx 与 Redis 的高并发、超低延迟响应&#xff0c;结合 Canal 进行实现。 openrestry官网 当程序需要提供较高的并发访问时&#xff0c;往往需…

基于大数据架构的内容安全风控与分析

1 项目介绍 1.1 研究目的和意义 在数字化时代&#xff0c;内容安全成为了互联网企业面临的一个重要挑战。海量数据的产生与传播&#xff0c;伴随着不良信息和网络安全威胁的日益增加。因此&#xff0c;本课题旨在通过构建一个基于大数据架构的内容安全风控与分析系统&#xf…