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

devtools/2024/9/23 3:14:40/

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.ppmy.cn/devtools/53994.html

相关文章

git-shortlog详解

作用 git-shortlog - Summarize git log output 语法 git shortlog [<options>] [<revision-range>] [[--] <path>…​] git log --prettyshort | git shortlog [<options>] 功能描述 Summarizes git log output in a format suitable for inclus…

AI-从玻尔兹曼机到多模态大模型:Geoffrey Hinton的最新AI洞见

大型神经网络有超越训练数据的能力 背景&#xff1a; 在人工智能的辉煌历史中&#xff0c;Geoffrey Hinton 教授不仅是深度学习的奠基人之一&#xff0c;更是推动了整个领域从理论到实践的转变。在这次深入的访谈中&#xff0c;Geoffrey Hinton分享了自己在人工智能研究中的个…

【论文阅读】Multi-Camera Unified Pre-Training via 3D Scene Reconstruction

论文链接 代码链接 多摄像头三维感知已成为自动驾驶领域的一个重要研究领域&#xff0c;为基于激光雷达的解决方案提供了一种可行且具有成本效益的替代方案。具有成本效益的解决方案。现有的多摄像头算法主要依赖于单目 2D 预训练。然而&#xff0c;单目 2D 预训练忽略了多摄像…

【mysql】关键词搜索实现

关键词搜索实现两种方式 -- 方式1 模糊匹配搜索 -- 场景一&#xff1a;搜索出来地址内包含‘李’和‘中国’的 select * from tn_md_cust_link where address like concat (%李%) or address like concat (%中国%) -- 场景二&#xff1a;搜索地址或者名称包含 ‘181’ 的 …

leetcode67 二进制求和

给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 示例 1&#xff1a; 输入:a "11", b "1" 输出&#xff1a;"100" 示例 2&#xff1a; 输入&#xff1a;a "1010", b "1011" 输出&#…

【数据结构与算法】树的遍历,森林遍历 详解

树的先根遍历、后根遍历对应其二叉树的哪种遍历 树的先根遍历对应其二叉树的先序遍历&#xff08;根-左-右&#xff09;。树的后根遍历对应其二叉树的中序遍历&#xff08;左-根-右&#xff09;。 森林的先根遍历、中根遍历对应其二叉树的哪种遍历? 森林的先根遍历对应其二…

【Python】从基础到进阶(一):了解Python语言基础以及变量的相关知识

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 引言一、Python简介1.1 历史背景1.2 设计哲学1.3 语言特性1.4 应用场景1.5 为什么选择Python 二、Python语言基础2.1 注释规则2.1.1 单行注释2.1.2 多行注释2.1.3 文件编码声明注释 2.2 代码缩进2.3 编码规范2.3.1 命名规范…

【大作业】今日事、今日毕任务管理系统

一份声明文档,描述你的程序的功能,包括你的输入输出、程序提供的数据、预期输出等内容。 这是一个任务管理系统,功能列表如下。 一、这是主界面: === 欢迎使用 今日事今日毕 任务管理系统 === 查看所有任务查看未完成任务查看已完成任务添加新任务标记任务为已完成修改当天…