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

news2024/11/27 19:54:05

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

文章目录

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

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

相关文章

卓越的 App UI 风格引领潮流

卓越的 App UI 风格引领潮流

QT基础 - 常见图表绘制

目录 零. 前言 一. 添加模块 折线图 三. 树状图 四. 饼图 五. 堆叠柱状图 六. 百分比柱状图 七. 散点图和光滑曲线图 散点图 光滑曲线图 零. 前言 Qt Charts 是 Qt 框架的一个模块&#xff0c;用于创建各种类型的图表和数据可视化。它为开发者提供了一套功能强大的工…

【面试干货】Java的基础类型和字节大小

【面试干货】Java的基础类型和字节大小 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java编程语言中&#xff0c;有八种基本数据类型&#xff0c;它们分别是&#xff1a;布尔型&#xff08;boolean&#xff09;、字节型&#xff08;byt…

什么是 SSH(安全外壳协议)以及如何工作

安全外壳协议&#xff08;Secure Shell&#xff0c;简称SSH&#xff09;&#xff0c;旨在取代未加密的协议&#xff08;如 Telnet 和 RSH&#xff09;和未受保护的文件传输协议&#xff08;如 FTP 和 RCP&#xff09;&#xff0c;在两个设备之间提供安全的加密连接。 安全外壳…

MyBatis 动态 SQL怎么使用?

引言&#xff1a;在现代的软件开发中&#xff0c;数据库操作是任何应用程序的核心部分之一。而在 Java 开发领域&#xff0c;MyBatis 作为一款优秀的持久层框架&#xff0c;以其简洁的配置和强大的灵活性被广泛应用。动态 SQL 允许开发人员根据不同的条件和场景动态地生成和执行…

Kubernetes部署Kanboard看板管理平台

【云原生】Kubernetes部署Kanboard项目管理平台 文章目录 【云原生】Kubernetes部署Kanboard项目管理平台介绍资源列表基础环境一、检查k8s环境1.1、检查工作节点状态1.2、检查系统pod状态 二、编辑kanboard.yaml文件2.1、创建项目目录2.2、编辑kanboard.yaml文件 三、部署Kanb…

字节跳动的丝绸之路,豆包或将成为赛博“杨枝甘露”

大数据产业创新服务媒体 ——聚焦数据 改变商业 关于字节跳动有一个所有人都知道的秘密&#xff0c;那就是他们正在想方设法地海外扩张&#xff0c;以全球市场来驱动企业的新增长。美国曾经是字节跳动的第二战场&#xff0c;但是随着华盛顿相关法案的出台&#xff0c;在各种不…

推荐5个AI辅助生成论文、降低查重率的网站【2024最新】

一、引言 对于忙碌的学生来说&#xff0c;毕业论文通常是一项艰巨的任务。幸运的是&#xff0c;随着人工智能技术的发展&#xff0c;现在有一些工具可以帮助学生轻松完成论文。本文将介绍五个免费的AI工具&#xff0c;它们能够一键帮助你生成毕业论文&#xff0c;让你的学术生…

2024广东省职业技能大赛云计算赛项实战——Redis主从架构

Redis主从架构 前言 Redis是一个开源的内存数据结构存储系统&#xff0c;一般用于作为数据库、缓存和消息代理使用&#xff0c;而主从架构是许多分布式系统中常见的设计模式&#xff0c;用来提高系统的性能、可靠性和扩展性。 虚拟机使用的是自行创建的CentOS7&#xff0c;如…

记录SpringBoot启动报错解决

记录SpringBoot启动报错解决 报错现场 Failed to configure a DataSource: url attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class Action: Consider the following:If you want an embedde…

反转链表(java精简版)

反转一个单向链表。 public class ReversingLinkedList {static class Node {int val;Node next;public Node(int val) {this.val val;}public boolean hasNext() {return next ! null;}}public static void main(String[] args) {//构造Node head null;Node shift null;for…

MobileNet系列论文阅读笔记(MobileNetV1、MobileNetV2和MobileNetV3)

目录 引言MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications摘要Prior Work -- 先前工作MobileNet Architecture— MobileNet结构Depthwise Separable Convolution—深度可分离卷积Network Structure -- 网络结构 总结 MobileNetV2: Invert…

视频共享融合赋能平台LntonCVS视频监控业务平台建设安全煤矿矿井应用方案

随着我国经济的飞速增长&#xff0c;煤炭作为主要的能源之一&#xff0c;在我国的能源结构中扮演着至关重要的角色。然而&#xff0c;煤矿事故的频繁发生&#xff0c;不仅造成了巨大的人员伤亡和财产损失&#xff0c;也对社会产生了深远的负面影响。因此&#xff0c;实现煤矿的…

transformers Model

☆ 问题描述 在 transformers 框架中&#xff0c;Model 模块是核心组件之一&#xff0c;提供了多种预训练模型及其相关功能&#xff0c;广泛应用于自然语言处理&#xff08;NLP&#xff09;任务。 ★ 解决方案 # 导入相关文件 from transformers import AutoConfig, AutoM…

【odoo】常用的字符转义:“>“,“<“,““,“/“等

概要 字符转义是指在编写代码或处理文本数据时&#xff0c;将特殊字符转换为另一种形式&#xff0c;以便在特定的上下文中正确解析和处理这些字符。 内容 特殊字符描述XML转义表示法&和符号&amp;<小于符号<>大于符号>"双引号&quot;单引号&ap…

Day1:基础语法

今日目标&#xff1a;理解什么是变量、掌握常用的数据类型、学会数据类型转换 一、JavaScript 介绍 1. JavaScript 基础知识 主要讲解 &#xff1a;JavaScript 是什么、书写位置、注释、结束符、输入和输出语法、字面量。 1.1 JavaScript 是什么 是一种运行在客户端(浏览器…

B端业务需求分析的3大注意事项

通过深入分析业务需求&#xff0c;可以准确理解B端用户的具体需求&#xff0c;帮助项目团队设计出真正解决企业问题、提高工作效率的产品或服务。这减少了后期变更&#xff0c;节约了时间和资源。如果没有深入分析业务需求&#xff0c;产品或服务功能可能与实际业务需求脱节&am…

PHP转Go系列 | 数组切片的使用姿势

大家好&#xff0c;我是码农先森。 简介 在 PHP 语言中数组的使用很简单&#xff0c;易用程度简直变态&#xff0c;无论多么复杂的数据格式都可以用数组来表达&#xff0c;可以随心所欲的使用。 <?php $array [1, name, [sex > 男]]; print_r($array);$array []; $…

【LLM之NL2SQL】DAIL-SQL论文阅读笔记

研究背景 该研究旨在提供一个全面、系统的评估框架&#xff0c;用于评估基于大型语言模型&#xff08;LLM&#xff09;的Text-to-SQL技术。特别强调了不同的提示工程策略的有效性和效率&#xff0c;以及开源LLM的可行性。研究的重点是评估在零样本和少样本场景下的不同问题表示…

1.3自然语言的分布式表示-word2vec

文章目录 0基于计数的方法的问题1什么是基于推理的方法2神经网络中单词的表示2.1 MatMul 层的实现 3简单word2vec的实现3.1 CBOW模型的结构3.1.1神经元视角3.1.2层的视角3.1.3多层共享权重时存在的问题 3.2 CBOW模型的学习3.3单词的分布式表示 代码都位于&#xff1a;nlp&#…