问带图标和旋转木马的引导3 Navbar
EN

Stack Overflow用户

提问于 2015-06-18 19:35:34

回答 1查看 444关注 0票数 0

我正在用bootstrap3创建一个网站。不幸的是，即使看了很多视频，我仍然有问题。

我希望我的肚脐上的标志保持在左边(我有)和其他的图标，将链接到页面的其他区域，向左-不幸的是，我还没有通过html/css解决这个问题。请查看www.frobot.net，看看我试图模仿什么。本质上，文本旁边有多个图标。
我想要一个白色的背景，为肚脐和它有一个明确的底部，而不是啮合到其他网站，如果这是有意义的。到目前为止，导航工具没有一致的水平白色区域。
我为三个图像设置了一个旋转木马，只有第一个图像出现。

有人能指出我代码中的问题吗？

HTML：

    <!DOCTYPE html>

    <html>
        <head>

             <!-- Website Title & Description for Search Engine purposes -->
            <title>THE BEST YOGURT</title>
             <meta name="description" content="Frozen Yogurt">

        <!-- Mobile viewport optimized -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Bootstrap CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-glyphicons.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="css/style.css">

        <!-- Include Modernizr in the head, before any other Javascript -->
        <script src="js/modernizr-2.6.2.min.js"></script>


    </head>

    <body>

        <div class="container" id="main">

            <nav class="navbar navbar-fixed-top" role="navigation">

                <div class="container-fluid">

                    <div class="navbar-header">

                        <a class="navbar-brand" href="#">

                            <img src="img/logo.png" alt="#Logo">

                        </a>

                    </div>

                    <div class="navbar navbar-custom">

                        <div class="navbar-header">

                            <a class="icons" href="icons">

                    <link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>

                    <a href="#"><img src="img/froyo.png" alt="Froyo"<li>FROYO</li></a>

                    <a href="#"><img src="img/story.png" alt="Bots"<li>BOTS</li></a>

                    <a href="#"><img src="img/team.png" alt="Press"<li>PRESS</li></a>

                    <a href="#"><img src="img/talk.png" alt="Team"<li>TEAM</li></a>

                    <a href="#"><img src="img/contact.png" alt="Contact"<li>CONTACT</li></a>

                </div>

            </nav><!--End Nav Bar -->

        </div>

        <!-- Carousel Begins -->

        <div class="carousel-slide" id="myCarousel">

            <!-- Indicators -->

            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                <li data-slide-to="1" data-target="#myCarousel"></li>
                <li data-slide-to="2" data-target="#myCarousel"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active" id="slide1">
                    <div class="carousel-caption">
                        <h4></h4>
                        <p></p>
                    </div><!-- end carousel-caption-->
                </div><!-- end item --> 

                <div class="item" id="slide2">
                    <div class="carousel-caption">
                        <h4></h4>
                        <p></p>
                    </div><!-- end carousel-caption-->
                </div><!-- end item -->

                <div class="item" id="slide3">
                    <div class="carousel-caption">
                        <h4></h4>
                        <p></p>
                    </div><!-- end carousel-caption-->
                </div><!-- end item -->
            </div><!-- carousel-inner -->

            <!-- Controls -->
            <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
            <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>

        </div><!-- end myCarousel -->

        <div class="row" id="FroYo">

            <a href="#"><img src="img/contact-para-bg.png" alt="Bots"</a>


</body>
</html>

CSS:

/* --------------------------------------
   Layout
   -------------------------------------- */

   .nav-bar {


        position:fixed;

        top:0;

        background-color:white;

        padding-top:30px;

        padding-left:100px;
   }

   .navbar-brand {

    padding: 13px 15px;

    background-color:white;
}


   .icons {

        margin:0;

        padding-top: 25px;

        padding-right: 200px;

        padding-left:100px;

        background-color:white;


    }

    .icons a{

        font-family: 'Titillium Web', sans-serif;

        text-decoration: none;

        float: left;

        display: block;

        padding: 20px 15px;

        color:gray;

        background-color:white;

    }

    .icons a:hover{

        color:purple;
    }





* --------------------------------------
   Carousel
   -------------------------------------- */

#myCarousel {
    margin-top: 300px;
    background-color:gray;
}

.carousel-caption {
    font-size: 24px;
}

.carousel-caption h4 {
    font-size: 32px;

}


#myCarousel .item { height: 700px; }

#slide1 {
    background: url('../img/best-slide.png') top center no-repeat;
}

#slide2 {
    background: url('../img/good.png') top center no-repeat;
}

#slide3 {
    background: url('../img/slide3.png') top center no-repeat;
}

twitter-bootstrap-3

html

css

回答 1

Stack Overflow用户

发布于 2015-06-18 19:43:50

您可以在导航栏上抛出一个底部边框，并修改边框的css，以便在导航栏和页面的其余部分之间留出空间。您还忘记了旋转木马的div标记中的data-ride="carousel"。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30924246

复制

相似问题

问带图标和旋转木马的引导3 Navbar
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带图标和旋转木马的引导3 NavbarEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带图标和旋转木马的引导3 Navbar
EN