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

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.想要获取本文源码,点击前往吧

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

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

相关文章

BUUCTF-Ezsql1

1.打开靶机 打开第一个链接 2.万能密码 使用万能密码&#xff1a;a or 1 # 密码为随意 第二个用kali打开 3.ssh连接靶机 ssh ctf284490d0-7600-4c65-9160-5ced02f45633.node5.buuoj.cn -p 28191 由题可知密码为123456 4.找到并修改index.php文件 找到index.php文件 #内容如…

spring启动自动执行方法

原文链接: Spring Boot 启动时&#xff0c;让方法自动执行的 4 种方法&#xff01;-阿里云开发者社区 (aliyun.com) -------------------------------------------------------------------------------------------------------------------------------- 在springBoot中我…

Springboot整合支付宝沙箱支付

2.配置说明 要记住这几个重要的配置 appId 这个是appIdprivateKey 商户私钥publicKey 支付宝公钥, 即对应APPID下的支付宝公钥notifyUrl 支付成功后异步回调地址(注意是必须是公网地址)returnUrl #支付后回调地址signType 签名类型 一般写 RSA2charset utf-8format json #网关…

数据结构奇妙旅程之红黑树

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …

印染厂区污水怎么处理

印染厂污水处理是一项十分重要且紧迫的环境问题。随着工业化的快速发展&#xff0c;印染厂所排放的大量废水不仅对环境造成了严重影响&#xff0c;也对人们的生活和健康带来了潜在的威胁。因此&#xff0c;寻找有效的印染厂污水处理方法显得尤为重要。 针对印染厂污水的特点&am…

通过Arthas修改并热发布代码

通过Arthas修改并热发布代码 主要使用jad、mc、retransform三个命令&#xff1a; jad --source-only com.example.demo.arthas.user.UserController > /tmp/UserController.javamc /tmp/UserController.java -d /tmpretransform /tmp/com/example/demo/arthas/user/UserCo…

tp8 mpdf 导出pdf

1. 安装mpdf composer require mpdf/mpdf 2. 然后 使用 use mpdf\Mpdf; 或者 require_once __DIR__ . /vendor/autoload.php; 官方文档 mPDF – mPDF 手册 文档里有很多东西 可以自己去研究 3. 编写代码 下载 (支持中文) $mpdf new Mpdf([mode > utf-8,"autoS…

【技术干货】MediaCrawler:一站式社交平台数据抓取利器,带你玩转小红书、抖音、快手、B站和微博数据分析

一、引言 大数据时代&#xff0c;社交媒体平台上的海量信息为我们提供了丰富洞察市场、研究用户行为的机会。然而&#xff0c;如何高效便捷地收集和整理这些分散在各平台的数据呢&#xff1f;今天&#xff0c;我们将为您揭秘一款专为小红书、抖音、快手、B站和微博打造的强大数…

用python实现视频异常检测

视频异常检测是一个复杂的任务&#xff0c;它涉及到对视频帧的分析和比较&#xff0c;以检测与正常模式不符的异常行为或事件。下面是一个基本的步骤指南&#xff0c;以及如何使用Python实现视频异常检测&#xff1a; 步骤指南 视频帧提取&#xff1a;首先&#xff0c;你需要…

实在智能与中国信通院联合牵头智能体(Agent)标准编制

近日&#xff0c;中国信息通信研究院&#xff08;以下简称“信通院”&#xff09;启动国内首个《智能体&#xff08;Agent&#xff09;技术要求与评估方法》系列标准编制&#xff0c;实在智能作为参编单位并牵头编制技术能力部分&#xff0c;深度参与该标准对智能体技术要求和评…

阿里云ecs服务器配置反向代理上传图片

本文所有软件地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/12OSFilS-HNsHeXTOM47iaA 提取码&#xff1a;dqph 为什么要使用阿里云服务器&#xff1f; 项目想让别人通过外网进行访问就需要部署到我们的服务器当中 1.国内知名的服务器介绍 国内比较知名的一些…

机器学习复习(9)——自定义dataset

目录 第一种dataset(文件夹名即为标签) 用于将格式&#xff08;1&#xff09;转换为格式&#xff08;2&#xff09; 第二种dataset(标签在labels文件夹下的对应的txt文件里面) 第一种dataset(文件夹名即为标签) 数据组织格式&#xff08;1&#xff09; --data ----train …

续上篇 qiankun 微前端配置

上篇文章地址&#xff1a;微前端框架 qiankun 配置使用【基于 vue/react脚手架创建项目 】-CSDN博客 主应用&#xff1a; src/main.js 配置&#xff1a; import Vue from vue import App from ./App.vue import router from ./router import { registerMicroApps, start } …

【小程序开发】蓝牙设备API——单点蓝牙应用程序编程接口整理(二)

ty.device.getBLEDeviceRSSI 获取 BLE 外设的信号 需引入DeviceKit&#xff0c;且在>1.2.6版本才可使用 参数 Object object 属性类型默认值必填说明deviceIdstring是设备模型 deviceId 设备 Idcompletefunction否接口调用结束的回调函数&#xff08;调用成功、失败都会执…

jar读取目录配置、打包jar后无法获取目录下的配置

jar读取目录配置、打包jar后无法获取目录下的配置 jar读取目录配置、打包jar后无法获取目录下的配置。java打成jar包后获取不到配置文件路径。解决项目打成jar包上线无法读取配置文件。打包jar后无法读取resource下的配置文件 场景 需要读取 src/main/resources/mapper下的所…

大机中的汇编语言该怎么学

提起程序开发&#xff0c;就不得不说合久必分&#xff0c;分久必合&#xff0c;反成各个程序段之间都有这个关系&#xff0c;而多个程序又组成一个功能组&#xff0c;可以完成一项业务&#xff0c;ASM比JCL难很多&#xff0c;因为它涉及到地址和业务。 一 ASM 的难度如何 比方…

UGUI界面性能优化3-合理规划界面层级结构

在Unity中&#xff0c;UGUI&#xff08;Unity GUI&#xff09;是一种用于创建用户界面的工具。合理规划界面层级结构对于开发一个可维护和易于使用的界面非常重要。以下是一种合理的UGUI界面层级结构规划方式&#xff1a; Canvas&#xff08;画布&#xff09;&#xff1a;Canva…

【python】flask框架的生命周期,多种查询参数的获取方式

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

python图形化编程pygame游戏模块

文章目录&#xff1a; 一&#xff1a;语句使用模板 基本框架 1.安装Pygame 2.创建一个主窗口display 3.图像渲染与动画 4.鼠标事件mouse 5.声音和音乐sound 6.设置屏幕背景颜色fill 7.添加文字font 8.绘制图形draw 8.1 绘制多边形polygon 8.2 绘制直线line 8.3 绘…