<!DOCTYPE html>
<html>
<head>
<title>微冷的雨工作室</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
href="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" type="text/css"></link>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"
type="text/css"></link>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel .item {
height: 300px;
}
.carousel-caption {
color: red;
}
body {
padding-top: 50px;
padding-bottom: 50px;
}
</style>
<script type="text/javascript">
/* $(function(){
//改变轮换图片的间隔时间！
$('.carousel').carousel({
interval:3000
})
}) */
$(function() {
var index = 0;
var stop = false;
$(".carousel-inner").hover(function() {
stop = true;
}, function() {
stop = false;
});
setInterval(function() {
if (stop) {
return;
}
if (index < 3) {
index++;
} else {
index = 1;
}
$(".item img").attr("src", "image/img0" + index + ".png");
$("#carousel-example-generic li").attr("data-slide-to",index-1);
}, 1000);
});
</script>
</head>
<body>
<!-- navbar-inverse：颜色反转 -->
<nav class="navbar navbar-default navbar-fixed-top ">
<!-- container-fluid:自适应浏览器宽度 container：居中样式 -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<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="#">微冷的雨工作室</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span class="sr-only">(current)</span>
</a>
</li>
<li><a href="#">简介</a>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">干活分享<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="#">学术</a>
</li>
<li><a href="#">图片</a>
</li>
<li><a href="#">文章</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">音乐</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">日志</a>
</li>
</ul></li>
<li><a href="#">本周活动</a>
</li>
<li><a href="Y2161-0728.html">作业</a>
</li>
<li><a href="#" data-toggle="modal" data-target="#about">关于</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</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><a href="#">Separated link</a>
</li>
</ul></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<hr />
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image/img01.png" alt="你的心情，我懂！">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="image/img02.png" alt="班级活动">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="image/img03.png" alt="我们爱编码">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic"
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="#carousel-example-generic"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> </a>
</div>
<!-- tabs选项卡 -->
<div class="container">
<hr />
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home"
aria-controls="home" role="tab" data-toggle="tab">学术</a>
</li>
<li role="presentation"><a href="#profile"
aria-controls="profile" role="tab" data-toggle="tab">图片</a>
</li>
<li role="presentation"><a href="#messages"
aria-controls="messages" role="tab" data-toggle="tab">文章</a>
</li>
<li role="presentation"><a href="#settings"
aria-controls="settings" role="tab" data-toggle="tab">音乐</a>
</li>
<li role="presentation"><a href="#rz" aria-controls="rz"
role="tab" data-toggle="tab">日志</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-md-7">
<img src="image/3.jpg" width="300px" height="300px" />
</div>
<div class="col-md-5">第一章</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="row">
<div class="col-md-7">
<img src="image/4.jpg" width="300px" height="300px" />
</div>
<div class="col-md-5">第2章</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="row">
<div class="col-md-7">
<img src="image/5.jpg" width="300px" height="300px" />
</div>
<div class="col-md-5">第3章</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="row">
<div class="col-md-7">
<img src="image/2.jpg" width="300px" height="300px" />
</div>
<div class="col-md-5">第4章</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="rz">
<div class="row">
<div class="col-md-7">
<img src="image/1.jpg" width="300px" height="300px" />
</div>
<div class="col-md-5">第5章</div>
</div>
</div>
</div>
</div>
<hr />
<footer>
<p class="pull-right">
<a href="#top">回到顶部</a>
</p>
<p>©2016微冷的雨</p>
</footer>
</div>
<!-- 关于对话框 -->
<div class="modal fade" id="about" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">关于</h4>
</div>
<div class="modal-body">
微冷的雨致力于为IT世界贡献自己的一份微薄之力！！<br /> blogs地址：http://www.cnblogs.com <br />
邮箱:yymqqc@126.com
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
11-05
4537
4537
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
