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

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

文章目录


一、作品介绍

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

二、作品演示


三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<!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.想要获取本文源码,点击前往吧

相关推荐
Simon_He4 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊39 分钟前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游1 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子1 小时前
智能前端实践之 shot-word demo
前端
归于尽1 小时前
智能前端小魔术,让图片开口说单词
前端·react.js
用户9873824581011 小时前
vite 插件
前端