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.mzph.cn/web/32339.shtml

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

相关文章

qt 简单实验 json格式的文件写入配置文件

1.概要 2.代码 //#include "mainwindow.h"#include <QApplication> #include <QFile> #include <QJsonDocument> #include <QJsonObject> //读取json数据的配置文件int main(int argc, char *argv[]) {QApplication a(argc, argv);QString…

学懂C#编程:常用高级技术——委托(Delegate)应用场景——委托与Lambda表达式的结合使用详解

在C#中&#xff0c;委托与Lambda表达式的结合使用是现代编程实践中的一个重要且强大的特性&#xff0c;它极大地提高了代码的简洁性和可读性。下面将详细讲解这两个概念如何协同工作&#xff0c;以及如何在实际编程中有效利用它们。 委托基础 委托是C#中的一种引用类型&#x…

基于SpringBoot+协同过滤算法的家政服务平台设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…

问题解答:如何每隔2分钟弹出一次弹出框

事情是这样的&#xff0c;昨天有个粉丝问我&#xff1a;如何每隔2分钟弹出一次弹出框。 我说 那不就是setInterval嘛&#xff0c;然后设定2分钟执行一次。 他说 不是的&#xff0c;这个2分钟只是我说的一个时间&#xff0c;不是常量&#xff0c;是服务端下发的。 我说 那就获取…

matlab入门基础笔记

1、绘制简单三角函数&#xff1a; 绘制正弦曲线和余弦曲线。x[0:0.5:360]*pi/180; plot(x,sin(x),x,cos(x)); &#xff08;1&#xff09;明确x轴与y轴变量&#xff1a; 要求为绘制三角函数&#xff1a; X轴&#xff1a;角度对应的弧度数组 Y轴&#xff1a;对应sin(x)的值 求…

电商平台生活用品销售数据分析与应用

摘 要 在当前互联网飞速发展的时代&#xff0c;计算机应用给我们的工作生活带来了极大的便利。如今我们的生活离不开电商平台&#xff0c;其随之而来的是各种各样的销售数据与消费者信息&#xff0c;这些数据和信息的分析应用成为了当前互联网领域研究的重要部分。 本论文以基…

python自动化办公工具:自动批量生成奖状的工具(可视化)

&#x1f446;点击关注 获取更多编程干货&#x1f446; 不知道大家有没有注意到一种趋势&#xff0c;现在即便是那些非程序员&#xff0c;甚至对计算机一窍不通的人&#xff0c;也开始学习Python了&#xff0c;其“普及程度”实在让人感到有些惊讶。 那么&#xff0c;对于那些…

如何通过防泄密U盘,实现数据传输的安全性及可控性?

随着信息技术的发展&#xff0c;U盘作为重要的数据存储和传输工具&#xff0c;其安全性越来越受到关注。在日常办公中&#xff0c;经常会遇到这类情况&#xff1a;员工为了方便&#xff0c;随意使用U盘拷贝公司的机密资料。一旦U盘丢失或者被窃取&#xff0c;公司的机密资料就有…

警惕!最新17本期刊(含2本Top)被“镇压”,无影响因子无分区,这是被踢了吗?

本周投稿推荐 SSCI • 中科院2区&#xff0c;6.0-7.0&#xff08;录用友好&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09; CNKI • 7天录用-检索&#xff08;急录友好&#xff09; SCI&EI • 4区生物医学类&#xff0c;0.5-1.0&#xff08;录用…

【金】02Y90-60 大数据-HivetoMysQL

1、安装 Java 程序&#xff08;jdk&#xff09; 2、添加以下JAR包 3、确认配置成自己的数据库 ....

【数据结构与算法】线索二叉树 详解

为什么可在不增加指针域的情况下&#xff0c;对二叉树进行线索化&#xff1f; 不增加指针域&#xff1a;因为可以利用n1个空链域。 在线索二叉树中&#xff0c;为每个节点添加两个标志位&#xff0c;分别表示左指针和右指针是普通的孩子指针还是线索&#xff08;前驱或后继&a…

禅道身份认证绕过漏洞(QVD-2024-15263)复现

禅道项目管理系统在开源版、企业版、旗舰版的部分版本中都存在此安全漏洞。攻击者可利用该漏洞创建任意账号实现未授权登录。 1.漏洞级别 高危 2.漏洞搜索 fofa: title"禅道"3.影响范围 v16.x < 禅道 < v18.12 &#xff08;开源版&#xff09; v6.x <…

解决云原神在Linux浏览器鼠标无法旋转视角问题

【20230917】手动修复米哈游云游戏在Linux平台无法锁定鼠标问题 - 哔哩哔哩 // UserScript // name Genshin Cloud Mouse Fix // namespace https://www.bilibili.com/read/cv26576757/ // version 0.1 // description Fix a Genshin cloud game mouse move …

《STM32 HAL库》CAN通信系列函数详尽解析——HAL_CAN_Init()

食用指南&#xff1a;本文主要内容为梳理CAN初始化函数主要运行逻辑及重点功能实现代码的详尽解析。函数源码在文末&#xff0c;建议在阅读源码之后观看。 CAN相关寄存器图&#xff1a; 主要逻辑分析&#xff1a; 下面分点梳理函数的主要逻辑&#xff08;注意逻辑序号&#xf…

function包装器和bind包装器

function包装器和bind包装器 包装器function包装器为什么需要functionfunction包装器function包装器的应用场景逆波兰表达式求值 bind包装器bind包装器的应用场景 包装器 包装器是用于给其他编程接口提供更一致或更合适的接口 由于函数调用可以使用函数名、函数指针、函数对象…

Java_POJO

概念 POJO即简单的Java对象&#xff0c;区别于JavaBean JavaBean&#xff1a;特殊的Java类&#xff0c;容易被重用或插入到其他应用程序中去&#xff0c;通过封装属性和方法成为具有某种功能或者处理某个业务的对象 这个类必须有public的无参构造器所有属性都是private的所有属…

【React】极客园--04.发布文章模块

实现基础文章发布 创建基础结构 import {Card,Breadcrumb,Form,Button,Radio,Input,Upload,Space,Select } from antd import { PlusOutlined } from ant-design/icons import { Link } from react-router-dom import ./index.scssconst { Option } Selectconst Publish () …

使用Java构建微服务架构的最佳实践

使用Java构建微服务架构的最佳实践 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 随着云计算、容器化和微服务架构的兴起&#xff0c;越来越多的企业开始采用…

【JavaEE】Cookie和Session详解

一.Cookie 首先我们知道HTTP协议本身是’‘无状态’‘的, 这里的’‘无状态’指的是:默认情况下HTTP协议的客户端和服务器之间的这次通信,和下次通信之间没有直接的联系. 但是在实际的开发过程之中, 我们很多时候是需要知道请求之间的关联关系的. 例如登陆网站成功后,第二次访…

[modern c++][17] 任意数据类型 any

前言&#xff1a; #include <any> c17里引入了std::any类型&#xff0c;这个类型类似于union类型&#xff0c;但是比union功能多且能容纳所有类型(内置类型/自定义类型)&#xff0c;同时提供 type 方法用于获取一个 type_info 实例&#xff0c;进而用于准确判断入参的准…