您的位置：首页 > Web前端 > BootStrap

bootstrap图片轮播+导航栏效果

2016-01-05 18:50 645 查看
这仍然是对本学期软件工程大作业的总结。

在完成这次大作业时，感觉这次写的导航栏和轮播图片效果还好，特此放出效果图和代码。

声明：轮播图片代码根据慕课网%U4��示例代码修改。慕课网上的教程视频地址：http://www.imooc.com/video/3342。

下面是这次的效果图：



最后附上代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>软院知社-首页</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<style>
.top {
background-color: #404A54;
height: 60px;
}

.top * {
color: #FFF;
}

.top li {
font-size: 18px;
margin-top: 7px;
margin-left: 10px;
}

.navbar-brand {
font-size: 22px;
margin-top: 7px;
}

.footer {
background-color: #404A54;
height: 400px;
}
.jumbotron {
padding: 10px 30px 10px 30px;
}

.jumbotron p {
font-size: 14px;
line-height: 2.0;
}

.jumbotron h4 {
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.8;
}

.beleft {
float: left;
margin-left: 100px;
}

.carousel {
height: 500px;
margin-bottom: 30px;
}

.carousel .item {
height: 500px;
}

.carousel img {
min-height: 500px;
width: 100%;
}

</style>
</head>
<body>
<div class="navbar-fixed-top top" role="navigation" id="menu-nav"
>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only"></span> <span class="icon-bar"> </span> <span
class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><b>软院知社</b></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">首页</a></li>
<li><a href="courselist.html">课程</a></li>
<li><a href="resouces.html">资源</a></li>
<li><a href="questionlist.html">问答</a></li>

</ul>
<div class="user" id="logControll" ng-controller="navUserController"
style="position: absolute; top: 25px; right: 60px;">
<span class="glyphicon glyphicon-user"></span> <span
class="user-name" style="cursor:pointer"onclick="personalPage(this)">{{navUsername}}</span>
<span id="logout" onclick="logout()" style="display:none;margin-left:20px;color:#DDD;cursor:pointer;">退出</span>
</div>

</div>
</div>

</div>

<div id="ad-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
<li data-target="#ad-carousel" data-slide-to="1"></li>

</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/ruanyuan01.jpg" alt="0 slide">

<div class="container">
<div class="carousel-caption"
style="position: absolute; top: 250px;width:250px;margin-left:auto;margin-right:auto;">
<h1>软院知社</h1>

<p>在这里，你能得到第一手的课程资源</p>

<p id="reg">
<a class="btn btn-lg btn-primary" href="register.html"
role="button">先去注册</a>
</p>
</div>
</div>

</div>
<div class="item">
<img src="img/ruanyuan02.jpg" alt="1 slide">

<div class="container">
<div class="carousel-caption"
style="position: absolute; top: 250px;width:250px;margin-left:auto;margin-right:auto;">
<h1>软院知社</h1>

<p>对课程有疑问？软院各路大神为您解答</p>

<p id="lgn">
<button class="btn btn-lg btn-primary" onclick="login()">马上登录</button>
</p>
</div>
</div>

</div>

</div>
<a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a> <a
class="right carousel-control" href="#ad-carousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
<div style="position: absolute; left: 100px; top: 100px;"></div>
</div>

<script>
$(function() {
$('#ad-carousel').carousel();
$('#menu-nav .navbar-collapse a').click(function(e) {
var href = $(this).attr('href');
var tabId = $(this).attr('data-tab');
if ('#' !== href) {
e.preventDefault();
$(document).scrollTop($(href).offset().top - 70);
if (tabId) {
$('#feature-tab a[href=#' + tabId + ']').tab('show');
}
}
});
});

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航