页面涉及html+css+jQuery+boostrap
<!DOCTYPE html>
<html>
<head leng="en">
<meta charset="utf-8" />
<title>boostrap-布局-实例2</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style-2.css" rel="stylesheet" />
</head>
<body>
<div class="side-nav" role="navigation">
<ul class="nav-side-nav">
<li><a href="#one" class="tooltip-side-nav"></a></li>
<li><a href="#two" class="tooltip-side-nav"></a></li>
<li><a href="#three" class="tooltip-side-nav"></a></li>
<li><a href="#four" class="tooltip-side-nav"></a></li>
<li><a href="#five" class="tooltip-side-nav"></a></li>
</ul>
</div>
<div class="onepage" id="one">
<div class="onepage-bg" id="onepagebg">
<div class="container">
<div class="row">
<div class="title-text">
<div class="col-md-12 headfontsize">
<h1 class="headh1content">运动风<br>一直流行至今</h1>
<p>欢迎来到"我要运动"，我们是一个致力于为广大运动爱好者<br>提供方便快捷的场地、教练、培训等在线预订服务机互动交流平台</p>
<p class="btn-app-stroe">
<a href="#" class="btn btn-success btn-lg">立即注册，开始行动</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="twopage" id="two">
<div class="twopage-text">
<h1 class="twopage-text-h1"> 选择你喜欢的运动风<img src="images/12.png" /></h1>
</div>
<div class="row">
<div class="twopage-curses col-md-4">
<a href="#">
<img src="images/01.jpg" />
<div class="classicon">
<h1>认真学习</h1>
<h3><strong>学习这个运动项目</strong></h3>
</div>
</a>
</div>
<div class="twopage-curses col-md-4">
<a href="#">
<img src="images/02.jpg" />
<div class="classicon">
<h1>认真学习</h1>
<h3><strong>学习这个运动项目</strong></h3>
</div>
</a>
</div>
<div class="twopage-curses col-md-4">
<a href="#">
<img src="images/03.jpg" />
<div class="classicon">
<h1>认真学习</h1>
<h3><strong>学习这个运动项目</strong></h3>
</div>
</a>
</div>
</div>
<div class="twopagebtn">
<a href="#" class="btn btn-success btn-lg" id="twopage-easy">如果想选择运动，请选择这里</a>
</div>
</div>
<div class="threepage" id="three">
<div class="threepage-bg" id="threepagebg">
<div class="threepagecontent">
<div class="threepagetext">
<h1>每天锻炼一小时，健康生活50年</h1>
<p>只要每天坚持锻炼，观察每天的的身体变化，积少成多，<br>那么身体就会越来越健康。</p>
</div>
<a href="#" class="btn btn-success btn-lg threepagebtncontent">快速注册</a>
</div>
</div>
</div>
<div class="fourpage" id="four">
<div class="container">
<div class="fourpage-text">
<h1>运动前，准备好器材</h1>
<p>怎么运动，才能快速的展现出效果</p>
</div>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/2.jpg" alt="First slide">
<div class="carousel-caption">
<h4>此处是标签</h4>
<p>hello, 此处是主要说明部分</p>
</div>
</div>
<div class="item">
<img src="images/7.jpg" alt="Second slide">
<div class="carousel-caption">
<h4>此处是标签</h4>
<p>hello, 此处是主要说明部分</p>
</div>
</div>
<div class="item">
<img src="images/9.jpg" alt="Third slide">
<div class="carousel-caption">
<h4>此处是标签</h4>
<p>hello, 此处是主要说明部分</p>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›
</a>
</div>
</div>
</div>
<div class="fivepage" id="five">
<div class="fivepage-bg" id="fivepagebg">
<div class="container">
<div class="fivetext">
<h1>怎么运动，才能快速的展现出效果</h1>
</div>
<div class="fivebtncenter">
<div class="row">
<a href="#" class="col-md-4">
<img src="images/five01.jpg" queyeicon />
</a>
<a href="#" class="col-md-4">
<img src="images/five02.jpg" queyeicon />
</a>
<a href="#" class="col-md-4">
<img src="images/five03.jpg" queyeicon />
</a>
</div>
</div>
<div class="fivetextbtn">
<button type="button" class="btn btn-success btn-lg">运动运动运动员</button>
<p class="fivetext-btn">
只要每天坚持锻炼，观察每天的的身体变化，积少成多，<br>那么身体就会越来越健康。
</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js" /></script>
<script src="js/bootstrap.min.js" /></script>
</body>
</html>
效果图如下
2066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
