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

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

news 2026/2/9 22:35:08

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2026/1/28 10:58:50

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/2/7 17:35:15

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2026/2/7 1:51:12

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/10/20 9:03:01

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2026/1/17 14:57:41