Fatal编程技术网
  • html/
  • Html 如何更改导航栏文本和中心导航栏文本的文本颜色？

Html 如何更改导航栏文本和中心导航栏文本的文本颜色？

html css

Html 如何更改导航栏文本和中心导航栏文本的文本颜色？,html,css,Html,Css,我想知道如何在导航栏文本出现时以及当用户将鼠标悬停在其上时更改其颜色？我知道我必须使用CSS。然而，我不确定我必须从html中选择什么类。这是我的名片 此外，我怎样才能居中我的导航条文本，因此，它位于居中我已经编写了CSS来完成所有请求的事情。但是，识别类的问题是我的问题。因此，有人能帮我识别什么类名需要放在CSS中的什么位置吗 此外，我在下面列出了导航栏的HTML代码 <body> <nav class="navbar navbar-default">

我想知道如何在导航栏文本出现时以及当用户将鼠标悬停在其上时更改其颜色？我知道我必须使用CSS。然而，我不确定我必须从html中选择什么类。这是我的名片

此外，我怎样才能居中我的导航条文本，因此，它位于居中我已经编写了CSS来完成所有请求的事情。但是，识别类的问题是我的问题。因此，有人能帮我识别什么类名需要放在CSS中的什么位置吗

此外，我在下面列出了导航栏的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.navbar-default {
        background-color: #4D5061;
        height: 10vh;
    }
    .navbar.navbar-default ul {
        list-style-type: none;
        text-align: center;
    }
    .navbar.navbar-default ul li {
        display: inline-block;
    }
    .navbar.navbar-default ul li a {
        display: inline-block;
        padding: 3.5vh 8px 4px;
        color: white;
        text-decoration: none;
        font-size: 14pt;
        font-family: 'Roboto', sans-serif;
    }
    .navbar.navbar-default ul li:after {
        content: '';
        position: absolute;
        right: 50%;
        bottom: 0;
        left: 50%;
        height: 3px;
        background-color:red;
        border-radius: 9px;
        transition:all .2s;
    }
    .navbar.navbar-default 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: 90vh;
        background-color: #FFFFFF;
        text-align: center;
    }
    .section2 {
        height: 95vh;
        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>


身体{
保证金：0；
填充：0；
}
.navbar.navbar-default{
背景色：#4D5061；
高度：10vh；
}
.navbar.navbar-default ul{
列表样式类型：无；
文本对齐：居中；
}
.navbar.navbar-default ul li{
显示：内联块；
}
.navbar.navbar-默认ul li a{
显示：内联块；
填充：3.5vh 8px 4px；
颜色：白色；
文字装饰：无；
字号：14pt；
字体系列：“Roboto”，无衬线；
}
.navbar.navbar-默认ul li:之后{
内容：''；
位置：绝对位置；
右：50%；
底部：0；
左：50%；
高度：3倍；
背景色：红色；
边界半径：9px；
过渡：all.2s；
}
.navbar.navbar-默认ul li:悬停：之后{
右：0；
左：0；
}
a:悬停{
颜色：红色；
文字装饰：无；
}
#标志{
填充顶部：2vh；
左侧填充：20px；
浮动：左；
}
部分{
位置：相对位置；
}
.第1节{
高度：90vh；
背景色：#FFFFFF；
文本对齐：居中；
}
.第2节{
高度：95vh；
背景色：#A59E8C；
文本对齐：居中；
颜色：白色；
}
.联络联络联络组{
高度：93vh；
背景颜色：灰色；
}
.标志{
颜色：#000000；
字体大小：200px；
}
.fa角向下{
颜色：#4D5061；
位置：绝对位置；
底部：0px；
}
页脚{
高度：10vh；
}
您必须将
.navbar.navbar-default ul li a
更改为正常字体颜色

.navbar.navbar-default ul li a {
    display: inline-block;
    padding: 3.5vh 8px 4px;
    color: white;                     <-- There you can change the color
    text-decoration: none;
    font-size: 14pt;
    font-family: 'Roboto', sans-serif;
}
来源：

1）如果你只是检查一下，你可以看到

.navbar default.navbar nav>li>a:focus，
.navbar默认值.navbar导航>li>a:悬停{
颜色：#333；
背景色：透明；

}
要更改链接悬停颜色，此特性将用现有标记覆盖引导的CSS

.navbar-default.navbar .navbar-nav>li>a:hover {
  color: pink;
}
以使导航文本居中。您已经有
文本对齐：居中打开
.navbar.navbar-default ul
和
显示：内联块在
.navbar.navbar-default ul li
上，因此您只需不浮动
ul
和
li


.nav.navbar-nav, .nav.navbar-nav>li {
  float: none;
}



.nav.navbar-nav, .nav.navbar-nav>li {
  float: none;
}



要更改导航栏链接的颜色，请执行以下操作：


.navbar.navbar-default ul li a:hover {
  color: green;
}


将导航栏居中（将我的答案替换为，因为他的解决方案要好得多）：


.nav.navbar-nav, .nav.navbar-nav>li {
  float: none;
}