当前位置： 首页 > news >正文

HTML静态网页成品作业(HTML+CSS)——世博园介绍(2个页面)

news 文章来源：https://blog.csdn.net/weixin_42283461/article/details/136796342 2025/2/1 6:45:00

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

文章目录

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

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有2个页面。

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>世博园</title><link rel="stylesheet" type="text/css" href="./css/style.css"></head>
<body><div class="main"><div class="header"><div class="header_logo"><img src="./images/logo.png"></div><ul><li><a href="index.html">景区简介</a></li><li><a href="jieshao.html">各馆介绍</a></li></ul></div><div class="banner"><img src="./images/004.jpeg"></div><div class="content"><h1>景区简介</h1><p>上海世博园是2010年上海世博会的举办场地。2010年上海世博会是首次由中国举办，是世界博览会史上最大规模。总投资超过北京奥运会，占地5.28平方公里，参加国家和组织246个，参观人数7308万人，举办活动22900场。园区坐落于美丽的黄浦江畔，卢浦大桥和南浦大桥之间的滨水地区，连接浦西和浦东，极其巧妙地扣住了`城市，让生活更美好`这个世博主题</p><div class="content_img"><img src="./images/001.png"></div><h1>景点分布</h1><p>世博园坐落于南浦大桥和卢浦大桥之间，沿上海城区黄浦江两岸布局。园区占地5.4平方公里，建有5大场馆群，分别为独立馆群、联合馆群、企业馆群、主题馆群和中国馆群。按区域世博园区分为A、B、C、D、E五个功能片区，其中A、B、C三个功能片区分布在浦东地区，D、E两个功能片区分布在浦西地区。世博园A片区主要布置部分亚洲国家馆等场馆。世博园B片区主要布置世界主题馆、部分亚洲国家馆、大洋洲国家馆、国际组织馆等场馆。世博园C片区主要布置欧洲、美洲、非洲国家馆等场馆。世博园D片区主要布置城市足迹馆和企业馆等场馆。世博园E片区主要布置城市未来馆、企业馆和城市最佳实践区等场馆。世博会结束后，保留了一轴四馆，世博轴、世博中心、世博主题馆、世博文化中心、中国国家馆。</p><div class="content_img"><img src="./images/002.png"></div></div><div class="footer">世博园</div></div>
</body>
</html>

五、源码获取

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

相关文章：

HTML静态网页成品作业(HTML+CSS)——世博园介绍(2个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有2个页面。 二、作品演示 三、代…...

编程日记 2024/3/19 16:50:59

微信小程序订阅消息授权弹窗事件

微信小程序消息订阅授权弹窗事件 &#xff0c;每次授权完成之后&#xff0c;只可以推送一条模板消息。 目录 1、HTML代码 2、JS代码 1、HTML代码 <button bindtap"openPopup" class"openPopup">订阅消息</button> 2、JS代码 // 是否设置过授…...

编程日记 2024/3/19 16:48:56

谷歌的后量子密码学威胁模型

1. 引言 若现在不使用量子安全算法来加密数据&#xff0c;能够存储当前通信的攻击者最快十年内就能对其解密。这种先存储后解密的攻击是当前采用后量子密码学 (post-quantum cryptography&#xff0c;PQC) 背后的主要动机&#xff0c;但其他未来的量子计算威胁也需要一个深思熟…...

编程日记 2024/3/19 16:44:52

机器人在果园内行巡检仿真

文章目录 创建工作空间仿真果园场景搭建小车模型搭建将机器人放在仿真世界中创建工作空间 mkdir -p ~/catkin_ws/src cd ~/catkin_ws仿真果园场景搭建 cd ~/catkin_ws/src git clone https://gitcode.com/clearpathrobotics/cpr_gazebo.git小车模型搭建 DiffBot是一种具有两个…...

编程日记 2024/3/19 16:43:51

蓝桥杯算法基础（14）：十大排序算法（归并排序）c语言版

归并排序 基于分而治之的思想&#xff0c;拿两个已经有序的序列重新组合成一个新的有序序列. 这是一个简单的合并函数&#xff0c;需要两个序列都有序 //默认a和b数组都是有序的 //temp为一个数组的首地址 void mergeSort(int a[],int,alen,int b[],int blen,int* temp){int …...

编程日记 2024/3/19 16:34:43

力扣刷题(DAY09-DAY11)

Day09 0958. 二叉树的完全性检验 知识点&#xff1a;完全二叉树&#xff1a;在一棵完全二叉树中&#xff0c;除了最后一层外&#xff0c;所有层都被完全填满&#xff0c;并且最后一层中的所有节点都尽可能靠左。最后一层&#xff08;第 h 层&#xff09;中可以包含 1 到 个节点…...

编程日记 2024/3/19 16:29:38

IPC之管道

什么是管道&#xff1f; 管道的本质是操作系统在内核中创建出的一块缓冲区&#xff0c;也就是内存 管道的应用 $ ps aux | grep xxx ps aux 的标准输出写到管道&#xff0c;grep 从管道这块内存中读取数据来作为它的一个标准输入&#xff0c;而且 ps 和 grep 之间是兄弟关系&a…...

编程日记 2024/3/19 16:28:36

VUE-组件间通信（二）$emit

$emit 1、单向绑定 子组件向父组件传值 2、使用示例 父组件 <template><div id"app"><!-- 监听自定义触发事件 emitInvokeEvents--><SonDemo emitInvokeEvents"fatherFunction"></SonDemo></div> </template&…...

编程日记 2024/3/19 16:26:33

java 程序连接 redis 集群 的时候报错 MUTLI is currently not supported in cluster mode

找了半天找不到,为什么国内文章环境是真的差&#xff0c; redis 集群不支持事务&#xff0c;而你的方法上面估计使用了 spring 的事务导致错误具体解决&#xff1a; Transactional(propagation Propagation.NOT_SUPPORTED)public <T> void removeMultiCacheMapValue…...

编程日记 2024/3/19 16:25:32

AVP-SLAM：自动泊车系统中的语义SLAM_

AVP-SLAM&#xff1a;自动泊车系统中的语义SLAM 附赠最强自动驾驶学习资料&#xff1a;直达链接 ●论文摘要 在自动代客泊车系统中车辆在狭窄且拥挤且没有GPS信号的停车场中进行导航&#xff0c;具备准确的定位能力是至关重要的。传统的基于视觉的方法由于在停车场中由于缺少…...

编程日记 2024/3/19 16:20:26

PHP反序列化--pop链

目录 一、了解pop链 1、pop链&#xff1a; 2、pop链触发规则&#xff1a; &#xff08;1&#xff09;通过普通函数触发&#xff1a; &#xff08;2&#xff09;通过魔术方法触发&#xff1a; 3、pop链魔术方法例题&#xff1a; 一、了解pop链 1、pop链&#xff1a; pop链…...

编程日记 2024/3/19 16:19:25

单片机中的几种周期（振动/时钟，状态，机械，指令周期）表示的含义（51为例）

几种周期含义及个人理解描述 参考&#xff1a;短文&#xff0c;参考&#xff0c;百度 个人理解简述&#xff1a;对于几个周期性来说&#xff0c;可以认为是小单位的时间组合成了长时间。就像把一个数据赋值&#xff0c;这个是简单的一个机械周期能完成的动作&#xff0c;但需要…...

编程日记 2024/3/19 16:16:21

Spring Boot+Vue前后端分离项目如何部署到服务器

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…...

编程日记 2024/3/19 16:11:16

【学习总结】Ubuntu中vscode用ROS插件调试C++程序

1、教程 参考博客&#xff1a; 【ROS】 在VScode中 ROS Debug 配置方法非常详细版 关于launch文件的配置&#xff1a; launch.json {"version": "0.2.0","configurations": [{"name": "ROS: Launch","request"…...

编程日记 2024/3/19 16:10:15

html--蝴蝶

<!DOCTYPE html> <html lang"en" > <head> <meta charset"UTF-8"> <title>蝴蝶飞舞</title> <link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.cs…...

编程日记 2024/3/19 16:08:11

线程的 sleep()方法和 yield()方法有什么区别？为什么 Thread 类的 sleep()和 yield ()方法是静态的？

该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点 线程的 sleep()方法和 yield()方法有什么区别 sleep()方法： sleep()方法使当前线程进入休眠状态，即暂停执行一段时间。它是静态方法，属于Thread类，调用…...

编程日记 2024/3/19 16:03:05

Java进阶 Maven基础

资料格式 配置文件 com.itheima Java代码 Statement stat con.createStatement(); 示例 com.itheima 命令 mvn test - Maven简介 传统项目管理状态分析 Maven 是什么 Maven的本质是一个项目管理工具&#xff0c;将项目开发过程抽象成一个项目对象模型&#xff08;POM&…...

编程日记 2024/3/19 16:02:04

Spring Boot(六十八)：SpringBoot 整合Apache tika 实现文档内容解析

1 Apache Tika 介绍 Apache Tika 是一个开源的内容检测和分析框架，由Apache软件基金会开发和维护的顶级项目。它可以从各种格式的文件中提取元数据和文本内容。Tika非常适合处理全文搜索、内容分析、翻译、内容提取等需要大量处理和分析文档内容的任务。Apache Tika提供了多种…...

编程日记 2024/3/19 16:01:02

jQuery+CSS3自动轮播焦点图特效源码

jQueryCSS3自动轮播焦点图特效源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 jQueryCSS3自动轮播焦点图特效源码...

编程日记 2024/3/19 15:56:56

面试经典150题(114-118)

leetcode 150道题 计划花两个月时候刷完之未完成后转&#xff0c;今天完成了5道(114-118)150 gap 了一周&#xff0c;以后就不记录时间了。。 114.(70. 爬楼梯) 题目描述&#xff1a; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不…...

编程日记 2024/3/19 15:54:54

HTML表单标签详解：如何用HTML标签打造互动网页？

在互联网的世界中&#xff0c;表单是用户与网站进行互动的重要桥梁。无论是注册新账号、提交反馈、还是在线购物&#xff0c;表单都扮演着至关重要的角色。在网页中&#xff0c;我们需要跟用户进行交互&#xff0c;收集用户资料&#xff0c;此时就需要用到表单标签。 HTML提供…...

编程日记 2024/3/19 15:51:50

Web 服务器-Tomcat

文章目录 Web服务器一、Tomcat简介二、基本使用三、在IDEA中创建Maven Web项目四、在IDEA中使用Tomcat Web服务器 一、Tomcat简介 二、基本使用 三、在IDEA中创建Maven Web项目 四、在IDEA中使用Tomcat...

编程日记 2024/3/19 15:49:47

（德迅零域）微隔离安全平台是什么，有什么作用？

网络隔离并不是新的概念&#xff0c;而微隔离技术&#xff08;Micro-Segmentation&#xff09;是VMware在应对虚拟化隔离技术时提出来的&#xff0c;但真正让微隔离备受大家关注是从2016年起连续3年微隔离技术都进入Gartner年度安全技术榜单开始。在2016年的Gartner安全与风险管…...

编程日记 2024/3/19 15:48:46

这些问题，每年软考报名时都有人问

​​软考报名实行网上在线报名的方式&#xff0c;每次在报名期间&#xff0c;考生都会遇到各种各样的问题&#xff0c;本文挑选了一些大家问的比较多的问题进行了解答&#xff0c;希望对大家有所帮助。 1、软考报名资格审核要审核多久&#xff1f; 一般来说审核时间在3个工作…...

编程日记 2024/3/19 15:47:45

JavaScript爬虫进阶攻略：从网页采集到数据可视化

在当今数字化世界中&#xff0c;数据是至关重要的资产&#xff0c;而网页则是一个巨大的数据源。JavaScript作为一种强大的前端编程语言&#xff0c;不仅能够为网页增添交互性&#xff0c;还可以用于网页爬取和数据处理。本文将带你深入探索JavaScript爬虫技术的进阶应用&#…...

编程日记 2024/3/19 15:44:41

MATLAB教程

目录 前言一、MATLAB基本操作1.1 界面简介1.2 搜索路径1.3 交互式命令操作1.4 帮助系统 二、MATLAB语言基础2.1 数据类型2.2 MATLAB运算2.2.1 算数运算2.2.2 关系运算2.2.3 逻辑运算 2.3 常用内部函数2.4 结构数据与单元数据 三、MATLAB程序设计3.1 M文件3.2 函数文件3.3 程序控…...

编程日记 2024/3/19 15:43:40

爱恩斯坦棋小游戏使用C语言+ege/easyx实现

目录 1、游戏介绍和规则 2、需要用到的头文件 3、这里我也配上一个ege和easyx的下载链接吧&#xff0c;应该下一个就可以 4、运行结果部分展示 5、需要用到的图片要放在代码同一文件夹下 6、代码地址&#xff08;里面有需要用到的图片&#xff09; 1、游戏介绍和规则 规则如…...

编程日记 2024/3/19 15:42:39

png格式怎么转成gif？一个小窍门快速转换

如何将png转换成gif动画&#xff1f;作为新媒体工作者&#xff0c;在日常办公中少不了使用到gif格式图片。那么&#xff0c;当我们遇到需要将png格式转换成gif格式的时候要怎么操作呢&#xff1f;很简单&#xff0c;使用gif动画图片&#xff08;https://www.gif.cn/&#xff09…...

编程日记 2024/3/19 15:41:37

mysql笔记：20. 什么是数据库六大范式

文章目录 简介什么是范式最常用的范式 第一范式 - 1NF第二范式 - 2NF第三范式 - 3NF第四范式 - 4NF第五范式 - 5NF巴斯-科德范式 - BCNF总结 简介 什么是范式 范式&#xff08;Normal Form&#xff0c;简称NF&#xff09;是数据库设计时遵循的一种规范&#xff0c;不同的规范…...

编程日记 2024/3/19 15:40:36

4.GetMapping和PostMapping 和 @RequestMapping的区别。RequestBody 和ResponseBody的区别

1.GetMapping和PostMapping 和 RequestMapping的区别 //GetMapping只能通过get请求。 public class Hello1{GetMapping("hello1")public String h1(){return "1";}//PostMapping只能通过post请求&#xff0c;需要输入参数。 public class Hello2{PostMapp…...

编程日记 2024/3/19 15:38:33

综合门户类网站有哪些/现代网络营销的方式

算法支持在指定起始颜色、结束颜色和渐变色区域数量的情况下算出渐变色列表。 下面直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <…...

编程日记 2025/2/1 2:31:17

我公司是做网站开发的怎么纳税/seo收录排名

在上篇随笔中对于客户实例传递的xml实现中&#xff0c;手动定义了xml的数据格式&#xff0c;如果现在对产品实例进行传递&#xff0c;那么还要手动对产品实例进行xml进行数据格式化。现在有一套为数据传递定义的协议&#xff0c;那就是soap。其实html也是一种数据存储格式&…...

编程日记 2025/2/1 0:29:28

微信手机版网站建设/少儿培训

6月23日&#xff0c;由中国电子技术标准化研究所&#xff08;以下简称CESI&#xff09;互联网开放实验室&#xff08;以下简称ISOL&#xff09;研究并制定的《SOA标准体系V1.0》&#xff08;中英文版 本&#xff09;正式发布。该白皮书将通过其官方网站www.soa-china.org.cn及唯…...

编程日记 2025/1/31 22:30:27

最牛的html5网站建设/电脑系统优化工具

作业代码地址&#xff1a;点我 1.分析数据 训练集 列是时间&#xff0c;一共24列&#xff0c;是每天的24小时 行是检测的特征值&#xff0c;每次会检测18个特征值&#xff0c;故每18行是一天的数据 一个月20天&#xff0c;一年12个月&#xff0c;所以一共18*20*12行的数据 …...

编程日记 2025/1/31 22:27:18

网站建设服务公司/百度网盟推广

1&#xff0c;查看版本更新日志 TortoiseSVN --- Show Log 看查看什么时间创建和使用...

编程日记 2025/1/31 21:27:21

做新媒体每天必看的网站/百度网站推广电话

利用JavaScript &#xff0c;动态向表格中添加数据&#xff0c;其实方法很简单的&#xff0c;下面给大家分享下实现方法1. 首先先写出表格的表头和主干部分编号姓名职位操作2. 接下来就是网表格里面添加数据&#xff0c;这里用的是原生javascript//模拟一段JSON数据&#xff0c…...

编程日记 2025/1/31 20:40:12