<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
<title>jquery</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand logo" ><img src="logo.png" alt="网站LOGO具体名称"></a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right" >
<li class="active"><a href="index.html">
<span class="glyphicon glyphicon-home"></span> 首页</a>
</li>
<li><a href="information.html"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>
<li><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
<li><a href="about.html"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
</ul>
</div>
</div>
</nav>
<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" style="margin:auto">
<div class="item active" style="background-color:#223240">
<img src="01.jpg" alt="第一章图片">
<div class="carousel-caption">
<h3>美丽的华蓥山</h3>
<p>广安市华蓥山是国家AAAAAAA级风景区不信你来看撒！</p>
</div>
</div>
<div class="item" style="background-color:#F5E4DC">
<img src="02.jpg" alt="第二章图片">
<div class="carousel-caption">
<h3>丑陋的峨眉山</h3>
<p>成都市峨眉山是一个猴子很多的山！</p>
</div>
</div>
<div class="item" style="background-color:#DE2A2D">
<img src="03.jpg" alt="第三章图片">
<div class="carousel-caption">
<h3>一般的仙女山</h3>
<p>重庆市仙女山是有很多女娃儿的山！</p>
</div>
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>
<div class="tab1">
<div class="container">
<h2 class="tab-h2">[为什么要选择我？]</h2>
<p class="tab-p">因为我善良、帅气、大方、哈哈哈哈哈</p>
<div class="row">
<div class="col-md-6" id="col1">
<div class="media">
<div class="media-left"><a href="#"><img src="sucai1.png" class="media-object"alt="素材"></a></div>
<div class="media-body">
<h4 class="media-heading">课程内容</h4>
<p class="text-muted"><s>其他：高校不知名的讲师编写，没有任何实战价值的教材！</s></p>
<p>我们：企业内知名的讲师编写，用有任何实战价值的教材！</p>
</div>
</div>
</div>
<div class="col-md-6" id="col2"><div class="media">
<div class="media-left"><a href="#"><img src="sucai1.png" class="media-object"alt="素材"></a></div>
<div class="media-body">
<h4 class="media-heading">课程内容</h4>
<p class="text-muted"><s>其他：高校不知名的讲师编写，没有任何实战价值的教材！</s></p>
<p>我们：企业内知名的讲师编写，用有任何实战价值的教材！</p>
</div>
</div></div>
<div class="col-md-6" id="col3"><div class="media">
<div class="media-left"><a href="#"><img src="sucai1.png" class="media-object"alt="素材"></a></div>
<div class="media-body">
<h4 class="media-heading">课程内容</h4>
<p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
<p>我们：企业内知名的讲师编写，用有任何实战价值的教材！</p>
</div>
</div></div>
<div class="col-md-6" id="col4"><div class="media">
<div class="media-left"><a href="#"><img src="sucai1.png" class="media-object"alt="素材"></a></div>
<div class="media-body">
<h4 class="media-heading">课程内容</h4>
<p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
<p>我们：企业内知名的讲师编写，用有任何实战价值的教材！</p>
</div>
</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 id="pic1" src="sucai2.png" class="img-responsive center-block"alt="素材2"></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 id="pic2" src="sucai3.png" class="img-responsive center-block" alt="素材3"></div>
<div class="text col-md-6 col-sm-6">
<h3>强大的学习体系</h3>
<p>经过管理学大师层层把关、让您的企业突飞猛进。</p>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container">
<div class="container">
<p>企业培训 | 合作事宜 | 版权投诉</p>
<p>苏 ICP 备 12345678. © 2009-2016 瓢城企训网. Powered by
Bootstrap.</p>
</div>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="index.js"></script>
<script>
//轮播图自动播放
$("#myCarousel").carousel({
interval:4000,
})
//设置垂直居中
$(function(){
var p=$(".carousel-inner img").length;
for (var i = 0; i < p; i++) {
var p1=$(".carousel-inner img").eq(i).height();
if(p1!==0){
$(".carousel-control").css("line-height",p1+"px");
}
};
$(window).resize(function(){
for (var i = 0; i < p; i++) {
var p1=$(".carousel-inner img").eq(i).height();
if(p1!==0){
$(".carousel-control").css("line-height",p1+"px");
}
};
})
//设置文字垂直居中
var pic1text=($("#pic1").height()-$(".text").eq(0).height())/2
$(".text").css("margin-top",pic1text+"px")
$(window).resize(function(){
var pic1text=($("#pic1").height()-$(".text").eq(0).height())/2
$(".text").css("margin-top",pic1text+"px")
})
var pic2text=($("#pic2").height()-$(".text").eq(1).height())/2
$(".text").css("margin-top",pic1text+"px")
$(window).resize(function(){
var pic2text=($("#pic2").height()-$(".text").eq(1).height())/2
$(".text").css("margin-top",pic1text+"px")
})
//下面是结束括号
});
</script>
</body>
</html>
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
