个人网页制作

#2022年7月 网页设计与制作课程大作业

网页主题:我的家乡

#介绍我的家乡,使用了html+css,实现了页面配乐(进入网页自动播放)

首页界面

首页样式:

首页代码:

<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<title>网页设计与制作大作业</title>
	</head>
	<link href="css/index.css" type="text/css" rel="stylesheet" />
	<body>
		<audio autoplay="autoplay" loop="loop" preload="auto" src="images/背景音乐.mp3"></audio>
		<div class="nav">
			<div class="dingtu"><img src="images/1.png" width="960" height="200"></div>
			<div class="biaoti"><h2>我的家乡-汉中</h2></div>
			<div class="daohanglan">
				<ul>
					<li><a href="index.html" id="sy">首页</a></li>
					<li><a href="1-1.html">汉中简介</a></li>
					<li><a href="2-1.html">著名景点</a></li>
					<li><a href="3-1.html">特色美食</a></li>
				</ul>
		</div>
		<div class="neirong">
			<div class="neirong1">
				<a href="http://www.hanzhong.gov.cn/"><img src="images/2.png" width="135" height="90" style="display:block; float:left; margin-right:15px;"></a>
				<h1><a href="http://www.hanzhong.gov.cn/"">汉中市政府</a></h1>
				<p>汉中市人民政府是中华人民共和国陕西省汉中市的国家行政机关,是汉中市人民代表大会的执行机关,在汉中市人民代表大会闭会期间,对汉中市人民代表大会常务委员会和陕西省人民政府负责并报告工作,并依法行使行政职权。</p>
			</div>
			<div class="neirong2">
				<a href="http://jyj.hanzhong.gov.cn/"><img src="images/3.png" width="135" height="90" style="display:block; float:left; margin-right:15px;"></a>
				<h1><a href="http://jyj.hanzhong.gov.cn/">汉中市教育局</a></h1>
				<p>汉中市教育局是汉中市人民政府工作部门,主要职责:贯彻落实中省市教育工作有关法律法规和政策规定,组织拟订并监督实施全市教育改革与发展规划等有关规范性文件,承担教育行政执法有关工作,实施全市教育现代化建设,推动汉中教育高质量发展。</p>
			</div>
			<div class="neirong3">
				<a href="http://wl.hanzhong.gov.cn/"><img src="images/4.png" width="135" height="90" style="display:block; float:left; margin-right:15px;"></a>
				<h1><a href="http://wl.hanzhong.gov.cn/">汉中市文化和旅游局</a></h1>
				<p>汉中市文化和旅游局是汉中市机构改革组建的新部门,为汉中市人民政府工作部门。贯彻落实中省文化、旅游、文物、广播电视方面的法律法规和政策规定,组织拟定全市文化、旅游、文物、广播电视方面的规范性文件;起草历史文化保护方面的地方性法规和政府规章草案。</p>
			</div>
			<div class="neirong4">
				<a href="http://rsj.hanzhong.gov.cn/"><img src="images/5.png" width="135" height="90" style="display:block; float:left; margin-right:15px;"></a>
				<h1><a href="http://rsj.hanzhong.gov.cn/">汉中市人力资源和社会保障局</a></h1>
				<p>汉中市人力资源和社会保障局是一个政府机构,主要是拟订全市人力资源和社会保障事业发展规划、改革方案,起草全市人力资源和社会保障规范性文件,并组织实施和监督检查。</p>
			</div>
			<hr color="#efefef"align="center"size="30"width="0"/>
			<div class="neirong5">
				<a href="http://fgw.hanzhong.gov.cn/"><img src="images/6.png" width="135" height="90" style="display:block; float:left; margin-right:15px;"></a>
				<h1><a href="http://fgw.hanzhong.gov.cn/">汉中市发展和改革委员会</a></h1>
				<p>汉中市发展和改革委员会是汉中市地方政府主管汉中市发展和改革的政府机构。主要是加强经济社会发展战略研究和中长期规划、计划的编制,加强规划的引领、导向作用;提出宏观调控的目标及意见建议;综合运用宏观调控政策措施,促进经济持续稳定增长、结构优化和社会事业协调发展。</p>
			</div>
		</div>
	</body>
</html>

首页界面使用图片:

https://z1.ax1x.com/2023/10/09/pPx3MWt.jpg

https://z1.ax1x.com/2023/10/09/pPx3rOU.png

https://z1.ax1x.com/2023/10/09/pPx32k9.png

https://z1.ax1x.com/2023/10/09/pPx3TmD.png

https://z1.ax1x.com/2023/10/09/pPx3qkd.png

https://z1.ax1x.com/2023/10/09/pPx3OfI.png

首页CSS代码:

/*清除所有标签的初始内外边距*/
*{
	margin:0; 
	padding:0;
	}
/*主体*/
body{
	background:#efefef;
	} 
.nav{
	width:960px; 
	overflow:hidden;/*溢出修剪不显示滚动条*/
	margin:0 auto; 
	background:#ffffff; 
	padding:0 10px 10px 10px;
	}
/*顶部图片*/
.dingtu { 
	width:960px; 
	overflow:hidden; 
	margin:10px auto 0;
	}
/*标题*/
.biaoti h2{
	font-family: "楷体";
	background-color: #f2ffef;
	text-align:center;
	font-size: 36px; 
	line-height: 50px;/*行高*/
	}
/*导航栏*/
.daohanglan { 
	width:200px; 
	overflow:hidden; 
	float:left;
	}
li{
	text-decoration:none;
	line-height:34px; 
	margin-left:5px; 
	}
li a{
	display:block; 
	font-size:16px; 
	font-family:"楷体"; 
	color:#333333; 
	padding:0 15px; 
	line-height: 30px
	}
#sy{
	background:#666666; 
	color:#FFFFFF;
	}
/*悬停*/
li a:hover {
	background:#666666; 
	color:#FFFFFF;
	}
/*小标题*/
a{
	text-decoration:none;
	color:#333333; 
	font-size:12px;
	}
/*简介*/
.neirong { 
	width:700px; 
	overflow:hidden; 
	float:right;
	}
/*内容1*/
.neirong1 { 
	width:680px; 
	overflow:hidden; 
	margin-top:30px;
	}
.neirong1 h1 { 
	display:block;
	line-height:24px;
	}
.neirong1 a{
	text-decoration:none;
	color:#333333; 
	font-size:12px;
	font-weight:bold; 
	color:#333333;}
.neirong1 p{
	word-break:break-all;
	font-size:12px;
	font-size:12px; 
	line-height:21px; 
	color:#666666;
	}
/*内容2*/
.neirong2 { 
	width:680px; 
	overflow:hidden; 
	margin-top:30px;
	}
.neirong2 h1 { 
	display:block;
	line-height:24px;
	}
.neirong2 a{
	text-decoration:none;
	color:#333333; 
	font-size:12px;
	font-weight:bold; 
	color:#333333;}
.neirong2 p{
	word-break:break-all;
	font-size:12px;
	font-size:12px; 
	line-height:21px; 
	color:#666666;
	}
/*内容3*/
.neirong3 { 
	width:680px; 
	overflow:hidden; 
	margin-top:30px;
	}
.neirong3 h1 { 
	display:block;
	line-height:24px;
	}
.neirong3 a{
	text-decoration:none;
	color:#333333; 
	font-size:12px;
	font-weight:bold; 
	color:#333333;}
.neirong3 p{
	word-break:break-all;
	font-size:12px;
	font-size:12px; 
	line-height:21px; 
	color:#666666;
	}
/*内容4*/
.neirong4 { 
	width:680px; 
	overflow:hidden; 
	margin-top:30px;
	}
.neirong4 h1 { 
	display:block;
	line-height:24px;
	}
.neirong4 a{
	text-decoration:none;
	color:#333333; 
	font-size:12px;
	font-weight:bold; 
	color:#333333;}
.neirong4 p{
	word-break:break-all;
	font-size:12px;
	font-size:12px; 
	line-height:21px; 
	color:#666666;
	}
/*内容5*/
.neirong3 { 
	width:680px; 
	overflow:hidden; 
	margin-top:30px;
	}
.neirong5 h1 { 
	display:block;
	line-height:24px;
	}
.neirong5 a{
	text-decoration:none;
	color:#333333; 
	font-size:12px;
	font-weight:bold; 
	color:#333333;}
.neirong5 p{
	word-break:break-all;
	font-size:12px;
	font-size:12px; 
	line-height:21px; 
	color:#666666;
	}

家乡简介:

简介样式:

简介代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>汉中简介</title>
	</head>
	<link href="css/1-1.css" type="text/css" rel="stylesheet" />
	<body>
		<audio autoplay="autoplay" loop="loop" preload="auto" src="images/背景音乐.mp3"></audio>
		<div class="biaoti"><h2 align="center">汉中简介</h2></div>
			<div class="neirong">
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong1">
					<a href="http://www.hanzhong.gov.cn/hzszf/mlhz/csgk/zrdl/202202/2aac2dd39c15406eae819e631b1bdcf1.shtml"><img src="images/7.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="http://www.hanzhong.gov.cn/hzszf/mlhz/csgk/zrdl/202202/2aac2dd39c15406eae819e631b1bdcf1.shtml"">汉中地理位置</a></h1>
					<p>汉中市位于陕西省西南部,地处秦巴山区西段,北靠秦岭,南倚米仓山,中为汉江上游谷地平坝;北与宝鸡市的凤县、太白县及西安市的周至县毗连,东与安康的宁陕县、石泉县、汉阴县和紫阳县接壤,南与四川省广元市的青川县、旺苍县、朝天区以及巴中市的南江县、通江县和达州市的万源市相连,西与甘肃省陇南市的徽县、成县、康县、两当县相邻;在东经105°29′14″—108°16′49″和北纬32°08′52″—33°52′46″之间,东西长261.5千米,南北宽192.6千米,辖区面积27246平方千米。山地占全市面积的75.2%,丘陵占14.6%,平坝占10.2%。汉中盆地东西狭长,呈椭圆形。盆地从勉县武侯镇到洋县龙亭铺,东西长约116千米,南北宽约5—30千米,市区附近宽25—30千米,为汉江横穿盆地中部形成的冲积平原。汉中市平均海拔为1128米、平均坡度25.4°。</p>
				</div>
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong2">
					<a href="https://www.sohu.com/a/148983383_99899534"><img src="images/8.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="https://www.sohu.com/a/148983383_99899534">汉中历史渊源</a></h1>
					<p>汉中曾经是商朝的方国,秦国时的汉中郡,此后又是刘邦西汉王朝的发祥地,蜀汉丞相诸葛亮北伐的军事要地,杰出的政治、军事人物张良、韩信、萧何、张鲁、诸葛亮、吴玠、吴璘等都在汉中留下足迹。. 汉中也酝育了伟大的外交家张骞,孕育了刚直雄烈的诤臣李固和造纸术的发明者蔡伦。. 诗人李白,杜甫,陆游也在秦巴山区之间吟唱出彪炳文学史的瑰丽诗章,曹操、杜甫、陆游等许多历史名人都曾留下了诗词墨宝。. 开通西域第一人。. 中外历史上著名的外交家、探险家、丝绸之路的开拓者张骞,出生在汉中城以东的城固县,他两次奉命出使西域,联系了当时西域五十二国,加强了西北各少数民族与汉族的经济、文化联系,打通了我国与中亚、西亚的陆路交通,促进了中外贸易往来。</p>
				</div>
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong3">
					<a href="hhttps://www.sohu.com/a/468111098_121123826"><img src="images/9.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="https://www.sohu.com/a/468111098_121123826">汉中主要人口</a></h1>
					<p>汉中市居住人口以汉族为主,另有回族、苗族、羌族、蒙古族、壮族、土家族、朝鲜族、白族、彝族、侗族、藏族、畲族、土族、哈萨克族、傣族、高山族、锡伯族等少数民族。2021年,汉中市户籍人口379.65万人,其中城镇人口152.61万人。常住人口318.93万人。出生率为7.35‰,死亡率为7.52‰,自然增长率为-0.17‰,常住人口城镇化率为52.26%。</p>
				</div>
			</div>
		</div>
	</body>
</html>

简介使用图片:

https://z1.ax1x.com/2023/10/09/pPx8ikj.jpg

https://z1.ax1x.com/2023/10/09/pPx8Fts.jpg

https://pic.imgdb.cn/item/6523cccac458853aef573e6b.jpg

简介CSS代码:

*{
	margin:0; 
	padding:0;
	}
.biaoti h2{
	font-family: "楷体";
	background-color: #f2ffef;
	text-align:center;
	font-size: 36px; 
	line-height: 50px;
	}

/*简介*/
.neirong { 
	width:1500px; 
	overflow:hidden; 
	}
/*内容1*/
.neirong1 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong1 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong1 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong1 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}
/*内容2*/
.neirong2 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong2 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong2 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong2 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}
/*内容3*/
.neirong3 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong3 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong3 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong3 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}

著名景点:

景点样式:

景点代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>著名景点</title>
	</head>
	<link href="css/2-1.css" type="text/css" rel="stylesheet" />
	<body>
		<audio autoplay="autoplay" loop="loop" preload="auto" src="images/背景音乐.mp3"></audio>
		<div class="biaoti"><h2 align="center">著名景点</h2></div>
			<div class="neirong">
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong1">
					<a href="http://www.nianhuawan.com/activity/59.html"><img src="images/14.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="http://www.nianhuawan.com/activity/59.html">兴汉胜景</a></h1>
					<p>兴汉胜境景区位于陕西省汉中市汉台区兴汉新区诸汉路 ,兴汉胜境景区以自然生态的汉水之源为根,以中华民族的汉文化之源为魂,以汉朝初兴的历史辉煌为底色,建成集汉风景点群、汉风商街群、汉风博物馆群、汉风酒店群、汉风餐饮、汉风演艺等于一体的汉文化旅游景区,为游客带来雅致、美好、快乐的汉风生活体验。「兴汉胜境」以文化历史、汉文化底蕴进行深究。景区内现拥有汉文化博物馆、汉乐府、兴汉城市展览馆、汉人老家街、丝路风情街五大主题聚落,更以汉文化博览园为核心弘扬汉文化、展现汉中「汉家发祥地,中华聚宝盆」美誉。</p>
				</div>
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong2">
					<a href="http://www.hzsmzd.com/Defaultview.aspx?view=15"><img src="images/10.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="http://www.hzsmzd.com/Defaultview.aspx?view=15"">石门栈道</a></h1>
					<p>石门栈道风景区是汉中著名风景区,为国家AAAA级旅游景区,位于汉中市汉台区、勉县、留坝三县(区)交界的褒谷口。这里拥有国家级重点保护文物和各种地方美食,被誉为“中国栈道之乡”和“西北的水利明珠”,也是传说中褒姒的故里。这里既有水利工程石门水库,又有丰富的人文和自然景观,是第一批全国重点文物保护单位褒斜道、石门及其摩崖石刻的所在地,又是珍稀动植物的保护区。汉中石门栈道风景区距离市区15公里。它以石门水库为依托,风景秀丽,古迹荟萃,是自然景观与历史文化俱佳的城郊型水利风景区。景区内林木苍翠、怪石嶙峋,既有雄伟壮观的水利景观,烟波浩淼的水域风光,又有底蕴深厚的人文历史遗迹。</p>
				</div>
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong3">
					<a href="http://www.hanzhong.gov.cn/hzszf/mlhz/lyhz/jqjs/201409/t20140924_5284.shtml"><img src="images/11.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="http://www.hanzhong.gov.cn/hzszf/mlhz/lyhz/jqjs/201409/t20140924_5284.shtml">古汉台</a></h1>
					<p>古汉台位于汉中市中心,楚汉相争时期筑建,面积约8000平方米。由三级台地构成,台高7米。 刘邦驻汉中发迹而定鼎。故将国号定为汉。刘邦当年在汉中时的行宫遗址,就是汉台,人们仰其历史久远,又称其为古汉台。宋朝以至民国时期,汉台为汉中府署所在地。历尽沧桑的汉台,今天已经没有汉代的建筑了,北宋张少禹曾有诗句说,“留此一掊土,尤为汉家基”,可见在北宋时汉台曾一度荒芜过。到了南宋,汉台被开发为供官员办完工之后的休闲娱乐之处。 清代的陈毓彩有诗云“赤帝龙兴事已陈,层台巩固尚如新。当日宫廷湮没迹,此时郡国有仁人。”1958年,汉中市以古汉台为馆址,建立了汉中博物馆,其建筑主要依托古汉台原有的建筑风格和布局,由自南而北逐级升高的三个院落组成,自上世纪70年代开始,相继修建了石门十三品陈列室、褒斜古栈道陈列室、东西华亭、北大门仿古建筑群,重修了望江楼、桂荫堂,整修了庭院园林,形成了以明清建筑以主的园林式风格。 </p>
				</div>
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong4">
					<a href="http://zslw.org.cn/index.php/a/264.html"><img src="images/12.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="http://zslw.org.cn/index.php/a/264.html">诸葛古镇</a></h1>
					<p>诸葛古镇文化景区,由陕旅集团精心打造,是陕西省省委、省政府确定的十大重点文化旅游项目之一,集古迹参观、民居展示、实景演出、民俗餐饮、儿童娱乐、亲水休闲等多种业态为一体。景区总占地面积300余亩,总投资额约5亿元,诸葛古镇主体建筑面积约2.5万平方米;周边交通便利。诸葛古镇位于陕西省汉中市勉县,南依汉江、北邻武侯祠、东连马超墓、西接阳平关,地理位置优越,文化资源丰厚。是陕西省省委、省政府确定的十大重点文化项目之一;汉中三国文化的重要展示体验区;也是陕旅集团打造的“两汉三国文化旅游区”的龙头项目。是集古迹参观、民居展示、实景演出、民俗餐饮、儿童娱乐、亲水休闲等多种业态为一体的文化旅游景区。</p>
				</div>
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong5">
					<a href="https://www.qmcgz.com/"><img src="images/13.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="https://www.qmcgz.com/">青木川古镇</a></h1>
					<p>青木川镇,隶属于陕西省汉中市宁强县。地处宁强县西北部。东邻安乐河镇,南接广坪镇,西依四川省青川县,北靠甘肃省陇南市康县和武都区,系得陇望蜀,“一脚踏三省”之地。辖区东西最大距离10.8千米,南北最大距离37.8千米,总面积195.32平方千米。青木川镇是中国历史文化名镇,全国特色景观旅游名镇,最具潜力十大古镇、最具潜力十大乡村游目的地,陕西省最美小城镇。境内有赵、魏、瞿、屠各姓氏祠堂,观音岩摩崖石像,茶马古道,黄家院林氏桃园三洞墓葬,魏氏宅院,回龙场老街,辅仁中学等名胜古迹;马家山国家级自然保护区、阎王碥、望乡台、观音岩、金溪河、鬼门关、凤凰山、将军石、龙池山、回龙寺等景点。</p>
				</div>
			</div>
		</div>
	</body>
</html>

景点使用图片:

https://pic.imgdb.cn/item/6523cdc1c458853aef578a4e.jpg

https://pic.imgdb.cn/item/6523cde4c458853aef579293.jpg

https://pic.imgdb.cn/item/6523cdf5c458853aef5799b6.jpg

https://pic.imgdb.cn/item/6523ce0fc458853aef57a43e.jpg

https://pic.imgdb.cn/item/6523ce0fc458853aef57a43e.jpg

景点CSS代码:

*{
	margin:0; 
	padding:0;
	}
.biaoti h2{
	font-family: "楷体";
	background-color: #f2ffef;
	text-align:center;
	font-size: 36px; 
	line-height: 50px;
	}
/*简介*/
.neirong { 
	width:1500px; 
	overflow:hidden; 
	}
/*内容1*/
.neirong1 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong1 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong1 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong1 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}
/*内容2*/
.neirong2 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong2 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong2 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong2 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}
/*内容3*/
.neirong3 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong3 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong3 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong3 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}
/*内容4*/
.neirong4 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong4 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong4 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong4 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}
/*内容5*/
.neirong5 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong5 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong5 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong5 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}

特色美食:

美食样式:

美食代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>特色美食</title>
	</head>
	<link href="css/3-1.css" type="text/css" rel="stylesheet" />
	<body>
		<audio autoplay="autoplay" loop="loop" preload="auto" src="images/背景音乐.mp3"></audio>
		<div class="biaoti"><h2 align="center">特色美食</h2></div>
			<div class="neirong">
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong1">
					<a href="https://baike.baidu.com/item/%E6%B1%89%E4%B8%AD%E9%9D%A2%E7%9A%AE/10592423"><img src="images/15.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="https://baike.baidu.com/item/%E6%B1%89%E4%B8%AD%E9%9D%A2%E7%9A%AE/10592423">汉中热面皮</a></h1>
					<p>汉中面皮(Hanzhong Mianpi),是陕西省汉中市的一道特色小吃;相传该菜品的历史始于秦汉时期,做法一般是把大米浸泡后磨成米浆,上笼蒸成薄皮儿,趁热抹上菜籽油,切成条状,依个人口味调入油辣子、味精、精盐、醋、酱油、蒜泥水等佐料,拌匀即可食用。当地多热食,称热面皮,亦可置于通风处降温后凉拌(当地称冷面皮或凉面皮)。配菜(底垫子)主要有黄豆芽、土豆丝、黄瓜丝、胡萝卜丝、等,口感软糯,香辣。不需即时食用时还可以晾干后油炸食用。也有烩,炒等吃法。汉中面皮一般采用米浆为原料,偶尔也用面粉直接调浆(当地称“面面皮”),或在米浆、面浆中混入土豆淀粉或红薯淀粉增强韧性,未强调“面面皮”的均为米浆制作。</p>
				</div>
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong2">
					<a href="http://www.snxx.gov.cn/xxxzf/zjxx/xxly/tsms/201809/bea450830ec04a66a592544816ace646.shtml"><img src="images/16.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="http://www.snxx.gov.cn/xxxzf/zjxx/xxly/tsms/201809/bea450830ec04a66a592544816ace646.shtml"">西乡羊肉泡馍</a></h1>
					<p>西乡风味美馔。它烹制精细,料重味醇,肉烂汤浓,肥而不腻,营养丰富,香气四溢,诱人食欲,食后回味无穷。羊肉泡馍的烹饪技术要求很严格,其制作方法是:先将优质的羊肉洗切干净,煮时加葱、姜、花椒、八角、茴香、桂皮等佐料煮烂,汤汁备用。馍,是一种白面烤饼,吃时将其掰碎放入碗内,然后交厨师在碗里放一定量的熟肉、原汤,并配以葱末、白菜丝、料酒、粉丝、盐、味精等调料,制作而成。吃也是有讲究的,掰馍有掰,撕,掐,揉,搓等12种手法,大小如蜂头,掰好后要告诉伙计你的口味要求(口重---偏重、偏轻,干拌——汤较少,口汤——吃完馍碗底剩的汤刚好一口,水围城——汤较多)。泡馍端上吃的时候,讲究蚕食,忌使劲搅和,为的是从头到尾,口味始终如一。搭配糖蒜和辣酱,真正的吃家开始是不吃这些的,影响口味,吃到一半,感觉有些腻的时候,吃一颗糖蒜,挑一点辣酱拌在馍中(拌的量以一两口吃完为宜),然后用送的汤清清口,然后继续吃,这样才不影响口味。味道好的泡馍油很少,主要是汤的香味,吃着也不腻</p>
				</div>
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong3">
					<a href="http://www.hanzhong.gov.cn/hzszf/mlhz/lyhz/tsms/202104/50e2ba5b858c466187c936a44511e4ce.shtml"><img src="images/17.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="http://www.hanzhong.gov.cn/hzszf/mlhz/lyhz/tsms/202104/50e2ba5b858c466187c936a44511e4ce.shtml">浆水面</a></h1>
					<p>汉中的浆水面,其味酸,辣,清香,别具一格,相传该名是由汉高祖刘邦与丞相萧何在此吃面时所起。它一直是汉中人民喜爱的面食,浆水菜的菜以芥菜(花辣菜)为佳,白菜,芹菜也可。制作时,将菜洗净,在沸水中煮烫至蔫,取出放入瓦盆罐中,加入面汤,一至二日待菜色变为金黄即可,再用食油,精盐,加蒜苗炒熟,配以蒜花,姜末,花椒粉等佐料调好的豆腐丁,烩入炒熟的浆水菜作为潲子。浆水面条要用人工擀制,使之叶宽,条长,片薄。将煮熟的面条入碗,调上浆水菜的潲子,浇上辣椒红油,浆水面即成。</p>
				</div>
				<hr color="#efefef"align="center"size="30"width="0"/>
				<div class="neirong4">
					<a href="http://shop.bytravel.cn/produce1/5B815F3A9EBB8FA39E21.html"><img src="images/18.png" width="500" height="300" style="display:block; float:left; margin-right:15px;"></a>
					<h1><a href="http://shop.bytravel.cn/produce1/5B815F3A9EBB8FA39E21.html">宁强麻辣鸡</a></h1>
					<p>麻辣鸡是陕西汉中宁强一种独具特色的传统风味小吃,属于凉菜。高档的宴席少不了它;老百姓的餐桌上时常见到它;朋友来了一定要吃它;给人馈赠也常常选它。它就是鼎鼎大名、享誉西北的宁强地方风味小吃王家麻辣鸡。相传最早出自王婆夫家前辈所雇一成都厨师之手。二十世纪五十年代在宁强城内悄然兴起,八十年代末开始在宁强城乡普及。此菜色泽金黄鲜亮,肉质细嫩脆爽,肥而不腻,麻辣出头。</p>
				</div>
			</div>
		</div>
	</body>
</html>

美食使用图片:

https://pic.imgdb.cn/item/6523ceafc458853aef57c448.jpg

https://pic.imgdb.cn/item/6523cec3c458853aef57c8ec.webp

https://pic.imgdb.cn/item/6523ced4c458853aef57cd30.webp

https://pic.imgdb.cn/item/6523cee6c458853aef57d0b5.webp

美食CSS代码:

*{
	margin:0; 
	padding:0;
	}
.biaoti h2{
	font-family: "楷体";
	background-color: #f2ffef;
	text-align:center;
	font-size: 36px; 
	line-height: 50px;
	}
/*简介*/
.neirong { 
	width:1500px; 
	overflow:hidden; 
	}
/*内容1*/
.neirong1 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong1 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong1 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong1 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}
/*内容2*/
.neirong2 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong2 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong2 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong2 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}
/*内容3*/
.neirong3 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong3 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong3 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong3 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}
/*内容4*/
.neirong4 { 
	width:1400px; 
	overflow:hidden; 
	margin-top:0px;
	}
.neirong4 h1 { 
	font-family: "楷体";
	display:block;
	line-height:40px;
	}
.neirong4 a{
	text-decoration:none;
	color:#333333; 
	font-size:30px;
	font-weight:bold; 
	color:#333333;}
.neirong4 p{
	font-family: "楷体";
	word-break:break-all;
	font-size:20px;
	line-height:21px; 
	color:#666666;
	}

使用音乐:

QQ音乐下载的:A Thousand Miles

将歌曲下载后存入images文件夹,重命名为:背景音乐.mp3即可

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

湘裳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值