蓝色宽屏样式html5自行车租赁公司网页模板代码下载



3 10 4



模板描述:蓝色 宽屏 html5 自行车租赁 企业网页模板 代码下载,蓝色宽屏样式html5自行车租赁公司网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/css_slider.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="css/font-awesome.min.css" rel="stylesheet">

2. HTML代码

	<!-- main -->
	<div id="home">
		<!-- header -->
		<header>
			<div class="container-fluid">
				<div class="header d-md-flex justify-content-between align-items-center py-sm-3 py-2 px-xl-5 px-lg-3 px-2">
					<!-- logo -->
					<div id="logo">
						<h1><a href="index.html">Cycle</a></h1>
					</div>
					<!-- //logo -->
					<!-- nav -->
					<div class="nav_w3ls">
						<nav>
							<label for="drop" class="toggle toogle-2">Menu</label>
							<input type="checkbox" id="drop" />
							<ul class="menu">
								<li class="active"><a href="index.html">Home</a></li>
								<li class="mx-lg-4 mx-md-3 my-md-0 my-2"><a href="#about">About Us</a></li>
								<li>
									<!-- First Tier Drop Down -->
									<label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span>
									</label>
									<a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
									<input type="checkbox" id="drop-2" />
									<ul>
										<li><a href="#stats" class="drop-text">Statistics</a></li>
										<li><a href="#price" class="drop-text">Pricing</a></li>
										<li><a href="#what" class="drop-text">What We Do</a></li>
										<li><a href="#dis" class="drop-text">Discount</a></li>
										<li><a href="#blog" class="drop-text">Blog</a></li>
										<li><a href="#gallery" class="drop-text">Gallery</a></li>
									</ul>
								</li>
								<li class="ml-lg-4 ml-md-3 my-md-0 my-2"><a href="#contact">Contact Us</a></li>
							</ul>
						</nav>
					</div>
					<!-- //nav -->
					<div class="header-top_w3layouts text-center">
						<p class="text-wh">
							<span class="fa fa-phone mr-2"></span>+1 000263676
						</p>
					</div>
				</div>
			</div>
		</header>
		<!-- //header -->
		<!-- banner -->
		<div class="banner_w3lspvt">
			<div class="csslider infinity" id="slider1">
				<input type="radio" name="slides" checked="checked" id="slides_1" />
				<input type="radio" name="slides" id="slides_2" />
				<input type="radio" name="slides" id="slides_3" />
				<ul class="banner_slide_bg">
					<li class="banner-top1">
						<div class="container">
							<div class="banner-text">
								<h3 class="text-wh text-uppercase mb-md-4 mb-3">Enjoy the <span>Bicycle</span> Ride</h3>
								<p class="movetxt text-li font-weight-light">Wonderful day</p>
								<a href="#about" class="button-style btn mt-sm-5 mt-4">Read More</a>
							</div>
						</div>
					</li>
					<li class="banner-top2">
						<div class="container">
							<div class="banner-text text-center">
								<h3 class="text-wh text-uppercase mb-md-4 mb-3">Enjoy the <span>Bicycle</span> Ride</h3>
								<p class="movetxt text-li font-weight-light">Wonderful day</p>
								<a href="#about" class="button-style btn mt-sm-5 mt-4">Read More</a>
							</div>
						</div>
					</li>
					<li class="banner-top3">
						<div class="container">
							<div class="banner-text text-right">
								<h3 class="text-wh text-uppercase mb-md-4 mb-3">Enjoy the <span>Bicycle</span> Ride</h3>
								<p class="movetxt text-li font-weight-light">Wonderful day</p>
								<a href="#about" class="button-style btn mt-sm-5 mt-4">Read More</a>
							</div>
						</div>
					</li>
				</ul>
				<div class="navigation">
					<div>
						<label for="slides_1"></label>
						<label for="slides_2"></label>
						<label for="slides_3"></label>
					</div>
				</div>
			</div>
		</div>
		<!-- //banner -->
	</div>
	<!-- //main -->
	<!-- about -->
	<div class="about py-5" id="about">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title text-center text-bl mb-5">Welcome to our Website
				<span class="mt-2">World's No.1 Best Site</span>
			</h3>
			<div class="row about-bottom-w3l text-center pt-xl-5 pt-lg-4">
				<div class="col-sm-6 about-grid">
					<div class="about-grid-main">
						<img src="images/a1.png" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3">Bike Riding</h4>
						<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
						<a href="#" class="button-w3ls btn mt-4">Read More</a>
					</div>
				</div>
				<div class="col-sm-6 about-grid mt-sm-0 mt-4">
					<div class="about-grid-main">
						<img src="images/a2.png" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3">Vector Bicycle</h4>
						<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
						<a href="#" class="button-w3ls btn mt-4">Read More</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //about -->
	<!-- stats -->
	<div class="w3ls-middle py-5" id="stats">
		<div class="container-fluid py-xl-5 py-lg-3">
			<h3 class="title text-center text-bl mb-sm-5 mb-4">Our Statistics
				<span class="mt-2">some more</span>
			</h3>
			<div class="row pt-xl-5">
				<div class="col-lg-6 text-center mt-lg-3">
					<img src="images/3.png" alt="" class="img-fluid chef-img">
				</div>
				<div class="col-lg-4 pl-lg-5 mt-lg-0 mt-4">
					<div class="service1-wthree">
						<h4>Test Rides</h4>
						<h6 class="text-bl mt-3 mb-2">26422</h6>
						<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</div>
					<div class="service1-wthree my-xl-5 my-lg-4 my-sm-5 my-4">
						<h4>Bikes Hired</h4>
						<h6 class="text-bl mt-3 mb-2">7634</h6>
						<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</div>
					<div class="service1-wthree">
						<h4>Happy Customers</h4>
						<h6 class="text-bl mt-3 mb-2">16023</h6>
						<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</div>
				</div>
				<div class="offset-lg-2"></div>
			</div>
		</div>
	</div>
	<!-- //stats -->
	<!-- features -->
	<div class="w3ls-middle-works py-sm-5 py-4" id="what">
		<h3 class="title text-center text-bl mb-5">What we do for you
			<span class="mt-2">Our Best Features</span>
		</h3>
		<div class="special-agiles">
			<div class="container">
				<div class="row">
					<div class="col-xl-3 col-lg-6 grids-w3ls-left py-5">
						<div class="py-xl-5 py-lg-3">
							<p class="mb-2 text-wh">Our Features</p>
							<h4 class="title text-bl mb-md-4">Research, Strategy, Specs,Crankset, Chainring Bolt, Adjusting Barrel.</h4>
							<a href="#about" class="button-style button-style-2 btn mt-lg-5 mt-4">Read More</a>
						</div>
					</div>
					<div class="offset-xl-3 col-lg-6 grids-w3ls-right">
						<img src="images/middle.jpg" alt="" class="img-fluid">
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //features -->
	<!-- discount -->
	<div class="agile-wthree-works py-lg-5 pb-lg-0 pb-3" id="dis">
		<div class="container">
			<div class="row">
				<div class="col-lg-6 img-left-posi text-lg-left text-center">
					<img src="images/middle-2.png" alt="" class="img-fluid">
				</div>
				<div class="col-xl-5 col-lg-6 grids-w3ls-right-2 py-xl-5 py-lg-3 mt-lg-0 mt-4">
					<h3 class="title text-bl mb-lg-5 mb-4">Seasonal Discount
						<span class="mt-2">Upto 70% Off</span>
					</h3>
					<h4 class="title text-bl mb-sm-5 mb-4">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
						fugit</h4>
					<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad reprehenderit qui
						inea voluptate velit esse. </p>
				</div>
				<div class="offset-xl-1"></div>
			</div>
		</div>
	</div>
	<!-- //discount -->
	<!-- gallery -->
	<div class="gallery py-5" id="gallery">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title text-center text-bl mb-5">Our Gallery
				<span class="mt-2">Caption placed here</span>
			</h3>
			<div class="news-grids text-center pt-xl-4">
				<div class="row news-grids text-center">
					<div class="col-md-4 gal-img">
						<a href="#gal1"><img src="images/g1.jpg" alt="news image" class="img-fluid"></a>
						<a href="#gal2"><img src="images/g2.jpg" alt="news image" class="img-fluid mt-4"></a>
						<a href="#gal9"><img src="images/g9.jpg" alt="news image" class="img-fluid mt-4"></a>
					</div>
					<div class="col-md-4 gal-img my-md-0 my-4">
						<a href="#gal3"><img src="images/g3.jpg" alt="news image" class="img-fluid"></a>
						<a href="#gal4"><img src="images/g4.jpg" alt="news image" class="img-fluid mt-4"></a>
						<a href="#gal8"><img src="images/g8.jpg" alt="news image" class="img-fluid mt-4"></a>
					</div>
					<div class="col-md-4 gal-img">
						<a href="#gal5"><img src="images/g5.jpg" alt="news image" class="img-fluid"></a>
						<a href="#gal7"><img src="images/g7.jpg" alt="news image" class="img-fluid mt-4"></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- popup-->
	<div id="gal1" class="popup-effect animate">
		<div class="popup">
			<img src="images/g1.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal2" class="popup-effect animate">
		<div class="popup">
			<img src="images/g2.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal3" class="popup-effect animate">
		<div class="popup">
			<img src="images/g3.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup3 -->
	<!-- popup-->
	<div id="gal4" class="popup-effect animate">
		<div class="popup">
			<img src="images/g4.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal5" class="popup-effect animate">
		<div class="popup">
			<img src="images/g5.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal7" class="popup-effect animate">
		<div class="popup">
			<img src="images/g77.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal8" class="popup-effect animate">
		<div class="popup">
			<img src="images/g8.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal9" class="popup-effect animate">
		<div class="popup">
			<img src="images/g9.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- //gallery -->
	<!-- price-->
	<div class="price-sec py-5" id="price">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title text-center text-wh mb-5">Our Pricing Tables
				<span class="mt-2 text-li">Caption placed here</span>
			</h3>
			<div class="row price-grid-main pt-xl-4">
				<div class="col-lg-4 price-info">
					<div class="prices-top">
						<h3 class="text-center text-capitalize text-wh">$30
							<span>per day</span>
						</h3>
					</div>
					<div class="prices-bottom text-center p-4">
						<div class="prices-h border-bottom pb-4">
							<p>Dolor sit amet</p>
							<h4>BASIC</h4>
						</div>
						<ul class="mt-4">
							<li>Coach Services</li>
							<li class="my-3">Personal Training</li>
							<li>Totam rem de</li>
							<li class="my-3">Players Included</li>
							<li>Eaque ipsa qe</li>
						</ul>
						<a href="#" class="button btn">Sign Up</a>
					</div>
				</div>
				<div class="col-lg-4 price-info my-lg-0 my-5">
					<div class="prices-top">
						<h3 class="text-center text-capitalize text-wh">$20
							<span>per day</span>
						</h3>
					</div>
					<div class="prices-bottom text-center p-4">
						<div class="prices-h border-bottom pb-4">
							<p>Dolor sit amet</p>
							<h4>ELITE</h4>
						</div>
						<ul class="mt-4">
							<li>Personal Training</li>
							<li class="my-3">Coach Services</li>
							<li>Players Included</li>
							<li class="my-3">Totam rem de</li>
							<li>Eaque ipsa qe</li>
						</ul>
						<a href="#" class="button btn">Sign Up</a>
					</div>
				</div>
				<div class="col-lg-4 price-info">
					<div class="prices-top">
						<h3 class="text-center text-capitalize text-wh">$36
							<span>per day</span>
						</h3>
					</div>
					<div class="prices-bottom text-center p-4">
						<div class="prices-h border-bottom pb-4">
							<p>Dolor sit amet</p>
							<h4>POWER ELIT</h4>
						</div>
						<ul class="mt-4">
							<li>Players Included</li>
							<li class="my-3">Eaque ipsa qe</li>
							<li>Coach Services</li>
							<li class="my-3">Totam rem de</li>
							<li>Personal Training</li>
						</ul>
						<a href="#" class="button btn">Sign Up</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //price -->
	<!-- blog -->
	<section class="blog_w3ls py-5" id="blog">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title text-center text-bl mb-5">Our Blog
				<span class="mt-2">Latest Posts</span>
			</h3>
			<div class="row">
				<!-- blog grid -->
				<div class="col-lg-4 col-md-6">
					<div class="card border-0 med-blog">
						<div class="card-header p-0">
							<a href="#">
								<img class="card-img-bottom" src="images/g8.jpg" alt="image">
							</a>
						</div>
						<div class="card-body border border-top-0">
							<div class="mb-3">
								<h5 class="blog-title card-title font-weight-bold m-0">
									<a href="#">Dictum porta auris</a>
								</h5>
								<div class="blog_w3icon">
									<span>
										Jan 12, 2019 - loremipsum</span>
								</div>
							</div>
							<p>Cras ultricies ligula sed magna dictum porta auris blandita. Nulla viverra pharetra se.</p>
						</div>
					</div>
				</div>
				<!-- //blog grid -->
				<!-- blog grid -->
				<div class="col-lg-4 col-md-6 mt-md-0 mt-5">
					<div class="card border-0 med-blog">
						<div class="card-header p-0">
							<a href="#">
								<img class="card-img-bottom" src="images/g3.jpg" alt="image">
							</a>
						</div>
						<div class="card-body border">
							<div class="mb-3">
								<h5 class="blog-title card-title font-weight-bold m-0">
									<a href="#">Sed do eiusmod</a>
								</h5>
								<div class="blog_w3icon">
									<span>
										Jan 14, 2019 - loremipsum</span>
								</div>
							</div>
							<p>Cras ultricies ligula sed magna dictum porta auris blandita. Nulla viverra pharetra se.</p>
						</div>
					</div>
				</div>
				<!-- //blog grid -->
				<!-- blog grid -->
				<div class="col-lg-4 col-md-6 mt-lg-0 mt-5">
					<div class="card border-0 med-blog">
						<div class="card-header p-0">
							<a href="#">
								<img class="card-img-bottom" src="images/g2.jpg" alt="image">
							</a>
						</div>
						<div class="card-body border border-top-0">
							<div class="mb-3">
								<h5 class="blog-title card-title font-weight-bold m-0">
									<a href="#">Tempor inci didunt</a>
								</h5>
								<div class="blog_w3icon">
									<span>
										Jan 16, 2019 - loremipsum</span>
								</div>
							</div>
							<p>Cras ultricies ligula sed magna dictum porta auris blandita. Nulla viverra pharetra se.</p>
						</div>
					</div>
				</div>
				<!-- //blog grid -->
			</div>
		</div>
	</section>
	<!-- //blog -->
	<!-- contact -->
	<div class="address py-5" id="contact">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title text-center text-bl mb-5">Contact US
				<span class="mt-2">World's No.1 Website</span>
			</h3>
			<div class="row address-row pt-xl-5 pt-lg-4">
				<div class="col-lg-6">
					<div class="address-right p-sm-5 p-4">
						<div class="address-info wow fadeInRight animated" data-wow-delay=".5s">
							<h4 class="mb-3">Address</h4>
							<p>123 San Sebastian, Hill Towers 4567,
								<span>New York City, USA</span>
							</p>
						</div>
						<div class="address-info address-mdl wow fadeInRight animated my-sm-5 my-4" data-wow-delay=".7s">
							<h4 class="mb-3">Phone </h4>
							<p>+222 111 333 4444</p>
							<p>+222 111 333 5555</p>
						</div>
						<div class="address-info agileits-info wow fadeInRight animated" data-wow-delay=".6s">
							<h4 class="mb-3">Mail</h4>
							<p>
								<a href="https://www.51qianduan.com/">51前端</a>
							</p>
							<p>
								<a href="https://www.51qianduan.com/">51前端</a>
							</p>
						</div>
					</div>
				</div>
				<div class="col-lg-6 address-left wow agile fadeInLeft animated mt-lg-0 mt-5" data-wow-delay=".5s">
					<div class="address-grid p-sm-5 p-4">
						<h4 class="wow fadeIndown animated mb-3" data-wow-delay=".5s">Get In Touch</h4>
						<form action="#" method="post">
							<div class="form-group">
								<input type="text" placeholder="Name" name="name" class="form-control" required="">
							</div>
							<div class="form-group">
								<input type="email" placeholder="Email" name="email" class="form-control" required="">
							</div>
							<div class="form-group">
								<textarea placeholder="Message" name="Message" class="form-control" required=""></textarea>
							</div>
							<button type="submit" class="btn">SEND</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //contact -->
	<!-- partners -->
	<section class="partners text-center py-5">
		<div class="container py-xl-5 py-lg-3">
			<h4 class="text-bl font-weight-bold mb-sm-5 mb-4">Trusted by the world's best companies</h4>
			<ul class="list-unstyled partners-icon pt-5">
				<li>
					<span class="fa fa-ravelry clr1"></span>
				</li>
				<li>
					<span class="fa fa-meetup clr2"></span>
				</li>
				<li>
					<span class="fa fa-eercast clr3"></span>
				</li>
				<li>
					<span class="fa fa-pied-piper clr4"></span>
				</li>
				<li>
					<span class="fa fa-yoast clr5"></span>
				</li>
				<li>
					<span class="fa fa-superpowers clr6"></span>
				</li>
			</ul>
		</div>
	</section>
	<!-- //partners -->
	<!-- footer -->
	<footer class="pt-sm-5 pt-3">
		<div class="container py-xl-5 py-lg-3">
			<div class="row footer-grids py-4">
				<div class="col-lg-4 footer-grid text-left">
					<div class="footer-logo">
						<h2 class="mb-3">
							<a class="logo text-wh" href="index.html">Cycle</a>
						</h2>
					</div>
				</div>
				<div class="col-lg-2 col-6  footer-grid my-lg-0 my-4">
					<h3 class="mb-sm-4 mb-3 pb-3">Home</h3>
					<ul class="list-unstyled">
						<li>
							<a href="index.html">Index</a>
						</li>
						<li class="my-2">
							<a href="#about">About Us</a>
						</li>
						<li>
							<a href="#what">What We Do</a>
						</li>
						<li class="my-2">
							<a href="#gallery">Gallery</a>
						</li>
						<li>
							<a href="#contact">Contact Us</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-2 col-6 footer-grid my-lg-0 my-4">
					<h3 class="mb-sm-4 mb-3 pb-3"> Navigation </h3>
					<ul class="list-unstyled">
						<li>
							<a href="#stats">Statistics</a>
						</li>
						<li class="my-2">
							<a href="#dis">Discount</a>
						</li>
						<li>
							<a href="#price">Pricing</a>
						</li>
						<li class="my-2">
							<a href="#blog">Blog</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-2 col-6 footer-grid">
					<h3 class="mb-sm-4 mb-3 pb-3"> Company</h3>
					<ul class="list-unstyled">
						<li>
							<a href="#">Link Here</a>
						</li>
						<li class="my-2">
							<a href="#">Link Here</a>
						</li>
						<li>
							<a href="#">Link Here</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-2 col-6 footer-grid footer-contact">
					<h3 class="mb-sm-4 mb-3 pb-3"> Contact Us</h3>
					<ul class="list-unstyled">
						<li>
							+01(24) 8543 8088
						</li>
						<li class="mt-2">
							<a href="https://www.51qianduan.com/">51前端</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- copyright -->
		<div class="copy_right">
			<p class="text-center text-wh py-sm-3 py-3">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
			</p>
		</div>
		<!-- //copyright -->
	</footer>
	<!-- //footer -->
	<!-- move top icon -->
	<a href="https://www.51qianduan.com/">51前端</a>
	<!-- //move top icon -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 蓝色 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 大气 霸气 汽车 汽车4S店 4S店 自行车 摩托车

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到