北京城市介绍小页面代码

和自己对话lll

已于 2023-12-05 14:28:54 修改

阅读量495

点赞数 8

分类专栏： HTML5 文章标签： html5

于 2023-12-01 16:51:17 首次发布

本文链接：https://blog.csdn.net/Ch123456ljjj/article/details/134738607

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

new_file.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="new_file.css" rel="stylesheet" />
	</head>
	<body>
		<div id="wrapper">
			<header><h1>首都-北京</h1></header>
			<nav>
				<ul>
					<li><a href="1北京视频.mp4">北京视频</a></li>
					<li><a href="北京欢迎你.mp3">北京欢迎你</a></li>
					<li><a href="北京景点图片.html">景点图片</a></li>
				</ul>
			</nav>
			<div id="content">
				<div id="top1"><a href="#top">返回顶部</a></div>
				<img id="floatright" src="1北京.jpg" />
				<h1 align="center">北京</h1>
				<p>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北京（Beijing），简称“京”，古称燕京、北平，是中华人民共和国
					的首都、直辖市、国家中心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新
					中心，截至2020年，全市下辖16个区，总面积16410.54平方千米。2021年末，北京市常住人口2188.6万人，比上年
					末减少0.4万人。2021年，北京市全年实现地区生产总值40269.6亿元，按不变价格计算，比上年增长8.5％。全市人
					均地区生产总值为18.4万元。
				</p>
				<h2>地理位置</h2>
				<p>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北京地势西北高、东南低。西部、北部和东北部三面环山，东南部是一片缓缓
					向渤海倾斜的平原。境内流经的主要河流有：永定河、潮白河、北运河、拒马河等，多由西北部山地发源，穿过崇山峻岭，
					向东南蜿蜒流经平原地区，最后分别汇入渤海。北京的气候为暖温带半湿润半干旱季风气候，夏季高温多雨，冬季寒冷干燥，
					春、秋短促。
				</p>
				<h2>历史背景</h2>
				<p>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北京，元代称大都；明初朱元璋建都南京(原称应天府)，则称此地为北平。后来明成
					祖朱棣发动“靖难之役”，攻占南京，废除建文帝，夺得帝位，于永乐元年(1403)正月，决定改北平为北京，并建设都城，城成迁都。
					永乐四年(1406)正式下诏，宣布次年开始营建北京。永乐十八年(1420)都城建设基本完成。翌年，明成祖在北京称帝。
				</p>
				<h2>北京建筑</h2>
				<P>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北京标志性建筑有：北京故宫、国家体育场（鸟巢）、中央广播电视塔、中央电视台
					总部大楼、北京八达岭长城、天安门、天坛公园、北京国家游泳中心、北京中信大厦、中国国家大剧院、首都博物馆、北京人民大会
					堂、北京奥林匹克塔等。
				</P>
				<h2>景点</h2>
				<p>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北京出名的旅游景点有：故宫博物馆，颐和园，王府井，恭王府 ，八达岭长城，圆明园
					遗址公园，明十三陵景区，北京海洋馆，中华民族园等。
				</p>
				<h2>美食</h2>
				<p>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北京特色美食有北京烤鸭、卤煮火烧、驴打滚、豆汁、焦圈、爆肚、炸酱面等。烤鸭是
					具有世界声誉的北京著名菜式，起源于中国南北朝时期，《食珍录》中已记有炙鸭，在当时是宫廷食品。用料为优质肉食鸭北京鸭，
					果木炭火烤制，色泽红润，肉质肥而不腻，外脆里嫩。
				</p>
			</div>
		</div>
	</body>
</html>

new_file.css

body{
	background-color: #00005d;
	font-family: verdana,arial,"ms sans serif";
}
#wrapper{
	margin: 0px auto;
	width: 80%;
	min-width: 600px;
	background-color: #b3c7e6;
	color: #000066;
}
header{
	background-color: #869dc7;
	color: #00005d;
	font-size: 150%;
	padding: 10px 10px 10px 175px;
	height: 130px;
	background-repeat: no-repeat;
	background-image: url(1北京..jpg);
}
nav{
	float: right;
	width: 150px;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#content{
	background-color: #ffffff;
	color: #000000;
	padding: 10px 20px;
	overflow: auto;
}
#footer{
	font-size: 70%;
	text-align: center;
	padding: 10px;
	background-color: #869DC7;
	clear: both;
}
h2{
	color: #869DC7;
	font-family: arial,sans-serif;

}
#floatright{
	float: right;
	margin: 10px;
}
nav ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
nav a{
	text-decoration: none;
	padding: 20px;
	display: block;
	background-color: #B3C7E6;
	border-bottom: 1px solid #FFFFFF;
}
nav a:link{color: #FFFFFF;}
nav a:visited{color: #eaeaea;}
nav a:hover{color: #EAEAEA;background-color: #869DC7;}
#floatright{
	float: right;
	margin: 10px;
	padding: 5px;
	border: 1px solid #ccc;
	box-shadow: 5px 5px 5px #828282;
	transform: rotate(3deg);
}
top1{
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 80px;
	height: 40px;
	border-color: #00FFFF;
	text-align: center;
	border: 3px solid #1395BA;
}
#top1{
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 80px;
	height: 40px;
	border-radius: #00FFFF;
	text-align: center;
	border: 3px solid #1395BA;
}
#top1 a{
	text-decoration: none;
	color: #D2691E;
	line-height: 40px;
	display: block;
}
#top1 a:hover{
	background-color: #7FFFD4;
	border-radius: 8px;
}

北京景点图片.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#gallery{position: relative;}
			#gallery ul{width: 250px;list-style-type: none;}
			#gallery li{display: inline;float: left;padding: 10px;}
			#gallery img{border-style: none;}
			#gallery a{text-decoration: none;color: #333;font-style: italic;}
			#gallery span{display: none;position: absolute;transition: opacity 3s ease-in-out;}
			#gallery a:hover span{display: block;position: absolute;top: 10px;left: 300px;text-align: center;opacity: 1;}
		</style>
	</head>
	<body>
		<h2>欢迎欣赏北京景点</h2>
		<div id="gallery">
			<ul>
				<li>
					<a href="img/1天安门.jpg"><img src="1天安门.jpg" alt="天安门" width="100" height="75"/>
						<span><img src="1天安门.jpg" alt="天安门" width="600" height="400"/><br />天安门</span>
					</a>
				</li>
				<li>
					<a href="img/1北京故宫.jpg"><img src="1北京故宫.jpg" alt="北京故宫" width="100" height="75"/>
						<span><img src="1北京故宫.jpg" alt="北京故宫" width="600" height="400"/><br />北京故宫</span>
					</a>
				</li>
				<li>
					<a href="img/1北京天坛.jpg"><img src="1北京天坛.jpg" alt="北京天坛" width="100" height="75"/>
						<span><img src="1北京天坛.jpg" alt="北京天坛" width="600" height="400"/><br />北京天坛</span>
					</a>
				</li>
				<li>
					<a href="img/1颐和园.jpg"><img src="1颐和园.jpg" alt="颐和园" width="100" height="75"/>
						<span><img src="1颐和园.jpg" alt="颐和园" width="600" height="400"/><br />颐和园</span>
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>

运行：