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

news2025/2/27 17:29:03

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.coloradmin.cn/o/1528454.html

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

相关文章

四.流程控制(顺序,分支,循环,嵌套)

c刚刚转过来的记得写在public static void main&#xff08;String[] args&#xff09;的花括号里 一.顺序结构 二.分支结构 if &#xff0c;switch 1.if (条件判断&#xff09; 2.if else 3.if else if else if ... else(它是一个一个否定来一个个执行判断的 4.s…

torchvision pytorch预训练模型目标检测使用

参考&#xff1a; https://pytorch.org/vision/0.13/models.html https://blog.csdn.net/weixin_42357472/article/details/131747022 有分类、检测、分割相关预训练模型 1、目标检测 https://pytorch.org/vision/0.13/models.html#object-detection-instance-segmentation-…

Springboot笔记-03

1.properties配置文件 #配制oerson的值 person.lastname张三 person.age12 person.birth2017/12/12 person.bossfalse person.dog.namedag person.dog.age15 person.maps.k1v1 person.maps.k212 person.listsa,b,c运行结果乱码 因为idea默认是utf-8编码而properties是ascall编…

禅道二次开发——创建需求

获取Token 官网参考 https://www.zentao.net/book/api/setting-369.html post http://xxx:8442/zentaopms/www/api.php/v1/tokensbody {"account": "xxx", "password": "xxx"}结果如下图 创建需求 官网参考 https://www.zentao.…

一文掌握:Gitlab的完整使用手册

&#x1f413;序言 GitLab是一个强大的版本控制和协作平台&#xff0c;用于管理代码仓库、项目、问题跟踪、持续集成和部署等软件开发任务。可以做一些创建项目、添加成员、管理代码、问题跟踪和持续集成等方面功能。 &#x1f413;创建Gitlab账户 如果你还没有GitLab账户&…

如何正确理解和区分承诺型OKR与愿景型OKR?

在目标管理的实践中&#xff0c;OKR&#xff08;Objectives and Key Results&#xff09;工作法作为一种高效的目标设定与跟踪工具&#xff0c;得到了广泛的应用。然而&#xff0c;OKR并非一种固定的模式&#xff0c;它可以根据企业的战略需求和文化背景进行灵活调整。其中&…

npm i安装依赖报错,但是cnpm i 却安装成功

问题描述&#xff1a;在a项目中npm i 安装依赖时发生以上报错&#xff0c;但是cnpm i 却成功&#xff0c;而且在其他项目中npm i 安装其他项目依赖也能成功.... 解决办法&#xff1a;删除项目中package-lock.json文件后再npm i 即可

Linux系统——数据库Mysql

目录 一、数据库原理 1.数据的时代 2.数据的分类 3.数据库的发展史 3.1文件管理系统的缺点 3.2数据库系统发展阶段 4. 数据库的基本概念 4.1数据 4.2表 4.3数据库 5.DBMS——数据库管理系统 5.1数据库管理系统的优点 5.2数据库管理系统的基本功能 5.3数据库管理系…

ruoyi-nbcio-plus基于vue3的flowable定时边界事件代码升级修改(二)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a;…

用 二层口 实现三层口 IP 通信的一个实现方法

我们一般用 undo portswitch 来将二层口转为三层口&#xff0c;但如果设备不支持的话&#xff0c;那么。。。 一、拓朴图&#xff1a; 二、实现方法&#xff1a; 起一个 vlan x&#xff0c;配置 vlanif地址&#xff0c;然后二层口划分到 vlan x 下&#xff0c;对端做同样的配置…

【Web】浅聊Hessian异常toString姿势学习复现

目录 前言 利用关键 调用分析 如何控制第一个字节 EXP 前言 Hessian CVE-2021-43297&#xff0c;本质是字符串和对象拼接导致隐式触发了该对象的 toString 方法&#xff0c;触发toString方法便可生万物&#xff0c;而后打法无穷也&#xff01; 这个CVE针对的是Hessian2I…

Re62:读论文 GPT-2 Language Models are Unsupervised Multitask Learners

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文全名&#xff1a;Language Models are Unsupervised Multitask Learners 论文下载地址&#xff1a;https://cdn.openai.com/better-language-models/language_models_are_unsupervised_multitask_learner…

解锁编程潜能:ChatGPT如何革新软件开发

目录 一、背景 二、功能描述 三、总结 一、背景 在这个飞速发展的数字时代&#xff0c;软件开发的效率和质量成了衡量一个开发者能力的重要标准。随着人工智能技术的不断进步&#xff0c;越来越多的开发者开始寻找能够提升工作效率的新方法。我就是其中之一&#xff0c;最近…

【RabbitMQ | 第五篇】RabbitMQ实现消息的可靠抵达

文章目录 5.RabbitMQ实现消息的可靠抵达5.1引入背景5.2确认机制分类5.2.1ConfirmCallback (确认模式&#xff1a;消息生产者确认)&#xff08;1&#xff09;开启确认配置&#xff08;2&#xff09;实现ConfirmCallback回调接口 5.2.2ReturnCallback&#xff08;回退模式&#x…

vue3.x 使用jsplumb进行多列拖拽连线

前言&#xff1a; 最近很多小伙伴问到使用jsplumb进行多列拖拽连线怎么实现&#xff1f; 下面介绍vue3.x 使用jsplumb进行多列拖拽连线示例&#xff0c;以三列举例&#xff1a; 安装 npm install --save jsplumb引入 <script lang"ts" setup>import {ref, r…

#Linux(VIM编辑器使用)

&#xff08;一&#xff09;发行版&#xff1a;Ubuntu16.04.7 &#xff08;二&#xff09;记录&#xff1a; &#xff08;1&#xff09;打开一个文本文件输入vi文件名&#xff08;如果存在该文件则直接打开&#xff0c;如果没有则创建一个文件&#xff09; &#xff08;2&…

【早鸟优惠|高录用|EI稳定检索】2024年虚拟现实、图像和信号处理国际学术会议(ICVISP 2024)诚邀投稿/参会!

【早鸟优惠|高录用|EI稳定检索】 2024年虚拟现实、图像和信号处理国际学术会议&#xff08;ICVISP 2024&#xff09;诚邀投稿/参会&#xff01; # 早鸟优惠 # 先投稿先送审 # #投稿免费参会、口头汇报及海报展示# 2024年虚拟现实、图像和信号处理国际学术会议&#xff08;I…

递推与递归

92. 递归实现指数型枚举 - AcWing题库 #include <bits/stdc.h> using namespace std; const int N17; int n; bool vis[N];//记录某一个数是否出现过 void dfs(int dep){// if(vis[dep])continue;//没有这一句 因为一定不会有已经选过的数if(depn1){//对于每个数都做完了…

C++ QT串口通信(2)-串口通信入门实例

本文通过实例讲解C++ QT串口通信。 入门实例设计一个串口助手,能够很好的涵盖串口要点的使用。 成品图 如下; 实现代码如下: 首先在pro文件中添加串口模块 UI界面如下 <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0&q…

漏洞挖掘 | 记一个奇怪的万能密码

前言 打的站点打多了&#xff0c;什么奇怪的问题都会发生 打点 开局一个登录框 用户枚举到账号爆破 测了一下&#xff0c;没发现admin的弱口令&#xff0c;但是发现存在用户枚举漏洞&#xff0c;因此准备跑一下账号 输入密码为123456 进行账号爆破 成功爆破出账号 是的…