期末html5实训作业《江心屿》

于 2022-01-07 20:26:43 发布
阅读量310 收藏 1
点赞数 1
文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dqx1223/article/details/122371116
版权

日期：2021年12月29日

这个是老师给的要求，

第一次写这玩意，花了一大把时间，写了一大堆bug。

轮播图搞不来，从度娘那里ctrl c + v 来的。

改了好几个版本，最后搞成这样。

源代码里面有很多不规范的地方。。。。。。。。。

 改代码真的是一件令人头秃的事情。。。。。。。。

最后感谢老师不杀之恩，没让我挂科。。。。。。。。。。

图片什么的就不上传了，百度上都有，改个href=" "就好了。

                                                           

至于jquerymobile的样式嘛，自己上网站设计吧，链接在下面:

www.jquerymobile.comjQuery Mobilehttps://jquerymobile.com/

www.themeroller.jquerymobile.com

ThemeRoller | jQuery Mobilehttps://themeroller.jquerymobile.com/                     

 代码放在下面。。。。。。。。。。

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta charset="utf-8" ;http-equiv="content-type" content="text/html" ; />
		<title>江心屿</title>
		<meta name="viewport" content="width=device-width ,initial-scale=0.5" />
		<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="themes/color.min.css" />
		<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
		<!--轮播js-->
		<script src="js/jquery-3.4.1.min.js"></script>
		<!--色块样式-->
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			.metro_color1 {
				background-color: #FF3399;
			}

			.metro_color2 {
				background-color: #479F5E;
			}

			.metro_color3 {
				background-color: #3C25C9;
			}

			.metro_color4 {
				background-color: #FFFF05;
			}

			.metro_rec {
				width: 48%;
				height: 49%;
				float: left;
				margin: 1%;
			}
		</style>
		<!--色块样式-->
		<script>
			$(document).ready(function() {
				var speed = 2000;
				var m = 1;
				var playTimer = setInterval(runPlay, speed);
				function runPlay() {
					if (m > 7) {
						m = 0;
					}
					controlPlay(m);
					m++;
				}
				function controlPlay(n) {
					$("#imgList a").removeClass("current").eq(n).addClass("current");
					$("ul li").removeClass("current").eq(n).addClass("current");
				}
				$("#playBox").mouseenter(function() {
					clearInterval(playTimer);
					$(".sliderbar").fadeIn(300);
				}).mouseleave(function() {
					playTimer = setInterval(runPlay, speed);
					$(".sliderbar").fadeOut(300);
				});
					$("ul li").click(function() {
					controlPlay($(this).index());
					m = $(this).index() + 1;
				}).hover(function() {
					return false;
				})
				$(".sliderbar").hover(function() {
					return false;
				})
				$(".slidebar-right").click(function() {
					if (m > 7) {
						m = 0;
					}
    				controlPlay(m);
					m++;
				})
				$(".slidebar-left").click(function() {
					m -= 2;
					if (m < 0) {
						m = 4;
					}
					controlPlay(m);
					m++;
				})
			});
		</script>
		<style>
			body {
				margin: 0;
				padding: 0;
				font: 16px "微软雅黑", sans-serif;
			}

			.play-box {
				position: relative;
				width: 100%;
				/*自适应*/
				height: auto;
				/*自适应*/
				margin: -10px auto;
				border: 1px solid #ccc;
			}
			.play-box img {
				width: 100%;
				height: 100%;
				border: 0;
			}
			.play-box a {
				display: block;

				overflow: hidden;
	
				opacity: 0;
				
				height: 0;
				
				transition: opacity .5s;
		
			}

			#imgList a.current {
				opacity: 1;
	
				height: auto;
		
			}


			ul {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			ul li {
				width: 10px;
				height: 10px;
				margin: 0 4px;
				font-size: 0;
				border-radius: 50%;
				background-color: #fff;
				cursor: pointer;
				float: left;
			}


			ul li.current {
				background-color: red;
			}

			
			.iconList {
				position: absolute;
				bottom: 10px;
				left: 50%;
				margin-left: -45px;
			}

			
			.sliderbar {
				position: absolute;
				top: 50%;
				margin-top: -25px;
				width: 30px;
				height: 50px;
				font-family: simsun;
				color: #fff;
				text-align: center;
				line-height: 50px;
				background-color: #000;
				opacity: .6;
				display: none;
				cursor: pointer;
			}

			.slidebar-left {
				left: 0;
			}

			
			.slidebar-right {
				right: 0;
			}

			.dqx {
				height: 55px;
			}
		</style>

		<!--对于弹窗和侧拉面板的声明-->
		<script>
			$("mypanel").trigger("updatelayout")
		</script>
		<script>
			$("alert-dialog").trigger("updatelayout")
		</script>
		<!--对于弹窗和侧拉面板的声明-->
	</head>
	<body>
		<div data-role="page" id="home" data-title="江心屿主页">

			<!--侧拉面板-->
			<div data-role="panel" id="myPanel">
				<div data-role="header">
					<h1>这是侧边栏</h1>
				</div>
				<h3 style="text-align: center;">↓↓↓折叠菜单里面有东西↓↓↓<h3>
						<div data-role="collapsible">
							<h3 style="text-align: center;">景点(折叠菜单)</h3>
							<!-- data-inset="true" 添加这个属性可以在这里添加一个间隔距离-->
							<ol data-role="listview" data-inset="true">
								<li><a href="place_1.html" target="_blank">江心寺</a></li>
								<li><a href="place_2.html" target="_blank">浩然楼</a></li>
								<li><a href="place_3.html" target="_blank">江心东塔</a></li>
								<li><a href="place_4.html" target="_blank"></a></li>
								<li><a href="place_5.html" target="_blank">文天祥祠</a></li>
							</ol>
						</div>
						<a href="introduce.html" data-role="button" target="_blank">景点介绍</a>
						<a href="map.html" data-role="button" target="_blank">导览图</a>
						<a href="pic.html" data-role="button" target="_blank">网站架构图</a>
						<a href="#" data-role="button" target="_blank">这个按钮没东西⊙ω⊙</a>
						<a href="#" data-role="button" target="_blank">真的没东西‘（*^﹏^*）′</a>
						<a href="#" data-role="button" target="_blank">相信我没东西\‘▽′/</a>
						<a href="#" data-role="button" target="_blank">真的真的没东西╮╯3╰╭ </a>

			</div>
			<!--侧拉面板-->

			<!--页面-->
			<div data-role="header" data-position="fixed" style="text-align:center" data-tap-toggle="false">
				<a href="#myPanel" data-role="button" data-icon="arrow-l">侧边栏(点这里)</a>
				<h1>江心屿首页</h1>
				<a href="#alert-dialog" data-role="button" data-inline="true" data-icon="arrow-r">这里有弹窗</a>
			</div>
			<!--页面头部-->

			<!--页面内容-->
			<div data-role="content">
				<h6 style="text-align: center;font-size: 50px;">江心屿</h6>
				<!--搜索框-->
				<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
				</ul>
				<!--搜索框-->
				<br />
				<!--轮播html部分-->
				<div>
					<!--轮播图边框-->
					<div id="playBox" class="play-box">
						<!--图片列表-->
						<div id="imgList">
							<a href="#" target="_blank" class="current">
								<img src="img/homepic/1.jpeg" />
							</a>
							<a href="#" target="_blank">
								<img src="img/homepic/2.jpeg" />
							</a>
							<a href="#" target="_blank">
								<img src="img/homepic/3.jpeg" />
							</a>
							<a href="#" target="_blank">
								<img src="img/homepic/4.jpeg" />
							</a>
							<a href="#" target="_blank">
								<img src="img/homepic/5.jpeg" />
							</a>
							<a href="#" target="_blank">
								<img src="img/homepic/6.jpeg" />
							</a>
							<a href="#" target="_blank">
								<img src="img/homepic/7.jpeg" />
							</a>
							<a href="#" target="_blank">
								<img src="img/homepic/8.jpeg" />
							</a>
						</div>
						<!--图标列表-->
						<div class="iconList">
							<ul>
								<li class="current">1</li>
								<li>2</li>
								<li>3</li>
								<li>4</li>
								<li>5</li>
								<li>6</li>
								<li>7</li>
								<li>8</li>
							</ul>
						</div>
						<!--左箭头-->
						<div class="sliderbar slidebar-left">
							< </div>
								<!--右箭头-->
								<div class="sliderbar slidebar-right">></div>
						</div>
						<!--轮播html部分-->
						<!--色块-->
						<div data-role="main_pic">
							<img src="images/top.jpg" width="100%" height="100%" />
						</div>
						<div data-role="metro_body">
							<div class="metro_color1 metro_rec">
								<a href="introduce.html" target="_blank">
								<img src="img/ps2.png" width="100%" height="100%" />
								</a>
							</div>
							<div class="metro_color2 metro_rec">
								<a  href="#myPanel">
								<img src="img/ps1.png" width="100%" height="100%" />
								</a>
							</div>
							<div class="metro_color3 metro_rec">
								<a href="pic.html" target="_blank">
								<img src="img/ps3.jpgs.png" width="100%" height="100%" />
								</a>
							</div>
							<div class="metro_color4 metro_rec">
								<a href="map.html" target="_blank">
								<img src="img/ps4.png" width="100%" height="100%" />
								</a>
							</div>
						</div>
						<!--色块-->
					</div>
					<!--页面-->
					<!--页面底部-->
					<div data-role="footer" data-position="fixed" data-fullscreen="true" style="text-align:center"
						data-tap-toggle="false" class="dqx">
						<div data-role="navbar">
							<ul>
								<li><a id="home" href="#" data-icon="home" data-theme="b" target="_blank">首页</a>
								</li>
								<li><a id="collection" href="index.html" data-icon="refresh" data-theme="b"
										target="_blank">刷新</a></li>
								<li><a id="seacher" href="map.html" data-icon="search" data-theme="b"
										target="_blank">导览图</a></li>
								<li><a id="aboutme" href="pic.html" data-icon="info" data-theme="b"
										target="_blank">网站架构图</a></li>
							</ul>
						</div>
					</div>
				</div>
				<!--页面底部-->
			</div>
	</body>
	<footer>
	</footer>
	<!--以下为弹窗内容-->
	<a href="#alert-dialog" data-role="button" data-inline="true"></a>
	<div data-role="dialog" id="alert-dialog">
		<div data-role="header">
			<h1 style="font-size: 20px;">更多</h1>
		</div>
		<div data-role="content">
			<div>
				<img src="img/headpic.jpg" width="100%" />
			</div>
			<h1>制作者：樱花于雪与你</h1>
			<h1>202103070514</h1>
			<h1>QQ:239401486</h1>
			<h1>VX:AI-172809482837</h1>
			<h1>邮箱：239401486@qq.com</h1>
			<p></p>
			<a data-role="button" href="index.html">确定</a>
		</div>
	</div>
	<!--以上为弹窗内容-->


</html>

介绍页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta charset="utf-8" ;http-equiv="content-type" content="text/html" ; />
		<title>江心屿</title>
		<meta name="viewport" content="width=device-width ,initial-scale=0.5" />
		<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="themes/color.min.css" />
		<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
		<!--对于弹窗和侧拉面板的声明-->
		<script>
			$("mypanel").trigger("updatelayout")
		</script>
		<script>
			$("alert-dialog").trigger("updatelayout")
		</script>
		<!--对于弹窗和侧拉面板的声明-->
	</head>

	<body>
		<!--页面-->
		<div data-role="page" id="home" data-title="江心屿主页">

			<!--头部栏-->
			<div data-role="header" data-position="fixed" style="text-align:center" data-tap-toggle="false">
				<a href="index.html" data-role="button" data-inline="true" data-icon="back" target="_blank">返回</a>
				<h1>介绍</h1>
				<a href="#alert-dialog" data-role="button" data-inline="true" data-icon="arrow-r">这里有弹窗</a>
			</div>
			<!--头部栏-->
			<!--内容-->
			<div>
				<div data-role="content">
					<h1 style="text-align: center;font-size: 35px;;">江心屿介绍</h1>
					<br />
					
			</div>
			<!--内容-->
			<!--底部栏-->
			<div data-role="footer" data-position="fixed" data-fullscreen="true" style="text-align:center"
				data-tap-toggle="false" class="dqx">
				<div data-role="navbar">
					<ul>
						<li><a id="home" href="index.html" data-icon="home" data-theme="b" target="_blank">首页</a>
						</li>
						<li><a id="collection" href="introduce.html" data-icon="refresh" data-theme="b"
								target="_blank">刷新</a></li>
						<li><a id="seacher" href="map.html" data-icon="search" data-theme="b" target="_blank">导览图</a>
						</li>
						<li><a id="aboutme" href="pic.html" data-icon="info" data-theme="b" target="_blank">网站架构图</a>
						</li>
					</ul>
				</div>
			</div>
			<!--底部栏-->
		</div>
		<!--页面-->

	</body>
	<!--以下为弹窗内容-->
	<a href="#alert-dialog" data-role="button" data-inline="true"></a>
	<div data-role="dialog" id="alert-dialog">
		<div data-role="header">
			<h1 style="font-size: 20px;">更多</h1>
		</div>
		<div data-role="content">
			<div>
				<img src="img/headpic.jpg" width="100%" />
			</div>
			<h1>制作者：樱花于雪与你</h1>
			<h1>202103070514</h1>
			<h1>QQ:239401486</h1>
			<h1>VX:AI-172809482837</h1>
			<h1>邮箱：239401486@qq.com</h1>
			<p></p>
			<a data-role="button" href="introduce.html">确定</a>
		</div>
	</div>
	<!--以上为弹窗内容-->

</html>

几个景点的代码

我就合一起了，五个页面都是一个框架。内容就不放出来了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta charset="utf-8" ;http-equiv="content-type" content="text/html" ; />
		<title>江心屿</title>
		<meta name="viewport" content="width=device-width ,initial-scale=0.5" />
		<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="themes/color.min.css" />
		<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

		<!--对于弹窗和侧拉面板的声明-->
		<script>
			$("mypanel").trigger("updatelayout")
		</script>
		<script>
			$("alert-dialog").trigger("updatelayout")
		</script>
		<!--对于弹窗和侧拉面板的声明-->
	</head>

	<body>
		<!--页面-->
		<div data-role="page" id="home" data-title="江心屿主页">
			<!--头部栏-->
			<div data-role="header" data-position="fixed" style="text-align:center" data-tap-toggle="false">
				<a href="index.html" data-role="button" data-inline="true" data-icon="arrow-l" target="_blank">返回</a>
				<h1>江心寺</h1>
				<a href="#alert-dialog" data-role="button" data-inline="true" data-icon="arrow-r">这里有弹窗</a>
			</div>
			<!--头部栏-->
			<!--内容-->
			<div>
				<div data-role="content">
					<h1 style="text-align: center;">江心寺</h1>

			</div>

			<!--内容-->
			<!--底部栏-->
			<div data-role="footer" data-position="fixed" data-fullscreen="true" style="text-align:center"
				data-tap-toggle="false" class="dqx">
				<div data-role="navbar">
					<ul>
						<li><a id="home" href="index.html" data-icon="home" data-theme="b" target="_blank">首页</a>
						</li>
						<li><a id="collection" href="place_1.html" data-icon="refresh" data-theme="b"
								target="_blank">刷新</a></li>
						<li><a id="seacher" href="map.html" data-icon="search" data-theme="b" target="_blank">导览图</a>
						</li>
						<li><a id="aboutme" href="pic.html" data-icon="info" data-theme="b" target="_blank">网站架构图</a>
						</li>
					</ul>
				</div>
			</div>
			<!--底部栏-->
		</div>
		<!--页面-->
	</body>
	<!--以下为弹窗内容-->
	<a href="#alert-dialog" data-role="button" data-inline="true"></a>
	<div data-role="dialog" id="alert-dialog">
		<div data-role="header">
			<h1 style="font-size: 20px;">更多</h1>
		</div>
		<div data-role="content">
			<div>
				<img src="img/headpic.jpg" width="100%" />
			</div>
			<h1>制作者：樱花于雪与你</h1>
			<h1>202103070514</h1>
			<h1>QQ:239401486</h1>
			<h1>VX:AI-172809482837</h1>
			<h1>邮箱：239401486@qq.com</h1>
			<p></p>
			<a data-role="button" href="place_1.html">确定</a>
		</div>
	</div>
	<!--以上为弹窗内容-->

</html>

map

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta charset="utf-8" ;http-equiv="content-type" content="text/html" ; />
		<title>江心屿</title>
		<meta name="viewport" content="width=device-width ,initial-scale=0.5" />
		<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="themes/color.min.css" />
		<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

		<!--对于弹窗和侧拉面板的声明-->
		<script>
			$("mypanel").trigger("updatelayout")
		</script>
		<script>
			$("alert-dialog").trigger("updatelayout")
		</script>
		<!--对于弹窗和侧拉面板的声明-->
	</head>

	<body>
		<!--页面-->
		<div data-role="page" id="home" data-title="江心屿主页">
			<!--弹窗内容-->
			<div data-role="panel" id="myPanel">
				<h2></h2>
				<p></p>
			</div>
			<!--弹窗内容-->
			<!--头部栏-->
			<div data-role="header" data-position="fixed" style="text-align:center" data-tap-toggle="false">
				<a href="index.html" data-role="button" data-inline="true" data-icon="back" target="_blank">返回</a>
				<h1>网站架构图</h1>
				<a href="#alert-dialog" data-role="button" data-inline="true" data-icon="arrow-r">这里有弹窗</a>
			</div>
			<!--头部栏-->
			<!--内容-->
			<div data-role="content">
				<img src="img/pic.png" width="100%">
			</div>

			<!--内容-->
			<!--底部栏-->
			<div data-role="footer" data-position="fixed" data-fullscreen="true" style="text-align:center"
				data-tap-toggle="false" class="dqx">
				<div data-role="navbar">
					<ul>
						<li><a id="home" href="index.html" data-icon="home" data-theme="b" target="_blank">首页</a>
						</li>
						<li><a id="collection" href="pic.html" data-icon="refresh" data-theme="b" target="_blank">刷新</a>
						</li>
						<li><a id="seacher" href="map.html" data-icon="search" data-theme="b" target="_blank">导览图</a>
						</li>
						<li><a id="aboutme" href="pic.html" data-icon="info" data-theme="b" target="_blank">网站架构图</a>
						</li>
					</ul>
				</div>
			</div>
			<!--底部栏-->
		</div>
		<!--页面-->
	</body>
	<!--以下为弹窗内容-->
	<a href="#alert-dialog" data-role="button" data-inline="true"></a>
	<div data-role="dialog" id="alert-dialog">
		<div data-role="header">
			<h1 style="font-size: 20px;">更多</h1>
		</div>
		<div data-role="content">
			<div>
				<img src="img/headpic.jpg" width="100%" />
			</div>
			<h1>制作者：樱花于雪与你</h1>
			<h1>202103070514</h1>
			<h1>QQ:239401486</h1>
			<h1>VX:AI-172809482837</h1>
			<h1>邮箱：239401486@qq.com</h1>
			<p></p>
			<a data-role="button" href="pic.html">确定</a>
		</div>
	</div>
	<!--以上为弹窗内容-->

</html>

 导览

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta charset="utf-8" ;http-equiv="content-type" content="text/html" ; />
		<title>江心屿</title>
		<meta name="viewport" content="width=device-width ,initial-scale=0.5" />
		<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="themes/color.min.css" />
		<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

		<!--对于弹窗和侧拉面板的声明-->
		<script>
			$("mypanel").trigger("updatelayout")
		</script>
		<script>
			$("alert-dialog").trigger("updatelayout")
		</script>
		<!--对于弹窗和侧拉面板的声明-->
	</head>

	<body>
		<!--页面-->
		<div data-role="page" id="home" data-title="江心屿主页">

			<!--弹窗内容-->
			<div data-role="panel" id="myPanel">
				<h2></h2>
				<p></p>
			</div>
			<!--弹窗内容-->
			<!--头部栏-->
			<div data-role="header" data-position="fixed" style="text-align:center" data-tap-toggle="false">
				<a href="index.html" data-role="button" data-inline="true" data-icon="back" target="_blank">返回</a>
				<h1>导览图</h1>
				<a href="#alert-dialog" data-role="button" data-inline="true" data-icon="arrow-r">这里有弹窗</a>
			</div>
			<!--头部栏-->
			<!--内容栏-->
			<div data-role="content">
				<!--导览图地图-->
				<div>
					<img src="img/map.jpg" width="100%">
				</div>
				<a href="place_1.html" data-role="button" target="_blank">江心寺</a>
				<a href="place_2.html" data-role="button" target="_blank">浩然楼</a>
				<a href="place_3.html" data-role="button" target="_blank">江心东塔</a>
				<a href="place_4.html" data-role="button" target="_blank"></a>
				<a href="place_5.html" data-role="button" target="_blank">文天祥祠</a>
				<!--导览图地图-->
			</div>
			<!--内容栏-->
			<!--底部栏-->
			<div data-role="footer" data-position="fixed" data-fullscreen="true" style="text-align:center"
				data-tap-toggle="false" class="dqx">
				<div data-role="navbar">
					<ul>
						<li><a id="home" href="index.html" data-icon="home" data-theme="b" target="_blank">首页</a>
						</li>
						<li><a id="collection" href="map.html" data-icon="refresh" data-theme="b" target="_blank">刷新</a>
						</li>
						<li><a id="seacher" href="map.html" data-icon="search" data-theme="b" target="_blank">导览图</a>
						</li>
						<li><a id="aboutme" href="pic.html" data-icon="info" data-theme="b" target="_blank">网站架构图</a>
						</li>
					</ul>
				</div>
			</div>
			<!--底部栏-->
		</div>
		<!--页面-->
	</body>
	<!--以下为弹窗内容-->
	<a href="#alert-dialog" data-role="button" data-inline="true"></a>
	<div data-role="dialog" id="alert-dialog">
		<div data-role="header">
			<h1 style="font-size: 20px;">更多</h1>
		</div>
		<div data-role="content">
			<div>
				<img src="img/headpic.jpg" width="100%" />
			</div>
			<h1>制作者：樱花于雪与你</h1>
			<h1>202103070514</h1>
			<h1>QQ:239401486</h1>
			<h1>VX:AI-172809482837</h1>
			<h1>邮箱：239401486@qq.com</h1>
			<p></p>
			<a data-role="button" href="map.html">确定</a>
		</div>
	</div>
	<!--以上为弹窗内容-->

</html>

纯新手，代码里有一大堆问题，基本浏览没有问题，实训时间紧，能力有限。。。。。。

樱花于雪与你
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

樱花于雪与你

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

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

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

打赏作者

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

抵扣说明：

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

余额充值