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,一经查实,立即删除!

相关文章

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

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

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

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

function包装器和bind包装器

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

【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 () …

【JavaEE】Cookie和Session详解

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

IPv6知识点整理

IPv6&#xff1a;是英文“Internet Protocol Version 6”&#xff08;互联网协议第6版&#xff09;的缩写&#xff0c;是互联网工程任务组&#xff08;IETF&#xff09;设计的用于替代IPv4的下一代IP协议&#xff0c;其地址数量号称可以为全世界的每一粒沙子编上一个地址 。 国…

BigDataCloud 反向地理编码

在当今数字化飞速发展的时代&#xff0c;地理信息的精确获取和游戏数据的深入分析成为众多领域的关键需求。2024 年的今天&#xff0c;技术的创新为我们带来了更为出色的 API 服务。BigDataCloud 反向地理编码服务&#xff0c;能够将经纬度迅速而准确地转换为详细位置信息&…

ThinkPHP5大学生社会实践管理系统

有需要请加文章底部Q哦 可远程调试 ThinkPHP5大学生社会实践管理系统 一 介绍 大学生社会实践管理系统基于ThinkPHP5框架开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈&#xff1a;ThinkPHP5mysqlbootstrapphpstudyvscode 二 功…

ChatTTS增强版V3【已开源】,长文本修复,中英混读,导入音色,批量SRT、TXT

ChatTTS增强版V3来啦&#xff01;本次更新增加支持导入SRT、导入音色等功能。结合上次大家反馈的问题&#xff0c;修复了长文本、中英混读等问题。 项目已开源(https://github.com/CCmahua/ChatTTS-Enhanced) 项目介绍 V3 ChatTTS增强版V3&#xff0c;长文本修复&#xff0c…

找不到xinput1_3.dll如何修复?总结几种靠谱的修复方法

在数字时代&#xff0c;软件问题几乎是每个电脑用户都会遇到的难题。最近&#xff0c;我也遇到了一个令人头疼的问题——xinput1_3.dll文件丢失。这个问题导致我无法正常运行一些游戏&#xff0c;十分影响我的娱乐体验。通过这次修复经历&#xff0c;我不仅解决了问题&#xff…

8个腾讯,18个阿里,104个百度

8个腾讯、18个阿里巴巴、104个百度!英伟达市值已经超越我的前司微软&#xff0c;成为全球第一&#xff0c;&#xff08;虽然今天又被微软超越&#xff0c;但势头非常猛&#xff09;达到了恐怖的3.34万亿美元&#xff01;这是什么概念&#xff1f;相当于8个腾讯&#xff0c;18个…

ES6+Vue

ES6Vue ES6语法 ​ VUE基于是ES6的&#xff0c;所以在使用Vue之前我们需要先了解一下ES6的语法。 1.什么是ECMAScript6 ECMAScript是浏览器脚本语言的规范&#xff0c;基于javascript来制定的。为什么会出现这个规范呢&#xff1f; 1.1.JS发展史 1995年&#xff0c;网景工…