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>