<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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" role="listbox">
<div class="item active">
<img class="first-slide" src="pic/2.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="pic/2.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="pic/2.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<div class="tab1">
<div class="container">
<h2 class="tab1-h2 cen">focus on what’s important</h2>
<p class="tab1-p cen">and make the web a little bit prettier</p>
<a href="#" class="btn btn-primary tab1-a cen">Buy this theme!</a>
<div class="main row">
<div class="container-fluid">
<div class=" col-md-4 col-sm-6 col-xs-12 span4"> <img src="pic/responsive.png" class="img-responsive center-block">
<h3>Clean, Responsive Design</h3>
<p>A multipurpose but mainly <strong>business oriented</strong> design, built to serve as a foundation for your web projects. Suspendisse nec risus fermentum sapien congue fermentum sed at lorem.</p>
</div>
<div class=" col-md-4 col-sm-6 col-xs-12 span4">
<img src="pic/git.png" class="img-responsive center-block">
<h3>Based on Twitter Bootstrap</h3>
<p>The front-end development framework with a <strong>steep learning curve</strong>. It changes the way you develop sites. Suspendisse nec risus fermentum sapien congue fermentum sed at lorem.</p>
</div>
<div class=" col-md-4 col-sm-6 col-xs-12 span4">
<img src="pic/less.png" class="img-responsive center-block">
<h3>Makes real use of {LESS}</h3>
<p>{re}<strong>start</strong> comes with a style.less file that tries to use all the power of <strong>{less} and bootstrap combined</strong>. Suspendisse nec risus fermentum sapien congue fermentum sed at lorem.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab2">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 tab2-img">
<img src="pic/smile.jpg" class="auto img-responsive center-block" alt="">
</div>
<div class="text col-md-6 col-sm-6 tab2-text">
<h3>强大的学习体系</h3>
<p>方法方法付付付付付付付付付付付付付付</p>
</div>
</div>
</div>
</div>
<div class="tab3">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<img src="pic/meeting.jpg" class="auto img-responsive center-block" alt="">
</div>
<div class="text col-md-6 col-sm-6">
<h3>完美的管理方式</h3>
<p>方法方法付付付付付付付付付付付付付付</p>
</div>
</div>
</div>
</div>
<footer id="footer" class="text-mute">
<div class="container">
<p>企业培训 | 合作事宜 | 版权投诉</p>
<p>跨境少时诵诗书所所所所所所所收到卡刷卡打上来看到</p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="jquery-3.1.1.min.js"></script>
<script src="bootstrap-3.3.7//dist/js/bootstrap.min.js"></script>
</body>
</html>
<!--CSS-->
*{margin:0;padding:0;color:#555;}
body{font-family:"Helvetica Neue",Helvetica,Arial;}
.navbar{margin:0;}
.logo{line-height:20px;}
#navbar-collapse ul{margin-top:0px;}
.carousel-inner img{margin: 0 auto;}
.item p{color:#fff;}
.tab1{background:#F6F6F6;}
.cen{text-align:center;letter-spacing:1px;}
.tab1-h2{font-size:25px;}
.tab1-p{font-size: 16px;color:#666;}
.btn{
width:140px;
height:45px;
line-height:2;
font-size:14px;
margin:0 auto;
display:block;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.main{padding:60px 30px;}
.main h3{
font-size:16px;
font-weight:bold;
text-align:center;
}
.main p{
font-size:13px;
line-height:1.4em;
text-align:center;
}
.tab2{padding:60px 20px;background:#eee;}
.tab3{padding:60px 0px;}
.text h3{font-size: 20px;}
.text p{font-size:14px;}
.jumbotron{background:#000;margin:50px 0 0 0;color:#ccc;}
.jumbotron h3{font-size:26px;padding:0 0 0 20px;}
.jumbotron p{font-size:15px;padding:0 0 0 20px;}
.information{background-color:#eee;padding:40px;}
.info-content{background-color:#fff;margin-bottom:18px;box-shadow:2px 2px 3px #ccc;}
.info-content img{margin:12px 0;}
.info-content h4{color:#333;padding:2px 0 0 0;font-size:16px;}
.info-content p{line-height:1.6;}
.info-right{background-color:#fff;box-shadow:2px 2px 3px #ccc;}
.info-right blockquote{margin:0;padding:0;}
.info-right h2{font-size:20px;color:#333;padding:5px;}
.info-right h4{color:#333;font-size:16px;padding-top:2px;line-height:1.2;}
.case{padding:40px 0;background-color:#eee;text-align:center;}
.case h4{color:#666;}
.case p{color:#666;line-height:1.6;}
.about{background-color:#eee;padding:40px 15px;}
.about a{color:#0059b2;}
.about .abright{background-color:#fff;box-shadow:2px 2px 3px #ccc;}
.about .abright h3{color:#333;font-size:18px;border-bottom:1px solid #eee;padding:20px 0;margin:0 0 10px 0;}
.about .abright p{line-height:2;font-size:13px;}
#footer{
color:#eee;
border-top:2px solid #666;
background:url(../pic/backgrounds/wild_oliva_dark.png);
padding:20px;
text-align:center;
}
@media(min-width:768px){
.tab1-h2{font-size:25px;}
.tab1-p{font-size: 16px;}
.tab1-a{font-size:14px}
.main h3{font-size:16px;}
.main p{font-size:13px;}
.tab2-img{float:right;}
.tab2-text{float:left;}
.text h3{font-size: 22px;}
.text p{font-size:15px; }
.jumbotron h3{font-size:30px;}
.jumbotron p{font-size:16px;}
.info-content h4{font-size:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.about .abright h3{font-size:19px;}
.about .abright p{font-size:14px;}
}
@media(min-width:992px){
.tab1-h2{font-size:35px;}
.tab1-p{font-size: 17px;}
.tab1-a{font-size:16px}
.main h3{font-size:17px;}
.main p{font-size:14px;}
.text h3{font-size: 24px;}
.text p{font-size:16px; }
.jumbotron h3{font-size:33px;}
.jumbotron p{font-size:17px;}
.info-content h4{font-size:18px;}
.about .abright h3{font-size:20px;}
.about .abright p{font-size:15px;}
}
@media(min-width:1200px){
.tab1-h2{font-size:40px;}
.tab1-p{font-size: 18px;}
.tab1-a{font-size:18px}
.main h3{font-size:18px;}
.main p{font-size:15px;}
.text h3{font-size: 26px;}
.text p{font-size:18px; }
.info-content h4{font-size:20px;}
.about .abright h3{font-size:22px;}
.about .abright p{font-size:16px;}
}
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
