bootstrap图片轮播+导航栏效果

这仍然是对本学期软件工程大作业的总结。
在完成这次大作业时,感觉这次写的导航栏和轮播图片效果还好,特此放出效果图和代码。
声明:轮播图片代码根据慕课网%U4��示例代码修改。慕课网上的教程视频地址:http://www.imooc.com/video/3342。
下面是这次的效果图:

最后附上代码:


<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>

你可能感兴趣的:(CSS)