Question

我想知道如何更改导航栏文本背后的背景颜色和高度？我知道我必须使用CSS。但是，我不确定我必须从html中选择哪个类。这是我的codepen。

此外，我已在下面列出了导航栏的HTML代码。

<body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- 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="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></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><a href="#">Home</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <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>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">One more separated link</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <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>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">One more separated link</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Clients</a>
                            </li>
                            <li><a href="#contact-me">Contact Me</a>
                            </li>
                        </ul>
                      </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
        </nav>

下面的CSS代码。（问题可能是样式表的引导方法吗？）

<style>
    body {
        margin: 0;
        padding: 0;
    }
    navbar-header {
        height: 15vh;
        background-color: #4D5061;
    }
    nav ul {
        list-style-type: none;
        text-align: center;
    }
    nav ul li {
        display: inline-block;
    }
    nav ul li a {
        display: inline-block;
        padding: 3.5vh 8px 4px;
        color: white;
        text-decoration: none;
        font-size: 14pt;
        font-family: 'Roboto', sans-serif;
    }
    nav ul li:after {
        content: '';
        position: absolute;
        right: 50%;
        bottom: 0;
        left: 50%;
        height: 3px;
        background-color: red;
        border-radius: 9px;
        transition:all .2s;
    }
    nav ul li:hover:after {
        right: 0;
        left: 0;
    }
    a:hover {
        color:red;
        text-decoration:none;
    }
    #logo {
        padding-top: 2vh;
        padding-left: 20px;
        float: left;
    }
    section {
        position: relative;
    }
    .section1 {
        height: 93vh;
        background-color: #FFFFFF;
        text-align: center;
    }
    .section2 {
        height: 93vh;
        background-color: #A59E8C;
        text-align: center;
        color: white;
    }
    .contact_section {
        height: 93vh;
        background-color: grey;
    }
    .logo {
        color: #000000;
        font-size: 200px;
    }
    .fa-angle-down {
        color: #4D5061;
        position: absolute;
        bottom: 0px;
    }
    footer {
        height: 10vh;
    }
</style>

亲切的问候，小连

Answer 1

.navbar.navbar-default将使用您现有的标记来定位它，并具有足够的特异性来覆盖bootstrap的默认样式。

.navbar.navbar-default {
  background: red;
  min-height: 200px;
}

Answer 2

您可以使用＆＃39; .navbar span＆＃39;选择器，它应该适用于导航栏内的所有span标签如果您只想选择特定的范围标记，则可以更改＆＃39; span＆＃39;在我上面写的选择器中，你想要修改的span标签的类名让我知道它是否有效

如何更改导航栏文本背后的背景颜色和高度？

2 个答案: