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文件 #内容如…

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…

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

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

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

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

续上篇 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 } …

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

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

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

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

探索编程迷宫:选择你的职业赛道

在现代科技的浪潮中&#xff0c;程序员的职业赛道就像是一座迷宫&#xff0c;充满着前端的美丽花园&#xff0c;后端的黑暗洞穴&#xff0c;以及数据科学的神秘密室。这个迷宫中&#xff0c;每一条通道都充满了挑战和机遇&#xff0c;而每一个行走其中的人都在寻找着属于自己的…

LM studio使用gemmar聊天小试

通过LM studio可以方便的使用各种模型&#xff0c;使用LM提供的chat界面或者是使用python代码。 试试代码 在windows下使用python简单一试&#xff0c;例子直接复制LM界面上的代码&#xff1a; 用pip安装 openai包在LM界面 Start Server 需要安装 openai包。 本地电脑是I7…

[c++]内存管理

1. C/C内存分布 我们先来看下面的一段代码和相关问题 int globalVar 1; static int staticGlobalVar 1; void Test() { static int staticVar 1; int localVar 1; int num1[10] { 1, 2, 3, 4 }; char char2[] "abcd"; const char* pChar3 "abcd"; …

分布式事务的解决方案--Seata架构

一、Seata的XA模式 二、AT模式原理 三、TCC模式原理 四、MQ分布式事务 异步&#xff0c;非实时&#xff0c;实现最终的一致性。 四、分布式事务的解决方案

Stable Diffusion WebUI 生成参数:宽度/高度/生成批次/每批数量/提示词相关性/随机种子

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 本文将继续了解 Stable Diffusion WebUI 的生成参数&#xff0c;主要内容有&#xff1a;宽度、高度、生成批次、每批数量、提示词相关性、随机种子。希望能对你…

Visual Studio 2022下配置 OpenMP 多线程编程环境与运行

目录 一创建项目时选择“创建新项目 -> 空项目 -> 下一步 -> 创建” 二右键“源文件 -> 添加 -> 新建项 -> 添加” 三配置 1. 测试程序&#xff1a; 最开始的时候错误很多&#xff1a; 2.将 “ include "stdafx.h" ” 删掉&#xff0c;添加 “…

电影院售票网站|基于SSM框架+ Mysql+Java+ B/S结构的电影院售票网站设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…

操作系统知识-存储管理+文件管理管理-嵌入式系统设计师备考笔记

0、前言 本专栏为个人备考软考嵌入式系统设计师的复习笔记&#xff0c;未经本人许可&#xff0c;请勿转载&#xff0c;如发现本笔记内容的错误还望各位不吝赐教&#xff08;笔记内容可能有误怕产生错误引导&#xff09;。 本章的主要内容见下图&#xff1a; 1、存储管理&#…