您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

HTML5+CSS3期末大作业——城市简介

页面展示:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
首页源码:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="1.css" type="text/css">
	<link rel="shortcut icon" href="images/37.png" /> 
	<title>我所在的城市--武汉</title>
</head>
<body>
	<div id="box">
		<div class="img">
		</div>
		<br><br><br>
		<h1>武汉<span class="h_1">Wuhan</span></h1>
		<h2 class="h_2"><span class="h_1">东方芝加哥</span>·Oriental Chicago</h2>
		<nav>
			<ul>
				<li><a href="1.html" target="_blank"><img src="images/12.jpg" alt=""><br><div class="opword">城市与历史</div></a></li>
				<li><a href="2.html" target="_blank"><img src="images/9.jpg" alt=""><br><div class="opword">美食与生活</div></a></li>
				<li><a href="3.html" target="_blank"><img src="images/13.jpg" alt=""><br><div class="opword">旅行与建筑</div></a></li>
			</ul>
			<ul class="ul2">
				<li><a href="#"><img src="images/18.jpg" alt=""><br><div class="opword">自然与环境</div></a></li>
				<li><a href="#"><img src="images/23.jpg" alt=""><br><div class="opword">人文与艺术</div></a></li>
				<li><a href="#"><img src="images/21.jpg" alt=""><br><div class="opword">品牌与特产</div></a></li>
			</ul>
		</nav>
		<br><br><br>
		<div id="main">
			<side>
				<div class="side1">
					<br><br><br>
					<div class="fra">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1</div><br>
					<h2>简介</h2><br>
					<p>武汉,简称“汉”,别称江城,是湖北省省会,中部六省唯一的副省级市,特大城市,中国中部地区的中心城市,全国重要的工业基地、科教基地和综合交通枢纽,联勤保障部队机关驻地。武汉地处江汉平原东部、长江中游,长江及其最大支流汉江在城中交汇,形成武汉三镇(武昌、汉口、汉阳)隔江鼎立的格局,市内江河纵横、湖港交织,水域面积占全市总面积四分之一。作为中国经济地理中心,武汉有“九省通衢”之称,是中国内陆最大的水陆空交通枢纽和长江中游航运中心,其高铁网辐射大半个中国,是华中地区唯一可直航全球五大洲的城市。</p>
				</div>
				<div><img src="images/6.jpg" alt="" width="480" height="500"></div>
				<div class="side1">
					<br><br><br>
					<div class="fra">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3</div><br>
					<h2>风景</h2><br>
					<p>武汉是首批中国优秀旅游城市,每年举办武汉国际旅游节。武汉自然风光独特,四季气候分明,拥有其他大都市罕有的166个湖泊和众多山峦。武汉的人文景观具有浓郁的楚文化特色。截至2018年末,武汉市有国家A级旅游景区46个,其中5A级3个,4A级19个,3A级24个。</p>
				</div>
				<div><img src="images/22.jpg" alt="" width="480" height="500"></div>
			</side>
			<main>
				<div><img src="images/4.jpg" alt="" width="720" height="500"></div>
				<div class="main1">
					<br><br><br>
					<div class="fra">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2</div><br>
					<h2>历史</h2><br>
					<p>武汉是国家历史文化名城,楚文化的重要发祥地,境内盘龙城遗址有3500年历史。春秋战国以来,武汉一直是中国南方的军事和商业重镇,明清时期成为“楚中第一繁盛处”、天下四聚之一。清末汉口开埠和洋务运动开启武汉现代化进程,使其成为近代中国重要的经济中心,被誉为“东方芝加哥”。武汉是辛亥革命首义之地,近代史上数度成为全国政治、军事、文化中心。武汉地区考古发现的历史可以上溯到距今8000年—6000年前的新石器时代早、中期,其考古发现有东湖放鹰台遗址的含有稻壳的红烧土、石斧、石锛以及鱼叉。市郊黄陂境内的张西湾古城遗址为4300年前古人类生活的重要遗存。盘龙城遗址是距今约3500年前的商朝方国宫城。春秋战国时期,武汉属楚国管辖。</p>
				</div>
				<div><img src="images/2.jpg" alt="" width="720" height="500"></div>
				<div class="main1">
					<br><br><br>
					<div class="fra">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4</div><br>
					<h2>饮食</h2><br>
					<p>武汉饮食,可谓一早一晚,过早和宵夜最为经典,有“早尝户部巷,夜吃吉庆街”之美谈。武汉菜秉承湖北菜系风格,汇聚东西南北精华,菜品丰富多样,又自成特色,是著名的“美食之都”。
					武汉特色小吃有热干面、三鲜豆皮、面窝、米粑、豆丝、欢喜坨、鸭脖子、武昌鱼、排骨藕汤、洪山菜薹炒腊肉、糍粑等。</p>
				</div>
			</main>			
		</div>
		<footer>
			<br><br><br>
				&nbsp;&nbsp;Copyright&copy;2021.12.14-2021.12.16&nbsp;&nbsp;
				<br>版权归本人所有&nbsp;学号:2031620214
		</footer>
	</div>
</body>
</html>
*{
	margin: 0;
}
body{
	background: url("images/37.jpg");
	backgroung-size:cover;
	background-repeat:round;
	background-attachment:fixed;

}
#box{
	width:1200px;
	height:2010px;
	margin: 0 auto;
}
.img{
	width: 1200px;
	height: 600px;
	background: url("images/26.jpg") no-repeat center center/1200px 600px;
}
.h_1{
	font-size: 1.3em;
	color: #FF6537;
}
h1,.h_2{
	color:#FCFCEE;
	text-shadow: 1px 1px 2px #666666;
}
nav{
	width: 1200px;
	height: 658px;
	margin-top:70px;
}
nav ul li{
	display: inline-block;
	margin-left: -6px;
	text-align: center;
	height: 330px;
}
nav ul{
	margin-left: -34.5px;
}
.ul2{
	margin-top: -94px;
}
/*设置列表对齐并拢*/
nav ul li img{
	width:401px;
	height: 330px;
}
nav ul li a{
	font-size: 2em;
	font-weight: 700;
	color:#fff;
	line-height: 2.8em;
	text-decoration: none;	
}
.opword{
	display: inline-block;
	background-color: rgba(205,202,202,0.5);
	width:401px;
	height: 100px;
	position: relative;
	top:-230px;
}
/*设置在图片上的透明背景加文字*/
nav ul li a:hover img{
	transform: scale(1,1.01);
}
nav ul li a:hover{
	font-size: 2.2em;
}
/*设置鼠标放上去的交互效果*/
#main{
	background-color: #fff;
	width:1200px;
	height: 2010px;
	margin-top: 100px;
}
/*side和main的盒子*/
side{
	width:40%;
	height: 1100px;
	float:left;	
}
.side1{
	height: 500px;
}
.fra{
	width:80px;
	height: 80px;
	border: 2px solid #5A5858;
	font-size: 2em;
	color:#FF6537;
	line-height: 3.8em;
	margin-left: 50px;
}
.side1 h2,.side1 p{
	color: #666666;
	margin-left: 10px;
	margin-right: 10px;
	text-indent: 2em;
}
side p{	
	line-height: 1.6em;
}
main p{
	line-height: 1.6em;
}
main{
	width: 60%;
	height: 1100px;
	float: right;	
}
.main1{
	height: 500px;	
}
.main1 h2,.main1 p{
	color: #666666;
	margin-left: 10px;
	margin-right: 10px;
	text-indent: 2em;
}
footer{
	width: 1200px;
	height: 130px;
	background-color: #191919;
	color: #5D5D5D;
	font-size: 1.2em;
	text-align: center;
}

页面2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="2.css" type="text/css">
	<link rel="shortcut icon" href="images/37.png" /> 
<title>美食与生活</title>
</head>
	
<body>
	<div id="all">
		<div class="img"><img src="images/28.jpg" alt="" width="1200" height="600"></div>
		<div class="box">
			<main>
				<br><br><br>
				<h1>唯有美食与爱,不可辜负</h1><br>
				<div class="img1"><img src="images/9.jpg" alt="" width="300" height="200"></div><br>
				<div class="box2">
					<h2>热干面</h2>
					<p>热干面(Hot dry noodles)是武汉最出名的小吃之一,有多种做法,其采用碱水面,并以食油、芝麻酱、色拉油、香油、红油,细香葱、大蒜子、萝卜丁、酸豆角、卤水汁、生抽、醋等为辅助材料。热干面色泽黄而油润,味道鲜美,由于热量高,也可以当作主食,营养早餐,补充人体所需的能量。热干面与山西刀削面、两广伊府面、四川担担面、郑州烩面并称为中国五大名面,是颇具特色的过早小吃。</p>
				</div>
				<br>			
				<div class="img1"><img src="images/27.jpg" alt="" width="300" height="200"></div><br>
				<div class="box2">
					<h2>三鲜豆皮</h2>
					<p>三鲜豆皮是武汉人“过早”的另一种主要食品,也是武汉民间的一种传统小吃。以前人们逢年过节时用绿豆、大米混合磨浆摊皮,包上糯米、肉丁,油煎后作为节日佳肴;后来成为寻常早点。豆皮制作过程中要求“皮薄、浆清、火功正”,这样煎出的豆皮外脆内软、油而不腻。三鲜豆皮是以馅中有鲜肉、鲜蛋、鲜虾而得名。</p>
				</div>				
				<br>
				<div class="img1"><img src="images/30.jpg" alt="" width="300" height="200"></div><br>
				<div class="box2">
					<h2>汤包</h2>
					<p>只要提起汤包,武汉人保准异口同声地指向四季美。四季美汤包皮薄肉醇、汤汁鲜香、油而不腻、闻之沁人、观之悦目、食之可口。寄寓“四季美好”之意的四季美汤包是在苏式汤包的传统做法基础上不断改进形成的,没有那么甜,而且在汤包的顶端开了一个小口,便于散热。最经典的吃法是先轻咬破表皮,慢慢吸尽里面的汤汁,然后再吃汤包的面皮和肉馅。</p>
				</div>
				<br>
				<div class="img1"><img src="images/32.jpg" alt="" width="300" height="200"></div><br>
				<div class="box2">
					<h2>烧麦</h2>
					<p>烧麦的制作方法是将肥膘猪肉、馒头、橘饼、花生米、冰糖、葡萄干等切成小丁,略微一炒,再用桂花、红绿丝、白糖调合成馅。面粉加水适量,放少许精盐揉和成面团,擀成一张张荷叶形薄皮,放入馅心,加少许麻油包成。烧麦或炸、或烤、或蒸,皆香甜可口,令人食之不厌。</p>
				</div>
			</main>
			<side>
				<div class="dyna">
					<br><br>
					<video src="images/33.mp4" controls width="290" height="210" autoplay loop muted></video>
					<h4>饮食动态</h4>
					<p>武汉人把吃早餐俗称为“过早”,历史上武汉码头文化兴盛,人们要抓紧时间赶到集市,形成在外“过早”的习惯,并延续至今。清晨,每家早餐铺前都能看到人车交织、拥挤嘈杂的景象,这是属于武汉的市井气息。没有官方或民间统计过,武汉的早餐究竟有多少种,但“吃一个月不重样”是能轻松做到的。今天,我们就来盘点一下,武汉“过早”的十大经典美食。<br><span class="dot"></span></p>
				</div>
				<div class="reco">
					<h4>为您推荐</h4>
					<ul>
						<li><a href="#">面窝是武汉的特色小吃,就和上海的粢饭糕和油墩子一样随处可见...</a></li>
						<li><a href="#">武汉人很爱吃各种豆丝小吃,武汉的百年老店,主营炒牛肉豆丝...</a></li>
						<li><a href="#">糊汤粉的汤是用小鲫鱼熬的,全名鲜鱼糊汤粉,武汉人的餐桌上...</a></li>
						<li><a href="#">遇到卖甜品的小摊,不免要停下来买一碗或一杯热腾腾的蛋花米酒...</a></li>
						<li><a href="#">欢喜坨有点像北方的麻团,吃起来像是裹了芝麻的白糖馅儿的油炸汤圆</a></li>
					</ul>
				</div>
			</side>
		</div>
	</div>
</body>
</html>

#all{
	width:1200px;
	height: 2500px;
	margin: 0 auto;
	margin-top:-10px;
}
body{
	background:url("images/36.jpg") no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
.img img{
	outline: #fff 1px solid;
}
.box{
	width: 1200px;
	height: 2300px;
	background-color:rgba(205,203,203,0.8);
	margin-top: -25px;
}
main{
	width:68%;
	float: left;
	margin-left: 10px;
}
main h1{
	color:#E38003;
	text-shadow: 2px 2px 1px #7C7C7C;
	font-size: 2.2em;
	height: 80px;
	border-bottom: #E38003 6px solid;
}
.img1 img{
	border-radius: 110px;
	box-shadow: 2px 5px 22px gray;
	padding: 2px;
}
h2{
	color:aliceblue;
	font-size: 1.8em;
	text-shadow: -1px 0 black,0 -1px black;
	margin-left: 10px;margin-top: 20px;
}
main p{
	line-height: 1.5em;
	text-indent: 2em;
	margin-left: 10px;
}
.box2{
	width: 816px;
	height: 250px;
	border: 1px dashed #4E3514;    
}
side{
	width: 29%;
	float: right;	
}

h4{
	margin-top:30px;
	color: #924A20;
	margin-left: 16px;
	font-size: 1.5em;
	font-family: 楷体;
}
side video{
	margin-left: 30px;
}
.dot{  
	display: inline-block;  
	height: 1em;  
	line-height: 1;  
	text-align: left;  
	vertical-align: -.25em;  
	overflow: hidden;
} 
.dot::before{  
	display: block;  
	content: '正在加载...';  
	white-space: pre-wrap;  
	animation: dot 2s infinite step-start both; 
} 
@keyframes dot{  33% {  transform: translateY(-2em);  }  
	66% {  transform: translateY(-1em);  } 
}
.dyna{
	background-color: #FFFEEE;
	border: 5px gray double;
}
.dyna p{
	color: #924A20;
	margin-left: 16px;
	font-size: 1.2em;
	font-family: 楷体;
	margin-right: 1em;
	text-indent: 2em;
}
.reco a{
	color: #666;
	font-size: 1.1em;
	text-decoration: none;
}
.reco li{
	margin-bottom: 10px;
	border-bottom: 1px #666 solid;
}

页面3:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="3.css" type="text/css">
<link rel="shortcut icon" href="images/37.png" /> 
<title>旅行与建筑</title>
</head>

<body>
	<div class="all">
		<img src="images/35.jpg" alt="" width="1200" height="500"><br><br><br><br><br>
		<hr color="#66BECE" size="4">
		<p class="img"><img src="images/34.png" alt="" width="120" height="90"></p>
		<main>
			<h2>景点介绍</h2><br><br>
			<div class="img2">
				<img src="images/15.jpg" alt="" width="300" height="250"><h3>东湖</h3><p>因江水穿城,武汉被叫做「江城」;而有了湖,武汉才有了「江湖」。 东湖,便是武汉「最快意的江湖」。这里绿树成荫,繁花似锦;人们劈波斩浪,高手如云。它人气爆棚,是外地游客眼中的观光胜地,也是武汉人民身边的城市乐园。在樱花盛开的季节,美丽的樱花更是吸引了不少游客前来观赏。</p>			
			</div><br><br><br><br>
			<div class="img2">
				<img src="images/5.jpg" alt="" width="300" height="250"><h3>光谷</h3><p>来到世界城就像进了“迪斯尼”乐园。世界城光谷步行街的商业景观设计,由香港迪斯尼商业景观设计原班人马打造,呈现原汁原味的欧式风情商业街。从凯旋门开始,参观欧洲文化的标志;行走在香榭丽舍大道,欣赏法式繁华;走进德国酒吧街,一品欧式美酒;至罗马凯撒广场,回忆悠久欧洲文明;进多莫大教堂、米兰春天广场,想象浪漫婚典;漫步西班牙广场,共享西班牙的奔放;穿过热情的弗拉门戈广场,漫步到充满沉浸式表演的喷泉广场感受光影与水的艺术魅力。</p>
			</div><br>
			<div class="img2">
				<img src="images/13.jpg" alt="" width="300" height="250"><h3>黄鹤楼</h3><p>黄鹤楼主楼为四边套八边形体、钢筋混凝土框架仿木结构,通高51.4米,底层边宽30米,顶层边宽18米,飞檐五层,攒尖楼顶,顶覆金色琉璃瓦,由72根圆柱支撑,楼上有60个翘角向外伸展;楼外有铸铜黄鹤造型、胜像宝塔、牌坊、轩廊、亭阁等建筑环绕,整楼形如黄鹤,展翅欲飞,檐下四面悬挂匾额,正面悬书法家舒同题“黄鹤楼”三字金匾。</p>
			</div>
			<div>
				<form action="#">
					<h2>在线留言</h2>
					<p><label for="username">用户名:</label>&nbsp;&nbsp;<input type="text" id="username"></p>
					<p><label for="tel">&nbsp;&nbsp;&nbsp;话:</label>&nbsp;&nbsp;<input type="tel" id="tel"></p>
					<p><label for="email">&nbsp;&nbsp;&nbsp;箱:</label>&nbsp;&nbsp;<input type="email" id="email"></p>
					<p><label for="content">&nbsp;&nbsp;&nbsp;容:</label><textarea name="content" id="" cols="80" rows="10"></textarea></p>
					<p><input type="submit" value="留言"></p>
				</form>
			</div>
		</main>	
		<footer>
			<ul class="contact_list">
				<li>
					<div class="center_vertically contact_p">
						<img class="shaking" src="images/icon_5.png" alt="官方QQ" />
					</div>
					<p class="contact_list_p"><a href="#">官方QQ</a></p>
				</li>
				<li>
					<div class="center_vertically contact_p">
						<img class="shaking" src="images/icon_6.png" alt="24小时热线" />
					</div>
					<p class="contact_list_p"><a href="#">24小时热线</a></p>
				</li>
				<li>
					<div class="center_vertically contact_p">
						<img class="shaking" src="images/icon_7.png" alt="官方微信" />
					</div>
					<p class="contact_list_p"><a href="#">官方微信</a></p>
				</li>
				<li>
					<div class="center_vertically contact_p">
						<img class="shaking" src="images/icon_8.png" alt="官方微博" />
					</div>
					<p class="contact_list_p"><a href="#">官方微博</a></p>
				</li>
				<li>
					<div class="center_vertically contact_p">
						<img class="shaking" src="images/icon_9.png" alt="邮箱地址" />
					</div>
					<p class="contact_list_p"><a href="#">邮箱地址</a></p>
				</li>
			</ul>
		</footer>
	</div>
</body>
</html>

/* CSS Document */
.all{
	width:1200px;
	height: 2550px;
	margin:0 auto;
	margin-top:-10px;
	background-color: rgba(227,226,226,0.8);
}
body{
	background: url("images/29.jpg") no-repeat;
	background-size: cover;
	background-attachment:fixed;
}
main{
	height: 1800px;
	padding: 10px;
}
.img{
	position: relative;
	top:-55px;
	width: 130px;
	height: 90px;
	left:500px;	
}
.img2{
	margin-bottom: 40px;
}
.img2 img{
	float: left;
}
.img2 p,h3{
	font-size: 1.3em;
	line-height: 1.6em;
	text-indent: 2em;
	position: relative;
	left: 10px;
}
h2{
	font-size: 2.3em;
	color: cornflowerblue;
	text-shadow: -1px -1px 2px #2E6CE5;
	margin-top: -20px;
}
main img{
	box-shadow: 2px 2px 2px gray,-2px -2px 2px gray;
	padding: 7px;
}
h3{
	color:#1B1B1B;
}
form{
	margin-top: 250px;
}
form p{
	margin:30px 400px;
}
form label{
	font-size: 1.3em;
	font-weight: 700;
	color:#2E2C2C;
}
form input{
	padding: 8px 10px;
	padding-right: 90px;
	border:none;
}
form textarea{
	border: none;
	margin-left: 87px;
	margin-top: -22px;
}
input[type="submit"]{
	padding:6px 40px;
	text-align: center;
	font-size: 1.3em;
	font-weight: 700;
	background-color:#171212;
	color: #fff;
}
input[type="submit"]:hover{
	cursor: pointer;
}
input[type="text"]:focus,input[type="tel"]:focus,input[type="email"]:focus,textarea:focus{
	outline: none;
	background-color: #FEDEB3;
}
footer{
	width: 1200px;
	margin: 50px auto;
	height: auto;
	color: #333333;
	text-align: center;
	overflow: hidden;
	margin-top: -30px;
}
.contact_list {
	width: 1200px;
	padding-top: 60px;
	height: 230px;
	font-size: 14px;
	color: #fff;
	overflow: hidden;

}
.contact_list li {
	width: 226px;
	height: 230px;
	overflow: hidden;
	display: inline-block;
}
ul{
	background-color: #fff;
	margin-left: -37px;
}
.contact_p {
	padding-top: 52px;
	width: 100%;
	height: 70px;
	overflow: hidden;
}

.contact_list_p a{
	line-height: 60px;
	color: #999999;
	text-decoration: none;
	font-size: 1.1em;
}
.contact_list_p a:hover{
	color: #EE7438;
}
.shaking {
	animation: move 3s 0s infinite;
	-webkit-animation: move 3s 0s infinite;
	transform-origin: bottom;
}
@keyframes move {

	0%,65%,100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	70%,80%,90% {
		-webkit-transform: rotate(6deg);
		transform: rotate(6deg);
	}

	75%,85%,95% {
		-webkit-transform: rotate(-6deg);
		transform: rotate(-6deg);
	}
}
@-webkit-keyframes move {

	0%,
	65%,
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	70%,
	80%,
	90% {
		-webkit-transform: rotate(6deg);
		transform: rotate(6deg);
	}

	75%,
	85%,
	95% {
		-webkit-transform: rotate(-6deg);
		transform: rotate(-6deg);
	}
}

需要全部图片文件、源代码可进我的资源里下载。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进