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.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Web APIs--Dom获取属性操作

目录 1.DOM&#xff08;操作网页内容、用户交互&#xff09; 2.DOM对象获取&#xff08;querySelect(‘’)、querySelectAll(‘’)&#xff09; 总结&#xff1a; 3.操作元素内容&#xff08;修改元素的文本更换内容&#xff09; 1. 元素innerText 属性 2.元素.innerHTML…

代码随想录算法训练营第四十一天| 416. 分割等和子集

416. 分割等和子集 - 力扣&#xff08;LeetCode&#xff09; class Solution {public boolean canPartition(int[] nums) {int sum 0;for (int i0;i<nums.length;i){sum nums[i];}if(sum%2!0){return false;}int weight sum /2;// int[][] dp new int[nums.length][weig…

VirtualBox虚拟机下安装Ubuntu24.04操作系统

目录 0 背景1 虚拟机的安装1.1 下载安装包1.2 走安装向导 2 操作系统的安装2.1 下载光盘镜像文件2.2 安装操作系统到虚拟机上 3 基本配置3.1 网络连接方式3.2 共享文件夹3.3 设置显存大小 0 背景 首先说说Ubuntu系统&#xff0c;或者更普遍一点&#xff0c;Linux系统究竟有什么…

自定义模板DIY专属CSDN个人主页!HTML+CSS个性化全攻略

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 &#x1f4af;如何通过HTMLCSS自定义模板diy出自己的个性化csdn主页&#x…

手机usb共享网络电脑没反应的方法

适用于win10电脑&#xff0c;安卓手机上可以 开启usb网络共享选择&#xff0c;如果选择后一直跳&#xff0c;让重复选择usb选项的话&#xff0c;就开启 开发者模式&#xff0c;进到 开发者模式 里设置 默认usb 共享网络 选项 &#xff0c;就不会一直跳让你选。 1.先用数据线 连…

Redis—String数据类型及其常用命令详解

文章目录 Redis概述1.Redis-String数据类型概述2.常用命令2.1 SET&#xff1a;添加或者修改已经存在的一个String类型的键值对2.2 GET&#xff1a;根据key获取String类型的value2.3 MSET&#xff1a;批量添加多个String类型的键值对2.4 MGET&#xff1a;根据多个key获取多个Str…

WPF——Binding

一、作用 将Window GUI的运行机理从 “事件驱动” 转变为 “数据驱动”。将UI界面与业务逻辑解耦&#xff0c;使得改动一个而无需改动另一个。数据逻辑层自成体系&#xff0c;使得无需借助UI也可进行单元测试。 二、基础 1. Binding源模板 Binding包括源与目标&#xff0c;源…

C语言变量、指针的内存关系

1. type p ? 表示从内存地址p开始&#xff0c;开辟一段内存&#xff0c;内存大小为类型type规定的字节数&#xff0c;然后把等号右边的值写入到这段内存中。 因此&#xff0c;这块内存起点位置是p&#xff0c;结束是ptype字节数-1。 2. type* p ?表示从内存地址p开始&…

DWG转PDF字体研究记录

1.前言 最近需要对PDF中的符合业务规则的文字进行提取&#xff0c;发现有些文字不是文字信息形式存储&#xff0c;而是polyline形式表达&#xff0c;意味着仅仅有形体上的表达&#xff0c;丢失了原本的文字信息。 经过沟通得知&#xff0c;这些PDF是AutoCAD软件导出的&#xf…

SpringMvc—域对象共享数据和视图

一、向request域创建对象 先创建首页&#xff1a; 在testController这个类中&#xff1a; package com.pon.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; Controller public class test…

BirdTalk IM集群中消息流转策略讨论

BirdTalk IM集群中消息流转策略讨论 目前群聊的存储策略是1写多读方案&#xff1b;每个群组一个队列&#xff0c;按时间顺序排列&#xff0c;不区分用户&#xff1b; 私聊的存储是写扩散的&#xff0c;每个人都有自己的消息队列&#xff0c;按时间顺序 保存所有的消息&#x…

贴图大师(Model Painter) 下载使用

贴图大师(Model Painter)是一款是一款专业的纹理贴图工具&#xff0c;支持激光扫描的数据模型和通过摄影测量建模的模型&#xff0c;功能强大&#xff0c;操作简单。 贴图大师是一款专门解决三维建模数字化中纹理编辑和优化的软件工具。贴图大师的输入模型可以支持激光扫描的数…

HarmonyOS角落里的知识:一杯冰美式的时间 -- 之打字机

一、前言 模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果&#xff0c;往往能够吸引人们的眼球&#xff0c;让用户的注意力聚焦在输入的内容上&#xff0c;本文将和大家探讨打字机效果的实现方式以及应用。Demo基于API12。 二、思路 拆分开来很简单&#xff0c;将字符串拆…

SAP PP学习笔记23 - 生产订单(制造指图)的元素2 - 决济规则(结算规则)

上一章讲了生产订单&#xff08;制造指图&#xff09;画面的基本元素。 SAP PP学习笔记22 - 生产订单&#xff08;制造指图&#xff09;的元素1-CSDN博客 本章继续讲生产订单上面的其他元素。 1&#xff0c;Settlement rule&#xff08;决济规则(结算规则)&#xff09;概要 M…

2024-6-20 Windows AndroidStudio SDK(首次加载)基础配置,SDK选项无法勾选,以及下载失败的一些解决方法

2024-6-20 Windows AndroidStudio SDK(首次加载)基础配置,SDK选项无法勾选,以及下载失败的一些解决方法 注意:仅仅是SDK这种刚安装时的配置的下载,不要和开源库的镜像源扯到一起&#xff01;&#xff01;&#xff01;&#xff01; 最近想玩AndroidStudio的JNI开发, 想着安装后…

02_02_SpringMVC基于注解的应用

一、请求处理 1、常用注解 RequestMapping 作用&#xff1a;用来匹配客户端发送的请求&#xff08;用来处理URL映射&#xff0c;将请求映射到处理方法中&#xff09;&#xff0c;可以在类或者方法上使用。 用在类上&#xff0c;可以将请求模块化&#xff0c;避免请求方法中的…

Linux命令的进程关系

一、shell简述 shell是一个命令行解释器工具&#xff0c;它是一个时刻都在运行的程序&#xff0c;当我们在命令行输入命令&#xff0c;shell会去解释执行这个命令。 shell这个工具不止一种&#xff0c;我们使用Linux系统的时候&#xff0c;默认启动的shell 是/etc/passwd 这个…

超级好用的JSON格式化可视化在线工具

JSON是开发非常常用的一种报文格式&#xff0c;最常见的需求就是将JSON进行格式化&#xff0c;最好是有图形化界面显示结构关系&#xff0c;以便进行数据分析。 理想的在线JSON工具&#xff0c;应该支持快速格式化、可压缩、快捷复制、可下载导出&#xff0c;对存在语法错误的地…

【五】【QT开发应用】C++中lambda表达式,值捕获,引用捕获,隐式捕获,lambda表达式的返回类型

Lambda表达式 复盘 Lambda表达式 Lambda 表达式是 C11 引入的一种特性&#xff0c;用于定义匿名函数。它使得可以在代码中方便地定义和使用小段函数&#xff0c;而无需专门定义一个命名的函数。这在需要传递函数作为参数或者需要定义内联函数时非常有用。 基本语法 基本语法…

Apple - Core Text Programming Guide

本文翻译整理自&#xff1a;Core Text Programming Guide&#xff08;Updated: 2014-09-17 https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/CoreText_Programming/Introduction/Introduction.html#//apple_ref/doc/uid/TP40005533 文…