HTML静态网页成品作业(HTML+CSS)—— 家乡成都介绍网页(4个页面)

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有4个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>成都</title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div class="mid">
		<div class="nav">
			<a href="index.html">网站首页</a>
			<a href="lishi.html">成都历史</a>
			<a href="jingdian.html">成都景点</a>
			<a href="zaxianliuyan.html">在线留言</a>
		</div>
		<div class="banner">
			<img src="./images/banner.jpg" alt="">
		</div>
		
		
		<div class="m">
			<div class="t">成都简介</div>
			<div class="jianjie">
				<div class="jianjie_wenzi">
					成都市是中国首批国家历史文化名城之一,是古蜀文明的重要发源地,“天府之国”的中心,有着世界罕见的3000年城址不迁、2500年城名不改的历史特征。前316年,秦灭蜀,始设蜀郡并成都县。前311年,仿秦制重建城垣,为有文献记载的城市规划与建设之始,已有2300多年历史。汉因织锦业发达专设锦官管理,故有“锦官城”“锦城”之称,五代后蜀时遍种芙蓉,故别称“芙蓉城”“蓉城”。1921年,始设市政筹备处,1928年,正式设市。成都是重要的电子信息产业基地,成渝地区双城经济圈核心城市、区域经济中心、科技中心、世界文化名城和国际门户枢纽,西南地区的科技中心、商贸中心、金融中心和交通、通信枢纽,中国人民解放军西部战区机关驻地,是第31届世界大学生夏季运动会的举办地。20245月,入选承担数据标注基地建设任务城市名单。
				</div>
				<div class="jianjie_pic">
					<img src="./images/jianjie.jpeg" alt="">
				</div>
			</div>
			
			
			<div class="t">成都特色美食</div>
			<div class="meishi">
				<div class="meishi_1">
					<img src="./images/meishi_1.jpg" alt="">
					<div class="meishi_name">双流老妈兔头</div>
				</div>
				<div class="meishi_1">
					<img src="./images/meishi_2.png" alt="">
					<div class="meishi_name">夫妻肺片</div>
				</div>
				<div class="meishi_1">
					<img src="./images/meishi_3.jpeg" alt="">
					<div class="meishi_name">四川担担面</div>
				</div>
				<div class="meishi_1">
					<img src="./images/meishi_4.png" alt="">
					<div class="meishi_name">麻婆豆腐</div>
				</div>
				<div class="meishi_1">
					<img src="./images/meishi_5.jpeg" alt="">
					<div class="meishi_name">口水鸡</div>
				</div>
				<div class="meishi_1">
					<img src="./images/meishi_6.jpeg" alt="">
					<div class="meishi_name">冒菜</div>
				</div>
			</div>
		</div>
		
		<div class="footer">
			成都 版权所有
		</div>
	</div>
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

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

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

相关文章

数据库异常恢复2-备份文件恢复(快速恢复的手动启动方式)

(四) 备份文件备份恢复的概念 本次所说的数据恢复有异于数据的导入导出 1. 备份工具 gbase8s数据库提供了两种工具进行完成系统物理备份、逻辑日志备份和系统恢复&#xff1a;ontape和onbar ontape&#xff1a;提供了基本的系统物理备份、日志备份和恢复能力&#xff0c;其…

多目标跟踪中用到的求解线性分配问题(Linear Assignment Problem,LAP)Python

多目标跟踪中用到的求解线性分配问题&#xff08;Linear Assignment Problem&#xff0c;LAP&#xff09;Python flyfish 如果想看 C版本的&#xff0c;请点这里。 线性分配问题&#xff08;LAP&#xff0c;Linear Assignment Problem&#xff09;是一个经典的优化问题&…

java实现分类下拉树,点击时对应搜索---后端逻辑

一直想做分类下拉&#xff0c;然后选择后搜索的页面&#xff0c;正好做项目有了明确的需求&#xff0c;查找后发现el-tree的构件可满足需求&#xff0c;数据要求为&#xff1a;{ id:1, label:name, childer:[……] }形式的&#xff0c;于是乎&#xff0c;开搞&#xff01; 一…

如何下载DVS Gesture数据集?解决tonic.datasets.DVSGesture错误HTTP Error 403: Forbidden

1 问题 DVSGesture数据集是一个专注于动态视觉传感&#xff08;Dynamic Vision Sensor, DVS&#xff09;技术的数据集&#xff0c;它包含了基于事件的图像记录&#xff0c;用于手势识别任务。DVSGesture数据集由一系列动态图像组成&#xff0c;这些图像是通过动态视觉传感器捕…

免费分享:GIS插件-ARCGIS一键拓扑(模型构建器)(附下载方法)

工具详情 ARCGIS一键拓扑(模型构建器)&#xff0c;可直接在ArcGIS中安装使用。 可试用本工具进行数据拓扑检查。 下载方法 下载地址&#xff1a;https://open.geovisearth.com/service/resource/150下载流程&#xff1a;点击上面的下载地址&#xff0c;打开数字地球开放平台…

数据结构-绪论

目录 前言一、从问题到程序二、数据结构的研究内容三、理解数据结构3.1 数据3.2 结构3.2.1 逻辑结构的分类3.2.2 存储结构的分类 3.3 数据结构 四、数据类型和抽象数据类型4.1 抽象数据类型的定义格式4.2 抽象数据类型的实现 总结 前言 本篇文章先介绍数据结构的研究内容&…

php反序列化的一些知识

问题 <?php $raw O:1:"A":1:{s:1:"a";s:1:"b";}; echo serialize(unserialize($raw)); //O:1:"A":1:{s:1:"a";s:1:"b";}?> php反序列化的时按理说找不到A这个类&#xff0c;但是他没有报错&#xff0c;…

SAR动目标检测系列:【4】动目标二维速度估计

在三大类杂波抑制技术(ATI、DPCA和STAP)中&#xff0c;STAP技术利用杂波与动目标在二维空时谱的差异&#xff0c;以信噪比最优为准则&#xff0c;对地杂波抑制的同时有效保留动目标后向散射能量&#xff0c;有效提高运动目标的检测概率和动目标信号输出信杂比&#xff0c;提供理…

C++学习(23)

#学习自用# union 共用体和结构体相似&#xff0c;但是共用体一次只能占用一个成员的内存&#xff0c;所有成员共用同一地址。 #include<iostream> using namespace std; union A {int int_val;float float_val; }a; int main() {a.float_val 2.0f;cout << a.f…

【AWS SMB 能力最佳实践】利用 MGN 解决方案实现跨AWS账号迁移Amazon EC2 实例、弹性IP地址等资源

文章目录 一、实验情景二、实验关键服务概述2.1 MGN解决方案2.2 VPC对等连接 三、实验架构示意图四、实验具体操作步骤4.0 创建访问密钥4.1 创建VPC资源4.1.1 在源账号上创建VPC4.1.2 在目标账号上创建VPC 4.2 创建对等连接✨4.2.1 发起对等连接请求4.2.2 接受对等连接请求4.2.…

【内含优惠码】重磅发售!《2023年度中国量化投资白皮书》(纸质版)

这是可以公开了解量化行业图景的&#xff0c;为数不多资料。 简介 《2023年度中国量化投资白皮书》由宽邦科技、华泰证券、金融阶、华锐技术、AMD、阿里云、英迈中国等多家机构联合发起编写&#xff0c;并于2024年6月15日正式发布&#xff0c;全书公17万字6大章节勾勒最新量化…

torch.optim 之 Algorithms (Implementation: for-loop, foreach, fused)

torch.optim的官方文档 官方文档中文版 一、Implementation torch.optim的官方文档在介绍一些optimizer Algorithms时提及它们的implementation共有如下三个类别&#xff1a;for-loop, foreach (multi-tensor), and fused。 Chat-GPT对这三个implementation的解释是&#xf…

算法设计与分析 实验4 动态规划法求扔鸡蛋问题

目录 一、实验目的 二、问题描述 三、实验要求 四、实验内容 动态规划法 算法描述 算法伪代码描述 算法复杂度分析 数据测试 二分优化的动态规划法 算法描述 二分优化&#xff1a; 算法伪代码 算法复杂度分析 数据测试 单调决策优化的动态规划法 算法描述 算…

【Ardiuno】实验使用ESP32接收电脑发送的串口数据(图文)

使用ESP32可以非常方便的与电脑进行串口通讯&#xff0c;一般我们可以用串口接收ESP32的输出作为调试使用&#xff0c;今天我们再来实验一下从电脑端向ESP32单片机发送数据。 发送数据程序代码&#xff1a; void setup() {Serial.begin(9600); }void loop() { if(Serial.ava…

股票核心因子解读以及如何从接口获取股票数据信息

目录 1 股票基础信息1.1 股票核心因子1.2 获取股票信息 2 如何从接口获取股票数据2.1 yfinance2.2 finnhub-python2.3 alpha_vantage2.4 efinance2.4 Tushare 3 如何从各大金融平台获取咨询信息3.1 国外3.2 国内 1 股票基础信息 1.1 股票核心因子 基本面因子 因子名称计算公…

前缀和+双指针,CF 131F - Present to Mom

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 131F - Present to Mom 二、解题报告 1、思路分析 很经典的一种把列看作cell 来进行双指针/递推的题型 我们考虑&#xff0c;可以预处理出原矩阵中的所有star 然后我们去枚举矩形的上下边界&#xff0c;把…

java读取wps嵌入式图片思路

这个只写了思路具体代码在文章最后&#xff0c;不想了解得直接去拿代码 了解Excel数据结构 Excel 文件格式后缀xls,xlsx 其实是一个压缩文件&#xff0c;是由多个文件夹以及xml 文件组合为一个文件&#xff0c;xml文件记录了Excel得内容以及样式等信息。加入在桌面新建一个xls…

MySQL之复制(七)

复制 定制的复制方案 分离功能 许多应用都混合了在线事务处理(OLTP)和在线数据分析(OLAP)的查询。OLTP查询比较短并且是事务型的。OLAP查询则通常很大&#xff0c;也很慢&#xff0c;并且不要求绝对最新的数据。这两种查询给服务器带来的负担完全不同&#xff0c;因此它们需…

一文教你在centos 7.9中安装mysql5.7(超级详细)

##red## &#x1f534; 大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff0c;雄雄的小课堂。 一、前言 每当新来一个服务器之后&#xff0c;习惯性的都会安装一个宝塔面板&#xff0c;不为别的&#xff0c;就为了装环境方便点儿&#xff0c;比如常用的jdk,m…

python的赋值运算

# coding:utf-8 x20 #直接复制&#xff0c;直接将20赋值给x y10 xxy #将xy的和赋值给给x print(x) xy print(x)#40 x-y #相当于x-y print(x) #30x*y #xx*y x/y #xx/y print(x) x%2#xx%2 print(x)#0.0 隐式转换 z3 y//z #yy//z y**2#yy**2 #python支持链式赋值 abc100#相当于a10…