前端模板——家乡风景的介绍

已于 2022-10-26 22:11:35 修改
阅读量1.2k 收藏 24
点赞数 3
分类专栏： 前端 文章标签： html css jquery javascript bootstrap
于 2022-06-22 19:20:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60483918/article/details/125400370
版权

目录 

 

首页

首页部分之一

首页部分之二 

首页部分之三

首页部分之四

宿州历史页面 

 宿州美食页面

宿州民宿页面

 跟着我页面（宿州宣传页面）

 联系我们页面

前言

（1）本博客以HTML为主体框架，css修饰内容，JavaScript设置动态特效，引用了jQuery，bootstrap，swiper框架中的一些代码，可供初学者学习。

（2）本博客实现的功能有图片的轮播效果，返回顶部，留言板功能，图片翻转特效等，具体实现可查看给出的代码。

（3）本博客设计的难点在于块状元素的相互嵌套，css样式的优先级顺序、排列，Javastrip特效的编写，相关框架代码的配合使用。

首页

首页部分之一

b62296a81a6f4b7e8b027c9fa1c8d6ed.png

首页部分之二 

6a544ed9f33c4e7291c33468e3da0e9a.png

首页部分之三

1ae7727ac76849988371760940c2de21.png

首页部分之四

32d19a1fae5849779d345e30a9039dec.png

首页划分为五个部分  导航栏 轮播区域 风景展示区域 版权区 返回顶部

1.导航栏制作流程

（1）先规定好导航栏的宽高（div） ，再采用无序列表嵌套a标签

（2）清空无序列表的原有样式，设置新的样式

（3）设置超链接点击状态的相关样式

2.轮播区域

（1）单独设置两大块（div）的样式

（2）使用bootstrap框架及swiper框架嵌套到块状标签中

3.风景展示区域

（1）直接使用bootstrap框架中的代码

4.版权区

（1）规定相应的宽高，划分区域完成相应写入

（2）注意其与每个块状元素之间的关系

5.返回顶部

（1）先设置锚点

（2）通过JavaScript计算浏览器的距离，设置显示返回顶部的距离及返回顶部的速度等

<!DOCTYPE HTML>
<html>
<head>
<title>跟我来</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />	
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.1.min.js"> </script>	
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>		
</head>
<body>
	<!-- banner -->
	<div class="banner a-banner">
		<!-- container -->
		<div class="container">
			<div class="header">
				<div class="logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<div class="icons">
					<ul>
						<li><a href="#" class="facebook chrome"> </a></li>
						<li><a href="#" class="facebook dribbble"> </a></li>
						<li><a href="#" class="facebook"> </a></li>
						<li><a href="#" class="facebook twitter"> </a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="top-nav">
					<span class="menu">菜单</span>
					<ul class="nav1">
						<li><a href="index.html" class="active">宿州简介</a></li>
						<li><a href="history.html">文化历史</a></li>
						<li><a href="accomdation.html">住宿</a></li>
						<li><a href="food.html">宿州美食</a></li>
						<li><a href="contact.html">联系我们</a></li>
					</ul>
					<!-- script-for-menu -->
						<script>
							 $( "span.menu" ).click(function() {
							$( "ul.nav1" ).slideToggle( 300, function() {
							// Animation complete.
								});
								});
						</script>
					<!-- /script-for-menu -->
			</div>
		</div>
		<!-- //container -->
	</div>	
	<!-- //banner -->
	<!-- about -->
	<!-- about-top -->
	<div class="about-top">
		<!-- container -->
		<div class="container">
			<div class="about-info">
				<h3>宿州宣传片</h3>
				<p>航拍</p>
			</div>
			<div class="mov-liu">
				<object data="video/wu.mp4" height="600px" width="100%"></object>
            </div>
		</div>
		<!-- //container -->
	</div>
	<!-- //about-top -->
	<!-- about-team -->
	<div class="about-team">
			<!-- container -->
			<div class="container">
				<h4>游玩攻略</h4>
				<div class="team-grids">
					<div class="col-md-3 team-grid">
						<img src="images/皇藏峪国家森林公园.jpg" alt="">
						<h6>皇藏峪国家森林公园</h6>
						<p>皇藏峪有“天然氧吧”之称，最高峰飞机场景点，海拔高度约398米。是收复外蒙古将领徐树铮的故里，也是地球同纬度保存非常完好的落叶阔叶林带，景区总面积约39.5平方千米，有森林面积约3100多亩，木本植物约199种，树木约146种，中草药约700多种，鸟类和野生动物约58种。是江北罕见的暖温带落叶阔叶林区、亚热带和暖温带交汇地带，为皖北地区保存非常完整的原始森林。</p>
					</div>
					<div class="col-md-3 team-grid">
						<img src="images/高皇山.jpg" alt="">
						<h6>高皇山</h6>
						<p>湖边两岸连山，重重似画，因为湖面狭长，水色如碧，这里又有宿州“小三峡”和“小黄山”之称。蓝绿色的池水，沉静的水面仿佛一块美玉，倒映着两边的岩壁。是个一秒出大片的地方。</p>
					</div>
					<div class="col-md-3 team-grid">
						<img src="images/绿地衢坊街.jpg" alt="">
						<h6>绿地衢坊街</h6>
						<p>>如果做高铁来宿州，出了宿州东站，不妨去旁边的绿地衢坊街留宿一晚，看看夜景。现代灯光技术加上仿古建筑，让人仿佛身在梦中。</p>
					</div>
					<div class="col-md-3 team-grid">
						<img src="images/宿州新汴河.jpg" alt="">
						<h6>宿州新汴河</h6>
						<p>柏全山位于瓜园则湾乡政府驻地南3公里处。据传说，此山曾有4株枝叶繁茂的大柏树，故名柏全山。柏全山北高南低，山巅上有一古庙，主奉天皇、地皇、人皇，简称为“三皇庙”。坐北面南，正殿为三孔硬山形顶拱式砖窑，整个寺院虽然面积不大，但布局合理，层次分明，有泥塑五十余尊，保持有晚清风格。</p>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<!-- //container -->
	</div>
	<!-- //about-team -->
	<!-- footer -->
	<div class="footer">
		<!-- container -->
		<div class="container">
			<div class="col-md-6 footer-left">
				<h3>联系我们</h3>
				<form>
					<input type="text" placeholder="电子邮件,例如1435469178@qq.com" required="">
					<input type="submit" value="提交">
				</form>
			</div>
			<div class="col-md-3 footer-middle">
				<h3>地址</h3>
				<div class="address">
					<p>安徽宿州
						<span>安徽省北部</span>
					</p>
				</div>
				<div class="phone">
					<p>0573-88731088</p>
				</div>
			</div>   
			<div class="col-md-3 footer-right">
				<div class="f-logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<p>安徽省北部</p>
			</div>
			<div class="clearfix"> </div>	
		</div>
		<!-- //container -->
	</div>
	<!-- //footer -->
	<!-- copyright -->
	<div class="copyright">
		<!-- container -->
		<div class="container">
			<div class="copyright-left">
				<p>Copyright &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p>
			</div>
		</div>
		<!-- //container -->
	</div>
	<!-- copyright -->
</body>
</html>

宿州历史页面 

295d51ee18794e7a99d86db927a317a5.png

<!DOCTYPE HTML>
<html>
<head>
<title>文化历史</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />	
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.1.min.js"> </script>	
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>		
</head>
<body>
	<!-- banner -->
	<div class="banner a-banner">
		<!-- container -->
		<div class="container">
			<div class="header">
				<div class="logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<div class="icons">
					<ul>
						<li><a href="#" class="facebook chrome"> </a></li>
						<li><a href="#" class="facebook dribbble"> </a></li>
						<li><a href="#" class="facebook"> </a></li>
						<li><a href="#" class="facebook twitter"> </a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="top-nav">
					<span class="menu">菜单</span>
					<ul class="nav1">
						<li><a href="index.html" class="active">宿州简介</a></li>
						<li><a href="history.html">文化历史</a></li>
						<li><a href="accomdation.html">住宿</a></li>
						<li><a href="food.html">宿州美食</a></li>
						<li><a href="contact.html">联系我们</a></li>
					</ul>
					<!-- script-for-menu -->
						<script>
							 $( "span.menu" ).click(function() {
							$( "ul.nav1" ).slideToggle( 300, function() {
							// Animation complete.
								});
								});
						</script>
					<!-- /script-for-menu -->
			</div>
		</div>
		<!-- //container -->
	</div>	
	<!-- //banner -->
	<!-- about-team -->
		<!-- //container -->
	<!-- //about-team -->
	<!-- about-bottom -->
	<div class="about-bottom">
		<!-- container -->
		<div class="container">
			<h3>宿州历史沿革</h3>
			<div class="about-bottom-grids">
				<div class="col-md-6 about-bottom-left">
					<h4>名字由来</h4>
					<p>春秋时期“宋国迁宿国于此”是“宿州”的地名
						<span>地处安徽省北部，位于长江三角洲地区，是安徽距离出海口最近的城市 。宿州介于东经116°09′—118°10′、北纬33°18′—34°38′之间，襟临沿海，东、东北与宿迁和徐州接壤，南临蚌埠，西至西北与淮北、商丘和菏泽相邻  。截至2021年，宿州市下辖1个市辖区、4个县，总面积9939平方千米。截至2020年11月1日，宿州市常住人口5324476人</span>
					</p>
				</div>
				<div class="col-md-6 about-bottom-left about-bottom-right">
					<h4>演变历史</h4>
					<p>
						宿州是楚汉文化、淮河文化的重要发源地。宿州有蕲县古城遗址、小山口遗址、古台寺遗址。周朝时期，始建蕲邑。隋唐时期，因京杭大运河通济渠（汴河）段开通，置宿州  。北宋文学家苏轼在《南乡子·宿州上元》中，称宿州为“此去淮南第一州” 。

					</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<!-- //container -->
	</div>
	<!-- //about-bottom -->
	<!-- footer -->
	<div class="footer">
		<!-- container -->
		<div class="container">
			<div class="col-md-6 footer-left">
				<h3>联系我们</h3>
				<form>
					<input type="text" placeholder="电子邮件,例如1435469178@qq.com" required="">
					<input type="submit" value="提交">
				</form>
			</div>
			<div class="col-md-3 footer-middle">
				<h3>地址</h3>
				<div class="address">
					<p>安徽宿州
						<span>安徽省北部</span>
					</p>
				</div>
				<div class="phone">
					<p>0573-88731088</p>
				</div>
			</div>   
			<div class="col-md-3 footer-right">
				<div class="f-logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<p>安徽省北部</p>
			</div>
			<div class="clearfix"> </div>	
		</div>
		<!-- //container -->
	</div>
	<!-- //footer -->
	<!-- copyright -->
	<div class="copyright">
		<!-- container -->
		<div class="container">
			<div class="copyright-left">
				<p>Copyright &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p>
			</div>
		</div>
		<!-- //container -->
	</div>
	<!-- copyright -->
</body>
</html>

 宿州美食页面

2e383b2cb5f74c558ac591e7673715b5.png

 bootstrap框架的引用及相关标签的使用，jQuery动态特效的接入

<!DOCTYPE HTML>
<html>
<head>
<title>宿州美食</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />	
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.1.min.js"> </script>	
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>		
</head>
<body>
	<!-- banner -->
	<div class="banner a-banner">
		<!-- container -->
		<div class="container">
			<div class="header">
				<div class="logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<div class="icons">
					<ul>
						<li><a href="#" class="facebook chrome"> </a></li>
						<li><a href="#" class="facebook dribbble"> </a></li>
						<li><a href="#" class="facebook"> </a></li>
						<li><a href="#" class="facebook twitter"> </a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="top-nav">
					<span class="menu">菜单</span>
					<ul class="nav1">
						<li><a href="index.html" class="active">宿州简介</a></li>
						<li><a href="history.html">文化历史</a></li>
						<li><a href="accomdation.html">住宿</a></li>
						<li><a href="food.html">宿州美食</a></li>
						<li><a href="contact.html">联系我们</a></li>
					</ul>
					<!-- script-for-menu -->
						<script>
							 $( "span.menu" ).click(function() {
							$( "ul.nav1" ).slideToggle( 300, function() {
							// Animation complete.
								});
								});
						</script>
					<!-- /script-for-menu -->
			</div>
		</div>
		<!-- //container -->
	</div>	
	<!-- //banner -->
	<!-- gallery -->
	<div class="gallery-top">
		<!-- container -->
		<div class="container">
			<div class="gallery-info">
				<h3>宿州美食一览</h3>
				<p>那么多的美食,你心动了吗?</p>
			</div>
			<div class="gallery-grids-top">
				<div class="gallery-grids">
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food1.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food1.jpg" alt=""/></a>
					</div>
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food2.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food2.jpg" alt=""/></a>
					</div>
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food3.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food3.jpg" alt=""/></a>
					</div>
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food4.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food4.jpg" alt=""/></a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="gallery-grids gallery-grids-middle">
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food5.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food5.jpg" alt=""/></a>
					</div>
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food6.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food6.jpg" alt=""/></a>
					</div>
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food7.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food7.jpg" alt=""/></a>
					</div>
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food8.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food8.jpg" alt=""/></a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="gallery-grids">
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food9.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food9.jpg" alt=""/></a>
					</div>
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food10.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food10.jpg" alt=""/></a>
					</div>
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food11.jpeg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food11.jpeg" alt=""/></a>
					</div>
					<div class="col-md-3 gallery-grid">
						<a class="example-image-link" href="images/food12.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food12.jpg" alt=""/></a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<script src="js/lightbox-plus-jquery.min.js"></script>
			</div>
		</div>
		<!-- //container -->
	</div>
	<!-- //gallery -->
	<!-- footer -->
	<div class="footer">
		<!-- container -->
		<div class="container">
			<div class="col-md-6 footer-left">
				<h3>联系我们</h3>
				<form>
					<input type="text" placeholder="电子邮件,例如1435469178@qq.com" required="">
					<input type="submit" value="提交">
				</form>
			</div>
			<div class="col-md-3 footer-middle">
				<h3>地址</h3>
				<div class="address">
					<p>安徽宿州
						<span>安徽省北部</span>
					</p>
				</div>
				<div class="phone">
					<p>0573-88731088</p>
				</div>
			</div>   
			<div class="col-md-3 footer-right">
				<div class="f-logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<p>安徽省北部</p>
			</div>
			<div class="clearfix"> </div>	
		</div>
		<!-- //container -->
	</div>
	<!-- //footer -->
	<!-- copyright -->
	<div class="copyright">
		<!-- container -->
		<div class="container">
			<div class="copyright-left">
				<p>Copyright &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p>
			</div>
		</div>
		<!-- //container -->
	</div>
	<!-- copyright -->
</body>
</html>

宿州民宿页面

 2b2b04a382514c3e9e2c382deafe5475.png

e939d153579c455fa36a2542f0efc243.png

 bootstrap框架的引用及相关标签的使用

<!DOCTYPE HTML>
<html>
<head>
<title>住宿</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />	
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.1.min.js"> </script>	
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>		
</head>
<body>
	<!-- banner -->
	<div class="banner a-banner">
		<!-- container -->
		<div class="container">
			<div class="header">
				<div class="logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<div class="icons">
					<ul>
						<li><a href="#" class="facebook chrome"> </a></li>
						<li><a href="#" class="facebook dribbble"> </a></li>
						<li><a href="#" class="facebook"> </a></li>
						<li><a href="#" class="facebook twitter"> </a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="top-nav">
					<span class="menu">菜单</span>
					<ul class="nav1">
						<li><a href="index.html" class="active">宿州简介</a></li>
						<li><a href="history.html">文化历史</a></li>
						<li><a href="accomdation.html">住宿</a></li>
						<li><a href="food.html">宿州美食</a></li>
						<li><a href="contact.html">联系我们</a></li>
					</ul>
					<!-- script-for-menu -->
						<script>
							 $( "span.menu" ).click(function() {
							$( "ul.nav1" ).slideToggle( 300, function() {
							// Animation complete.
								});
								});
						</script>
					<!-- /script-for-menu -->
			</div>
		</div>
		<!-- //container -->
	</div>	
	<!-- //banner -->
	<!-- about -->
	<!-- about-top -->
	<div class="about-top">
		<!-- container -->
		<div class="container">
			<div class="about-info">
				<h3>宿州民宿</h3>
			</div>
			<div class="about-top-grids">
				<div class="col-md-8 about-top-grid">
					<h4>宿州民宿或面水或临街</h4>
					<p>规模：&nbsp;客房形式多样，每间客房都配有现代化的生活设施，统一规范经营，房东亲情服务，在古老的砖木瓦房中尽享现代生活的安逸<br/>房型：&nbsp;标准双人房、大床房、三人间、家庭房、自助房<br/>设施：&nbsp;内部配套设施：独立卫浴、分体式空调、24小时热水、卫浴用品、电话、直饮水、保险箱、磁卡门锁、数字电视、Wifi网络、免费瓶装水；<br/>价位：￥320/间&nbsp;起
					</p>
				</div>
				<div class="col-md-4 about-top-grid">
					<img src="images/su1.PNG"   alt="" />
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<!-- //container -->
	</div>
	<!-- //about-top -->
	<!-- about-team -->
	<div class="about-team">
			<!-- container -->
			<div class="container">
				<h4>精品酒店</h4>
				<div class="team-grids">
					<div class="col-md-3 team-grid">
						<img src="images/su2.PNG" alt="">
						<h6>宜园精品酒店</h6>
						<p>高级标间、园林大床、高级大床、豪华大床、双人浪漫套房、行政套房、双人浪漫豪华套房</p>
					</div>
					<div class="col-md-3 team-grid">
						<img src="images/su3.PNG" alt="">
						<h6>锦堂行馆</h6>
						<p>高级大床房、豪华大床房、豪华套房、中央套房</p>
					</div>
					<div class="col-md-3 team-grid">
						<img src="images/su4.PNG" alt="">
						<h6>望津里精品酒店</h6>
						<p>高级标间、大床房、浪漫双人套房</p>
					</div>
					<div class="col-md-3 team-grid">
						<img src="images/su5.PNG" alt="">
						<h6>枕水度假酒店</h6>
						<p>标准间、大床房、套房、民宿二房套A、民宿二房套B、民宿三房套A、民宿标间、民宿四房套、民宿大床、总统套房、司陪标间</p>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<!-- //container -->
	</div>
	<!-- //about-team -->
	<div class="footer">
		<!-- container -->
		<div class="container">
			<div class="col-md-6 footer-left">
				<h3>联系我们</h3>
				<form>
					<input type="text" placeholder="电子邮件,例如1435469178@qq.com" required="">
					<input type="submit" value="提交">
				</form>
			</div>
			<div class="col-md-3 footer-middle">
				<h3>地址</h3>
				<div class="address">
					<p>安徽宿州
						<span>安徽省北部</span>
					</p>
				</div>
				<div class="phone">
					<p>0573-88731088</p>
				</div>
			</div>   
			<div class="col-md-3 footer-right">
				<div class="f-logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<p>安徽省北部</p>
			</div>
			<div class="clearfix"> </div>	
		</div>
		<!-- //container -->
	</div>
	<!-- //footer -->
	<!-- copyright -->
	<div class="copyright">
		<!-- container -->
		<div class="container">
			<div class="copyright-left">
				<p>Copyright &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p>
			</div>
		</div>
		<!-- //container -->
	</div>
	<!-- copyright -->
</body>
</html>

 跟着我页面（宿州宣传页面）

 1517509438f649b08cbe6cf95f9a6d85.png

3d760ffcd23e47808b6c952d78a9068c.png

bootstrap框架的引用及相关标签的使用

<!DOCTYPE HTML>
<html>
<head>
<title>跟我来</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />	
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.1.min.js"> </script>	
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>		
</head>
<body>
	<!-- banner -->
	<div class="banner a-banner">
		<!-- container -->
		<div class="container">
			<div class="header">
				<div class="logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<div class="icons">
					<ul>
						<li><a href="#" class="facebook chrome"> </a></li>
						<li><a href="#" class="facebook dribbble"> </a></li>
						<li><a href="#" class="facebook"> </a></li>
						<li><a href="#" class="facebook twitter"> </a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="top-nav">
					<span class="menu">菜单</span>
					<ul class="nav1">
						<li><a href="index.html" class="active">宿州简介</a></li>
						<li><a href="history.html">文化历史</a></li>
						<li><a href="accomdation.html">住宿</a></li>
						<li><a href="food.html">宿州美食</a></li>
						<li><a href="contact.html">联系我们</a></li>
					</ul>
					<!-- script-for-menu -->
						<script>
							 $( "span.menu" ).click(function() {
							$( "ul.nav1" ).slideToggle( 300, function() {
							// Animation complete.
								});
								});
						</script>
					<!-- /script-for-menu -->
			</div>
		</div>
		<!-- //container -->
	</div>	
	<!-- //banner -->
	<!-- about -->
	<!-- about-top -->
	<div class="about-top">
		<!-- container -->
		<div class="container">
			<div class="about-info">
				<h3>宿州宣传片</h3>
				<p>航拍</p>
			</div>
			<div class="mov-liu">
				<object data="video/wu.mp4" height="600px" width="100%"></object>
            </div>
		</div>
		<!-- //container -->
	</div>
	<!-- //about-top -->
	<!-- about-team -->
	<div class="about-team">
			<!-- container -->
			<div class="container">
				<h4>游玩攻略</h4>
				<div class="team-grids">
					<div class="col-md-3 team-grid">
						<img src="images/皇藏峪国家森林公园.jpg" alt="">
						<h6>皇藏峪国家森林公园</h6>
						<p>皇藏峪有“天然氧吧”之称，最高峰飞机场景点，海拔高度约398米。是收复外蒙古将领徐树铮的故里，也是地球同纬度保存非常完好的落叶阔叶林带，景区总面积约39.5平方千米，有森林面积约3100多亩，木本植物约199种，树木约146种，中草药约700多种，鸟类和野生动物约58种。是江北罕见的暖温带落叶阔叶林区、亚热带和暖温带交汇地带，为皖北地区保存非常完整的原始森林。</p>
					</div>
					<div class="col-md-3 team-grid">
						<img src="images/高皇山.jpg" alt="">
						<h6>高皇山</h6>
						<p>湖边两岸连山，重重似画，因为湖面狭长，水色如碧，这里又有宿州“小三峡”和“小黄山”之称。蓝绿色的池水，沉静的水面仿佛一块美玉，倒映着两边的岩壁。是个一秒出大片的地方。</p>
					</div>
					<div class="col-md-3 team-grid">
						<img src="images/绿地衢坊街.jpg" alt="">
						<h6>绿地衢坊街</h6>
						<p>>如果做高铁来宿州，出了宿州东站，不妨去旁边的绿地衢坊街留宿一晚，看看夜景。现代灯光技术加上仿古建筑，让人仿佛身在梦中。</p>
					</div>
					<div class="col-md-3 team-grid">
						<img src="images/宿州新汴河.jpg" alt="">
						<h6>宿州新汴河</h6>
						<p>柏全山位于瓜园则湾乡政府驻地南3公里处。据传说，此山曾有4株枝叶繁茂的大柏树，故名柏全山。柏全山北高南低，山巅上有一古庙，主奉天皇、地皇、人皇，简称为“三皇庙”。坐北面南，正殿为三孔硬山形顶拱式砖窑，整个寺院虽然面积不大，但布局合理，层次分明，有泥塑五十余尊，保持有晚清风格。</p>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<!-- //container -->
	</div>
	<!-- //about-team -->
	<!-- footer -->
	<div class="footer">
		<!-- container -->
		<div class="container">
			<div class="col-md-6 footer-left">
				<h3>联系我们</h3>
				<form>
					<input type="text" placeholder="电子邮件,例如1435469178@qq.com" required="">
					<input type="submit" value="提交">
				</form>
			</div>
			<div class="col-md-3 footer-middle">
				<h3>地址</h3>
				<div class="address">
					<p>安徽宿州
						<span>安徽省北部</span>
					</p>
				</div>
				<div class="phone">
					<p>0573-88731088</p>
				</div>
			</div>   
			<div class="col-md-3 footer-right">
				<div class="f-logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<p>安徽省北部</p>
			</div>
			<div class="clearfix"> </div>	
		</div>
		<!-- //container -->
	</div>
	<!-- //footer -->
	<!-- copyright -->
	<div class="copyright">
		<!-- container -->
		<div class="container">
			<div class="copyright-left">
				<p>Copyright &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p>
			</div>
		</div>
		<!-- //container -->
	</div>
	<!-- copyright -->
</body>
</html>

 联系我们页面

 366a318810f84918b75a9e23faeb801d.png

表单标签为主，块状元素的相互嵌套 

<!DOCTYPE HTML>
<html>
<head>
<title>联系我们</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />	
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.1.min.js"> </script>	
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>		
</head>
<body>
	<!-- banner -->
	<div class="banner a-banner">
		<!-- container -->
		<div class="container">
			<div class="header">
				<div class="logo">
					<a href="index.html">安徽宿州</a>
				</div>
				<div class="icons">
					<ul>
						<li><a href="#" class="facebook chrome"> </a></li>
						<li><a href="#" class="facebook dribbble"> </a></li>
						<li><a href="#" class="facebook"> </a></li>
						<li><a href="#" class="facebook twitter"> </a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="top-nav">
					<span class="menu">菜单</span>
					<ul class="nav1">
						<li><a href="index.html" class="active">宿州简介</a></li>
						<li><a href="history.html">文化历史</a></li>
						<li><a href="accomdation.html">住宿</a></li>
						<li><a href="food.html">宿州美食</a></li>
						<li><a href="contact.html">联系我们</a></li>
					</ul>
					<!-- script-for-menu -->
						<script>
							 $( "span.menu" ).click(function() {
							$( "ul.nav1" ).slideToggle( 300, function() {
							// Animation complete.
								});
								});
						</script>
					<!-- /script-for-menu -->
			</div>
		</div>
		<!-- //container -->
	</div>	
	<!-- //banner -->
	<!-- contact -->
	<div class="contact-top">
		<!-- container -->
		<div class="container">
			<div class="contact-info">
				<h3>联系我们</h3>
				<p>对于我们的网站您有什么意见以及建议呢？我们衷心希望能收到您的来信，并会尽一切努力做到最好！</p>
			</div>
			<div class="mail-grids">
				<div class="col-md-6 mail-grid-left">
					<h3>地址</h3>
					<h5>安徽宿州
						安徽省北部</h5><br/><br/><br/><br/>
					
					<h3>打给我们</h3>
					<p>电话:0755-58478412
					</p>
				</div>
				<div class="col-md-6 contact-form">
					<form>
						<input type="text" placeholder="姓名" required="">
						<input type="text" placeholder="邮件" required="">
						<input type="text" placeholder="主题" required="">
						<textarea placeholder="内容" required=""></textarea>
						<input type="submit" value="发送">
					</form>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<!-- //container -->
	</div>
	<!-- //contact -->
<!-- footer -->
<div class="footer">
	<!-- container -->
	<div class="container">
		<div class="col-md-6 footer-left">
			<h3>联系我们</h3>
			<form>
				<input type="text" placeholder="电子邮件,例如1435469178@qq.com" required="">
				<input type="submit" value="提交">
			</form>
		</div>
		<div class="col-md-3 footer-middle">
			<h3>地址</h3>
			<div class="address">
				<p>安徽宿州
					<span>安徽省北部</span>
				</p>
			</div>
			<div class="phone">
				<p>0573-88731088</p>
			</div>
		</div>   
		<div class="col-md-3 footer-right">
			<div class="f-logo">
				<a href="index.html">安徽宿州</a>
			</div>
			<p>安徽省北部</p>
		</div>
		<div class="clearfix"> </div>	
	</div>
	<!-- //container -->
</div>
<!-- //footer -->
<!-- copyright -->
<div class="copyright">
	<!-- container -->
	<div class="container">
		<div class="copyright-left">
			<p>Copyright &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p>
		</div>
	</div>
	<!-- //container -->
</div>
<!-- copyright -->
</body>
</html>

 完整源码链接 个人博客之家乡风景的介绍-Javascript文档类资源-CSDN文库https://download.csdn.net/download/qq_60483918/85727459

十一月的肖邦689
关注
  • 3
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html+css模板 我的家乡有模板
04-21
漂亮的网页制作模板 我的家乡 html+css模板 代码格式规范
基于HTML+CSS+JavaScript制作一个介绍自己家乡河池主题的网站，排版整洁，内容丰富，主题鲜明
VX_WJ88950106的博客
08-16 385
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
基于JSP+Bootstrap+MySQL的“我与家乡”网页设计
毕业作品网站
09-15 942
id=15091科研情况，学习成绩，开发技能，获奖 其他（可根据自己的喜好分类）。2.技能管理：这部分包括了下拉菜单中涉及的科研情况管理，学习成绩等管理，开发技能管理等。3.家乡特色介绍：这部分主要在 Web 界面进行对美食、美景、风土人情的管理，实现增删改查等功能。5.特色介绍：主要从美食、美景、风土人情等几方面进行介绍，但不局限于此，根据自己的喜好进行设计。1.用户管理：包括管理员和游客（游客可以注册，注册之后可以进行留言），管理员管理整个后端的信息。4.留言管理：可以实现留言的管理。
Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript
VX_WJ88950106的博客
01-08 330
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
jquery-ui前端主题模板
01-15
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。 jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。
期末前端web大作业——我的家乡陕西介绍网页制作源码
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
web大学生个人网站作业模板——上海旅游景点介绍网页代码 家乡旅游网页制作模板 大学生静态HTML网页源码
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
大学生静态HTML网页源码——佛山旅游景点介绍网页代码 家乡旅游网页制作模板 web前端期末大作业
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
dreamweaver作业静态HTML网页设计模板——迪士尼影视电影(6页)带音乐
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
HTML CSS游戏官网网页模板——卡通的萌王游戏网页(13个页面)
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
JS河南网页介绍模板家乡主题网页设计（小白必看）
03-27
JS河南网页介绍模板 家乡主题网页设计（小白必看） 用HTML+CSS做一个漂亮简单的个人网页
前端模板引擎(jQuery模板)jsrender入门
weixin_41571938的博客
07-02 388
1、模板用处 预先定义一些固定格式的HTML标签，勿需依赖DOM和JQuery 2、使用流程 引入JS 定义模板 准备显示JSON数据对象 获取模板，将模板与数据相结合 利用Html输出 3、简单的例子 基本变量需要使用冒号 “:” 作为标识，一般是简单对象的某个属性。比如传入一个简单对象data //定义模板 <script type="text/x-jsrender" id="j-specCard"> <table> <tr> <t
《前端》50个JQuery代码技巧模板
BelleDiao的博客
03-31 400
1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var allItems = $("div.item"); var keepList = $("div#container1 div.item"); <div>class names: $(fo...
基于bootstrap旅游网站以及高德地图API的使用
sunnyboysix的博客
11-26 2198
高德地图API小应用
Bootstrap案例：简易旅游网页面
weixin_44197120的博客
01-28 972
效果图： 代码： 下载Bootstrap 在项目中将这三个文件夹复制 创建html页面，引入必要的资源文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
关于最近接触的前端js已经jquery和常用模板引擎
qq_43066945的博客
09-28 105
js 一般我们使用js来做一些动态的数据处理，比如和后台接口对接获取数据渲染到页面、对一些div的样式进行动态变化等等 在这里我主要记录一下对数据的处理。 ajax 与后台交互非常好用，大致格式为： $.ajax({ url: '###', type: 'POST', //或者GET dataType: 'json', contentType: 'application/json;charset=UTF-8', data: JS
破解ReadOnly: 如何在HTML中灵活处理不可编辑字段
m0_57021623的博客
05-16 659
对于服务器端处理关键字段，如价格或折扣率，最佳实践是在服务器端重新计算这些值或从可信源（例如数据库）验证这些值，以确保数据的完整性和正确性。是HTML中用于表单输入字段的一个属性，它的目的是阻止用户修改输入字段的值，但允许用户提交表单时包含这些值。方法来修改页面元素的属性，提供了更多的灵活性和控制能力，特别是在处理那些通过HTML属性强制施加的限制时。，通常有其背后的理由，比如保护数据的完整性。对于一些关键字段，如价格、折扣率等，服务器端可以在每次处理前都重新计算或验证这些数据，而不是依赖前端提交的值。
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 139
HTML,CSS,JavaScript,DOM的理解
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 328
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
前端分页插件_免费开源的React前端框架——ReactAdmin
05-26
ReactAdmin 是一个免费开源的 React 前端框架，用于快速构建管理后台应用程序。它提供了许多可重用的组件和工具，包括前端分页插件。 ReactAdmin 的前端分页插件是一个高度可定制的组件，可以与任何 API 集成，并支持多个数据源。它具有许多功能，例如支持自定义分页大小、排序和筛选。此外，它还支持异步加载和无限滚动等高级功能。 ReactAdmin 还提供了许多其他功能，例如表单生成器、图表、数据导出和多语言支持等。它还支持与多个数据源集成，例如 REST 和 GraphQL。 总之，ReactAdmin 是一个功能强大且易于使用的前端框架，适用于构建管理后台应用程序。如果您需要在您的项目中使用前端分页插件，ReactAdmin 是一个不错的选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

十一月的肖邦689

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

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

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

打赏作者

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

抵扣说明：

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

余额充值