【HTML】HTLM网页设计----我的家乡，根据不同家乡更换名称，图片

1、引言

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

我的家乡系统采用html，jacascript技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。🤩🤩🤩

2.1、作品简介方面 

我的家乡系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、作品演示

3.1、首页

相关代码：

		<div id="banner">
			
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="./img/lb2.jpg" width="100%" height="430">div>
					<div class="swiper-slide"><img src="./img/lb1.jpg" width="100%" height="430">div>
					<div class="swiper-slide"><img src="./img/lb3.png" width="100%" height="430">div>
					<div class="swiper-slide"><img src="./img/lb6.png" width="100%" height="430">div>
					<div class="swiper-slide"><img src="./img/lb8.jpeg" width="100%" height="430">div>
 
				div>
				
				<div class="swiper-pagination swiper-pagination-white">div>
				<div class="swiper-button-next swiper-button-white">div>
				<div class="swiper-button-prev swiper-button-white">div>
			div>
			<div class="banner-nav-bg">div>
		div>
		<div id="news">
			<div id="l_news">
				<div class="a1 news_title fade">
					<i class="fas fa-eye">i>
					<h1>南宁焦点h1>
					<span>NewsFocusspan>
					<a class="gd" href="#">更多>>a>
				div>
				<hr>
				<div id="l_content">
					<div class="card c1 fade">
						<img src="img/news1.png" class="card-img-top" alt="1">
						<div class="card-body">
							<p class="card-text"><a href="#">提升绿城品质 共建美好家园 南宁市入围“国际花园城市”总决赛a>p>
						div>
					div>
					<div class="card c2 fade">
						<img src="img/news2.jpg" class="card-img-top" alt="1">
						<div class="card-body">
							<p class="card-text"><a href="#">宋秀岩来到南宁考察 点赞南宁市妇联扶贫工作成绩a>p>
						div>
					div>
				div>
			div>
 
			<div id="r_news">
				<div class="a2 news_title fade">
					<i class="fas fa-newspaper">i>
					<h1>综合新闻h1>
					<span>Newsspan>
					<a class="gd" href="#">更多>>a>
				div>
				<hr>
				<div id="r_content" class="fade">
					<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>
						<li><a href="#">南宁积极创建国家公交都市 公交个性化智能化 市民出行高效便捷a>li>
						<li><a href="#">南宁社区巴士“走街串巷”招手即停 满足接驳需求还提升“颜值”a>li>
						<li><a href="#">2021年度南宁市绩效展示丨税收惠民办实事 优化服务促发展a>li>
					ul>
 
				div>
			div>
		div>

 3.2、城市简介界面

相关代码：

	<div id="left_menu">
			<h1>绿城简介h1>
			<ul id="left_menu_ul">
				<li class="left_menu_li">绿城概况li>
				<li class="left_menu_li">历史沿革li>
				<li class="left_menu_li">地理环境li>
				<li class="left_menu_li">城市名片li>
			ul>
		div>
 
		<div id="passage">
			<div id="passage0">
				<img src="img/lb1.jpg">
				<div id="slec1">
					<i class="icon" id="icon1">i>
					<p>城市概况p>
				div>
				<div id="slec2">
					<i class="icon" id="icon2">i>
					<p>历史沿革p>
				div>
				<div id="slec3">
					<i class="icon" id="icon3">i>
					<p>地理环境p>
				div>
				<div id="slec4">
					<i class="icon" id="icon4">i>
					<p>城市名片p>
				div>
			div>
			<div id="passage1" class="x">
				<h1>绿城概况h1>
				<p>
					南宁，简称“邕”，是广西壮族自治区首府，全区政治、经济、文化、教育、科技和金融中心，是中国—东盟博览会永久举办地、北部湾城市群核心城市，素有“中国绿城”、“天下民歌眷恋的地方”等美誉，是“联合国人居奖”获得城市、全国文明城市、国家生态园林城市、全国双拥模范城、国家卫生城市、国家森林城市。
				p>
 
				<ul>
					<li>中文名称：南宁市li>
					<li>别 名：绿城、邕城、五象城li>
					<li>地理位置：广西壮族自治区中南部、北回归线以南li>
					<li>所属地区：广西壮族自治区li>
					<li>面 积：22112平方千米li>
					<li>常住人口：874.16万人（截至2020年）li>
					<li>生产总值：4726.34亿元（截至2020年）li>
					<li>方 言：南宁平话、南宁白话、南宁普通话li>
					<li>气候条件：亚热带季风气候li>
					<li>市花/市树：朱槿花、扁桃树li>
					<li>著名景点：青秀山、大明山、花花大世界、南湖公园、扬美古镇等li>
 
				ul>
			div>
			<div id="passage2" class="x">
				<h1>历史沿革h1>
				<p>
					南宁古属百越之地，东晋大兴元年（318年），建晋兴郡，为郡治所在地，南宁建制从此开始，至今已有1700年历史；唐朝贞观年间（632年），更名邕州，设邕州都督府，南宁的简称“邕”由此而来；元朝泰定元年（1324年），邕州路改名为南宁路，取南疆安宁之意，南宁得名始于此。
				p>
				<p> 南宁历史悠久，古代属于“百越之地”。越族分枝繁多，史称“百越”，其中西瓯和骆越两个支系，就是南宁壮族的先民。p>
				<div id="">
					<p> 秦始皇二十三年（前214年），秦朝统一岭南，置桂林郡、南海郡、象郡。南宁属桂林郡辖地。汉高祖元年（前206年），赵佗建立南越国，南宁为其辖地。p>
					<img src="img/introduction/map.jpg" width="40%" height="500px" id="img1">
					<p> 西汉王朝建立后。推行州郡县制。西汉元鼎六年（前111年）。汉武帝派伏波将军路博德率军平定赵兴的南越国后，在岭南设置南海、苍梧、郁林、合浦、交趾、九真、日南、儋耳、朱崖等9郡，南宁属郁林郡领方县辖地。
						三国时，南宁属吴国辖地。吴把领方县改名临浦县。并从原属交州改属广州。这样，南宁便属广州郁林郡临浦县，一直延续到西晋。
						东晋时，晋元帝大兴元年（318年）。从郁林郡分出晋兴郡，下辖晋兴等4个县。南宁为广州晋兴郡晋兴县，晋兴郡治设在晋兴县城，即今南宁。这是南宁第一次成为既是县级又是郡级治所。是南宁建制的开始（一说为隋开皇十四年即公元594年，另一说为西晋太康五、六年即284年、285年，下同）。
						南朝时，宋、齐、梁、陈四个王朝先后更替，南宁隶属郡县均与东晋相同。隋统一南北朝后，开皇十八年（598年），将晋兴县改为宣化县，南宁为宣化县治所，归郁林郡统辖。
						唐武德四年（620年），在宣化县置南晋州，领宣化一县，州县并存。武德五年，宣化县析出宣化、晋兴等5县隶属南晋州。贞观六年（632年），又将南晋州改为邕州，州治在南宁，这是南宁简称“邕”的由来。永徽（650-655年）后，以广州、桂州（治今桂林）、邕州（治今南宁）、容州（治今容县）及安南五州隶岭南五府经略使，名岭南五管，以广州刺史充经略使，驻广州。天宝元年（742年），改邕州为朗宁郡。乾元元年（758年），复改朗宁郡为邕州。咸通三年（862年），分岭南道为东、西两道。岭南东道，治所设在广州；岭南西道，治所设在邕州（今南宁）。统辖原属邕管（统管邕、横、贵、宾四州）、容管（今容县）、桂管（今桂林）三管之地。这就是说，南宁在唐朝时已成为省级治所。
						五代十国时，南宁为南汉国地，仍属邕州，归楚。
						宋朝统一全国后，邕州隶属广南西路，下辖宣化、武缘等7县，南宁仍为邕州和宣化县治所。
						元朝至元十六年（1279年），改邕州为邕州路，今南宁为路总管府治所，下辖宣化、武缘两县，并管左右两江溪峒。泰定元年（1324年）为庆边疆之绥服，寓南疆安宁之意，改邕州路为南宁路。南宁得名，即始于此。
						<img src="img/introduction/p1.webp" width="75%" id="img2">
						明朝洪武二年（1376年），改南宁路为南宁府，今南宁为府治所。隶属广西布政使司。
						清朝时，改广西布政使司为广西省，省会设在今桂林市。南宁府此时隶属于广西省分巡左江道，所辖州、县基本沿袭明朝。南宁既为南宁府治又为左江道治和宣化县治。
						清宣统三年九月（1911年），南宁宣布独立。
						民国元年（1912年）废宣化县，以南宁府长理事，直属广西军政府，后改称广西省政府。1913年隶属于邕南道，1914年邕南道改南宁道，民国31年4月（1943年），原第八、第九区合并为第四行政区，行政督察专员公署设在南宁。
					p>
					<p> 民国期间，南宁历经两次迁省：第一次迁省：1912年10月，广西省临时议会通过决议，广西省会改为南宁。第二次迁省：1936年10月，广西省会由南宁迁至桂林。1945年9月3日，抗日战争胜利。
						1949年12月4日，中国人民解放军进入市区，南宁解放，将南宁城及附近的16个自然村从邕宁县划出。成立直辖广西省的南宁市。
						1950年2月初，南宁市郊扩大至21个自然村并设郊区工委（辖3个区）。2月8日，广西省人民政府成立，省会设在南宁市。
						1957年7月，第一届全国人民代表大会第四次会议通过决议，撤销广西省建制，成立广西壮族自治区。p>
					<img src="img/introduction/p2.jpg" id="img3">
					<p> 1958年3月5日，广西壮族自治区在南宁宣告成立，南宁为广西壮族自治区首府。1965年国务院决定改僮族为壮族。
						1958年-2002年间。作为自治区首府的南宁市和南宁（专区）地区并存。
						1983年10月8日，邕宁县划归南宁市
						2002年12月23日，国务院批准撤销南宁地区设立地级崇左市，辖原南宁地区南部凭祥市和崇左、扶绥、大新、宁明、龙州等县。原南宁地区邕宁、横县、马山、宾阳、隆安、上林划归南宁市。
						2005年，城区重新划分，撤销城北区、永新区、邕宁县，设立西乡塘区、邕宁区和良庆区；扩大兴宁区、江南区管辖范围；将新城区列名为青秀区，并扩大其管辖范围。调整后，南宁市区变成了六县六城区。
						2015年2月26日，国务院批复，撤销武鸣县，设立南宁市武鸣区，以原武鸣县的行政区域为武鸣区的行政区域，武鸣区人民政府驻城厢镇兴武大道245号。
						2020年10月15日，发起成立三省六地文化旅游推广联盟。
						2021年2月3日，经国务院批准，民政部批复同意撤销横县，设立县级横州市，由自治区直辖，南宁市代管 。
						2021年7月15日，南宁恢复全国文明城市资格。p>
					<img src="img/introduction/p3.jpg" width="70%" id="img4">
				div>
 
			div>
			<div id="passage3" class="x">
				<h1>地理环境h1>
				<p> 南宁区位优势突出，处于开放前沿。南宁位于广西中部偏南，面向东南亚，背靠大西南，东邻粤港澳，南临北部湾，处于“一带一路”的重要节点，是广西北部湾经济区、珠江—西江经济带和北部湾城市群核心城市，是华南经济圈、西南经济圈、中国—东盟经济圈的交汇点。具有近海、近边，沿江、沿线“两近两沿”的特点，距钦州港约100公里、防城港约170公里、北海港约200公里，距中越边境约200公里，是距离东盟国家最近的省会城市。平陆运河纳入国家“十四五”规划后，南宁通江达海的区位优势将更加凸显。水路自邕江而上可至滇黔两省，顺流而下可直达粤港澳。
				p>
				<div id="card1" class="card">
					<h2>地理位置h2>
					<p> 南宁市位于广西壮族自治区南部偏西，是广西壮族自治区首府及广西政治、经济、文化中心，总面积 22112
						平方千米，其中建成区面积242平方千米。南宁与越南社会主义共和国毗邻，地处亚热带，北回归线穿域而过，介于东经107°45′～108°51′，北纬22°13′～23°32′之间，地理坐标东经108°22′，北纬22°48′。全市总面积2.21万平方千米。
						南宁处于中国华南、西南和东南亚经济圈的结合部，是环北部湾沿岸重要经济中心。面向东南亚、背靠大西南，东邻粤港澳琼、西接印度半岛，是华南沿海和西南腹地两大经济区的结合部以及东南亚经济圈的连接点，是新崛起的大西南出海通道枢纽城市
					p>
				div>
				<div id="card2" class="card">
					<h2>地貌h2>
					<p> 南宁市地形是以邕江广大河谷为中心的盆地形态。这个盆地向东开口，南、北、西三面均为山地围绕，北为高峰岭低山，南有七坡高丘陵，西有凤凰山（西大明山东部山地）。形成了西起凤凰山，东至青秀山的长形河谷盆地。盆地中央成为各河流集中地点，右江从西北来，左江从西南来，良凤江从南来，心圩江从北来，组成向心水系。盆地的中部，即左、右江汇口处，南北两边丘陵靠近河岸，形成一天然的界线，把长形河谷、盆地分割成两个小盆地，一是以南宁市区为中心的邕江河谷盆地；二是以坛洛镇为中心的侵蚀――溶蚀盆地。
					p>
				div>
 
			div>
			<div id="passage4" class="x">
				<ul class="p4_bg">
					<li id="p4_card1" class="p4_card">
						<p>全国文明城市p>
					li>
					<li id="p4_card2" class="p4_card">
						<p>联合国人居奖城市p>
					li>
					<li id="p4_card3" class="p4_card">
						<p>中国绿城p>
					li>
					<li id="p4_card4" class="p4_card">
						<p>广西北部湾经济区核心城市p>
					li>
				ul>
 
				<ul class="p4_bg">
					<li id="p4_card5" class="p4_card">
						<p>中国—东盟博览会举办地p>
					li>
					<li id="p4_card6" class="p4_card">
						<p>天下民歌眷恋的地方p>
					li>
					<li id="p4_card7" class="p4_card">
						<p>中华保钢环境奖p>
					li>
					<li id="p4_card8" class="p4_card">
						<p>中国水城p>
					li>
				ul>
 
				
 
			div>
 
 
		div>

 3.3、景点页面

相关代码：

<div id="passage1">
				<div class="travel_title" id="by">
					<h1>必游景点TOP3h1>
					<hr>
				div>
				<div class="by_content">
					<div class="by_card">
						<div class="by_text">
							<span class="num">1span>
							<h2>青秀山风景区h2>
							<p class="t1">南宁的绿肺，山不高而秀，水不深而清p>
							<p class="t2">
								相关介绍：青秀山是“广西十佳景区”和南宁市“十佳旅游景点”，面积13.54平方公里。明代风格的龙象塔是青秀山标志性建筑物，登上塔顶，可眺望邕江和远山近岭。p>
							相关景点：<span class="t3">广西学生军抗日烈士纪念碑 东盟青年生态友谊园-凉亭 东盟博览会纪念林等span>
						div>
						<hr>
						<div class="by_img">
							<div class="img_l">
								<img src="img/travel/qxs1.jpeg">
							div>
							<div class="img_r">
								<img src="img/travel/qxs2.jpeg">
								<img src="img/travel/qxs3.jpeg">
							div>
						div>
					div>
 
					<div class="by_card">
						<div class="by_text">
							<span class="num">2span>
							<h2>南宁动物园h2>
							<p class="t1">广西最大的一家动物园，也是南宁最大的主题游乐园所在地p>
							<p class="t2">
								相关介绍：南宁动物园是广西最大的一家动物园，也是南宁最大的主题游乐园所在地。园内有海豚、大象等动物250种2500多头（只）。主题游乐园内有过山车、大摆锤、飓风运动、疯狂滑车、魔术风车等非常刺激的游乐项目。
							p>
 
						div>
						<hr>
						<div class="by_img">
							<div class="img_l">
								<img src="img/travel/dwy1.jpg">
							div>
							<div class="img_r">
								<img src="img/travel/dwy2.jpeg">
								<img src="img/travel/dwy3.jpeg">
							div>
						div>
					div>
 
					<div class="by_card">
						<div class="by_text">
							<span class="num">3span>
							<h2>南宁市人民公园h2>
							<p class="t1">南宁的绿肺，山不高而秀，水不深而清p>
							<p class="t2">
								人民公园又称白龙公园。园内有一约7万平方米的白龙湖，湖水澄碧。湖岸翠竹掩映，垂柳摇曳。湖心有小岛，岛西的九曲桥和岛北的三孔月桥将岛与湖岸相连。
							p>
							相关景点：<span class="t3">公园内望仙怀古是古邕州八景之一，还有革命烈士纪念碑、镇宁炮台、白龙湖、三公祠等景点span>
						div>
						<hr>
						<div class="by_img">
							<div class="img_l">
								<img src="img/travel/rmgy1.jpg">
							div>
							<div class="img_r">
								<img src="img/travel/rmgy2.jpeg">
								<img src="img/travel/rmgy3.jpg">
							div>
						div>
					div>
 
 
				div>
 
				<div class="travel_title" id="hwjd">
					<h1>好玩景点h1>
					<hr>
				div>
 
				<div id="hwjd_content">
					<div class="hw_card" id="hw_card1">
 
						<div class="hw-body">
							<div class="hw_img" id="hw1">div>
							<h2>南宁市凤岭儿童公园h2>
							<p class="card-text">
								南宁凤岭儿童公园位于南宁市青秀区凤岭片区北侧核心区，北临月湾路，向外发散有丹凤路、玉兰路等，南面云景路，与凤岭冲沟相邻，占地834亩，公园建设总投资约6亿多元，是广西较大的陆地和水上的综合性休闲娱乐主题公园。园内地势开阔，自然起伏，树荫似盖，绿草成茵，具有南国亚热带特点和生态化园林景观，是广西壮族自治区集水陆游乐、购物餐饮、休闲观光为一体的主题乐园。
							p>
						div>
 
						<div class="hw_content" id="card_content2">
							<p> 凤岭儿童公园吸引人的当属这里众多的玩乐项目了，既有惊险刺激的游乐园，又有清凉舒适的水上乐园，还可乘坐南宁的摩天轮，享受空中俯瞰的乐趣。夏季，公园内的凤岭水世界则是戏水消暑的好去处，拥有超级大喇叭、激流勇进滑道、海啸造浪池等项目，既有惊险刺激的激情体验，又有悠然自得的戏水享受。
							p>
						div>
					div>
 
					<div class="hw_card" id="hw_card2">
 
						<div class="hw-body">
							<div class="hw_img" id="hw2">div>
							<h2>南宁万达室内主题乐园h2>
							<p class="card-text">
								南宁万达主题乐园，大型桂文化主题室内乐园，位于南宁市五象新区良堤路6号南宁万达茂内，总建筑面积3.5万平方米，总投资达11亿元人民币，于2017年6月17日盛大开业。其设计灵感来自于广西的文化，以广西的名胜山川、地标性建筑为主打元素，融合壮、瑶、苗、侗、回、京、彝等十一个少数民族文化特征，创造出具有中国本土特色的室内主题乐园，让游客体验“一园畅游广西”。
							p>
						div>
 
						<div class="hw_content" id="card_content3">
							<p> 南宁万达乐园是以广西民族文化为主题的全天候室内乐园，坐落于五象新区南宁万达茂。乐园精选国内外深受欢迎的游乐项目，将游乐设备与当地文化、山水元素完美结合，设置2大特色主题游乐区：欢庆小寨、青秀山水，缔造16项娱乐设施。涵盖四个“全国首创型项目”：邕江险渡、凤鸟历险、百鸟剧场和绣球飞舞，实现全天候、全室内、全龄段、全家庭的欢乐世界。
							p>
						div>
					div>
 
					<div class="hw_card" id="hw_card3">
 
						<div class="hw-body">
							<div class="hw_img" id="hw3">div>
							<h2>南宁方特东盟神画h2>
							<p class="card-text">
								方特东盟神画，位于南宁市青秀区66号，是一座特色鲜明，充满东南亚异域风情的文化博览园。乐园倚青秀山，沿邕江而建，拥有东南亚风情街、五大主题餐厅、十一项室内项目及三十余项室外游乐项目，还有超大弧形巨幕影院“走进吴哥”、魔球表演剧场“千岛之歌”、360°环幕影院等200多项休闲景观项目。南宁方特东盟神画是全面展示东盟十国自然历史文化的主题乐园。
							p>
						div>
 
						<div class="hw_content" id="card_content3">
							<p> 方特东盟神画是由中国文旅娱乐行业领跑者华强方特文化科技集团打造的高科技主题乐园，也是国内首座展示东盟十国文化的主题乐园。园区拥有飞行球幕影院“伴你飞翔”、巨幕影院“走进吴哥”、大型真人歌舞表演剧场“千岛之歌”、木质过山车“丛林飞龙”等游乐项目和200多项休闲景观。
							p>
						div>
					div>
 
				div>
 
				<div class="travel_title" id="qtjd">
					<h1>其他热门景点h1>
					<hr>
				div>
 
				<div class="qtjd_content">
					<div class="jd_card">
						<div class="cardf pre">
							<div class="jd_img" id="jd0">div>
							<h2>南宁园博园h2>
						div>
						<div class="cardf de">
							<p>第十二届中国（南宁）国际园林博览会于2018年12月在南宁开幕，将使“冬季到南宁看园博”成为现实。这将是一届生态的园博、文化的园博、共享的园博。p>
						div>
					div>
					<div class="jd_card">
						<div class="cardf pre">
							<div class="jd_img" id="jd1">div>
							<h2>石门森林公园h2>
						div>
						<div class="cardf de">
							<p>石门森林公园林木葱郁，环境幽静，是以森林游憩、休闲娱乐为主要功能的城市森林公园。公园内栽种着上千株从台湾引进的樱花，被称为“城市之肺”p>
						div>
					div>
					<div class="jd_card">
						<div class="cardf pre">
							<div class="jd_img" id="jd2">div>
							<h2>大明山景区h2>
						div>
						<div class="cardf de">
							<p>大明山春天可以爬上半山腰赏花，夏天可以躲进天然冰箱里避暑，秋天可以徒步登顶吸氧润肺，冬天可以山上的雾凇和冰凌美得惊人。p>
						div>
					div>
 
					<div class="jd_card">
						<div class="cardf pre">
							<div class="jd_img" id="jd3">div>
							<h2>杨美古镇h2>
						div>
						<div class="cardf de">
							<p>·始建于宋代，是南宁市明清古建筑保存最为完好的一个古镇。古镇临江，兴盛时有很多码头，是近百公里的商品集散地，如今交通闭塞，商业气息不浓重。p>
						div>
					div>
				div>
 
				<div class="qtjd_content" id="qtjd2">
					<div class="jd_card">
						<div class="cardf pre">
							<div class="jd_img" id="jd4">div>
							<h2>南湖公园h2>
						div>
						<div class="cardf de">
							<p>位于市区东南面青秀区，是一个融水体景观，亚热带园林风光于一体的公园。湖水澄碧，乘船游湖或临湖垂钓，都很惬意。春节、中秋等重大节庆，可欣赏焰火晚会、花灯会、水幕电影等。
							p>
						div>
					div>
					<div class="jd_card">
						<div class="cardf pre">
							<div class="jd_img" id="jd5">div>
							<h2>广西民族博物馆h2>
						div>
						<div class="cardf de">
							<p>广西民族博物馆是建国以来广西壮族自治区建设规模和投资规模最大的文化设施项目。在这可以见识各种奇特铜鼓，回溯其发展历史，感受壮、瑶、侗、毛南等多个少数民族的风俗民情。
							p>
						div>
					div>
					<div class="jd_card">
						<div class="cardf pre">
							<div class="jd_img" id="jd6">div>
							<h2>邕州老街h2>
						div>
						<div class="cardf de">
							<p>邕州老街是位于南宁市 江南大道白沙大桥下（荣和新城后）的历史古街。“城郭四方有水”，这正是唐朝邕州城的特征，至今一谈起邕州，便会联想到悠远的历史古城和深远的水源文化。
							p>
						div>
					div>
 
 
				div>
			div>

 3.4、分享界面

相关代码：

	<li id="li_menu">
				<ul class="share_menu">
					<li class="f"><a href="#">综合a>li>
					<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>
					<li id="i_li"><i class="fas fa-list">i>
						<div id="li_m">
							<ul class="i_menu">
								<li>酒店li>
								<li>亲子li>
								<li>周边游li>
								<li>运动li>
							ul>
							<ul class="i_menu">
								<li>电影li>
								<li>演出li>
								<li>活动li>
								<li>游戏li>
							ul>
							<ul class="i_menu">
								<li>健康li>
								<li>宠物li>
								<li>医疗li>
								<li>养生li>
							ul>
							<ul class="i_menu">
								<li>新店li>
								<li>建设li>
								<li>规划li>
								<li>问答li>
							ul>
						div>
					li>
				ul>
			li>

 3.5、登录注册界面

相关代码：

html>
<html>
 
<head>
	<meta charset="utf-8">
	<title>登录title>
	
	<link rel="icon" href="img/logo.png" sizes="32x32">
	<link rel="stylesheet" type="text/css" href="css/login.css" />
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
	<script src="js/login.js" type="text/javascript" charset="utf-8">script>
 
head>
 
<body>
	<div id="re_index">
		<a href="index.html?login=null">返回首页a>
		<p>账号：coding加油站p>
		<p>密码：123456p>
	div>
 
	<div id="bg" method="post" action="">
		<div id="tab">
			<ul>
				<li id="tab1" class="focus">密码登录li>
				<li id="tab2">免密登录li>
			ul>
		div>
 
 
		<div id="login_content">
			<div id="login1" class="=login">
				<form method="post">
					<input type="text" name="username" id="username" placeholder="手机号/邮箱/用户名" />
					<br>
 
					<input type="password" name="password" id="password" placeholder="密码" />
					<label id="warn">　label>
 
					<span><a href="#">忘记密码?a>span>
					<input type="button" name="submit" id="submit" value="登录" />
				form>
			div>
			<div id="login2" class="=login">
				<form method="post">
					<input type="text" name="phone" id="phone" placeholder="手机号" />
					<br>
					<div id="input_code">
						<input type="text" name="code" id="code" placeholder="输入六位短信验证码" />
						<a href="#">获取验证码a>
					div>
 
					<br>
					<input type="button" name="submit2" id="submit2" value="登录" />
 
				form>
			div>
 
		div>
 
		<div id="login_footer">
			<span>第三方登录span>
			<ul>
				<li><i id="icon1" class="icon">i>li>
				<li><i id="icon2" class="icon">i>li>
				<li><i id="icon3" class="icon">i>li>
			ul>
		div>
 
		<span id="reg">
			没有账号？<a href="reg.html">立即注册a>
		span>
	div>
body>
 
html>

4、代码结构图

总结

以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取