Html 无法更改底部导航栏的背景色_Html_Css - Fatal编程技术网

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/74.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/docker/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 无法更改底部导航栏的背景色_Html_Css - Fatal编程技术网

Html 无法更改底部导航栏的背景色

html css

Html 无法更改底部导航栏的背景色,html,css,Html,Css,我正试图创建一个谷歌主页的克隆，作为我的第一个html/css项目之一。这是我第一次编码，我在设置屏幕底部导航栏的背景颜色时遇到了麻烦。我可以设置上部导航栏（上面有国家名称的导航栏）的背景色，但当我尝试设置下部导航栏（带有广告和商业链接的导航栏）的背景色时，它不会显示，并且导航栏保持白色这是我下面导航栏的html代码 <footer class="bottom_nav"> <div class="country_nav">

我正试图创建一个谷歌主页的克隆，作为我的第一个html/css项目之一。这是我第一次编码，我在设置屏幕底部导航栏的背景颜色时遇到了麻烦。我可以设置上部导航栏（上面有国家名称的导航栏）的背景色，但当我尝试设置下部导航栏（带有广告和商业链接的导航栏）的背景色时，它不会显示，并且导航栏保持白色

这是我下面导航栏的html代码

<footer class="bottom_nav">
    <div class="country_nav">
        <ul>
            <li>Canada</li>
        </ul>
    </div>
    
    <div class="bottom_nav_l">
        <ul>
            <li><a href="#advertising">Advertising</a></li>
            <li><a href="#business">Business</a></li>
            <li><a href="#howsearchworks">How Search Works</a></li>
        <ul>
    </div>

    <div class="bottom_nav_r">
        <ul>
            <li><a href="#settings">Settings</a></li>
            <li><a href="#terms">Terms</a></li>
            <li><a href="#privacy">Privacy</a></li>
        </ul>
    </div>
</footer>

这就是该页面的外观，以供参考。我希望最低的栏也是灰色的。

有人能帮我吗？

尝试添加以下css：

.bottom_nav{
background-color:blue;
}

尝试添加以下css：

.bottom_nav{
background-color:blue;
}

您不需要使用

ul

li

。您可以将

底部链接

包装到div中，并使用

display:flex

和

justfify content:space-between

在链接之间留出空间

我还修改了

链接，添加了填充和

文本装饰：无

演示中谷歌页脚的精确副本

工作演示：

运行下面的代码段

.country\u nav{
背景色：#F2F2；
颜色：rgba（0,0,0,0.54）；
边框：1px实心#e4；
填充顶部：10px；
垫底：10px；
左侧填充：27px；
}
.bottom_nav_l li a{
显示：块；
文字装饰：无；
}
.底部导航李a{
显示：块；
文字装饰：无；
颜色：rgba（0,0,0,0.54）；
}
.bottom_nav_l li a:悬停{
文字装饰：下划线；
}
.底部导航李a：悬停{
文字装饰：下划线；
}
.底部导航{
右边填充：27px；
}
.底部导航{
填充顶部：170px；
}
.底部链接{
显示器：flex；
证明内容：之间的空间；
线高：40px；
背景#f2f2；
}
a{
文字装饰：无；
空白：nowrap；
颜色：#5f6368；
左侧填充：27px；
}


加拿大

您不需要使用

ul

li

。您可以将

底部链接

包装到div中，并使用

display:flex

和

justfify content:space-between

在链接之间留出空间

我还修改了

链接，添加了填充和

文本装饰：无

演示中谷歌页脚的精确副本

工作演示：

运行下面的代码段

.country\u nav{
背景色：#F2F2；
颜色：rgba（0,0,0,0.54）；
边框：1px实心#e4；
填充顶部：10px；
垫底：10px；
左侧填充：27px；
}
.bottom_nav_l li a{
显示：块；
文字装饰：无；
}
.底部导航李a{
显示：块；
文字装饰：无；
颜色：rgba（0,0,0,0.54）；
}
.bottom_nav_l li a:悬停{
文字装饰：下划线；
}
.底部导航李a：悬停{
文字装饰：下划线；
}
.底部导航{
右边填充：27px；
}
.底部导航{
填充顶部：170px；
}
.底部链接{
显示器：flex；
证明内容：之间的空间；
线高：40px；
背景#f2f2；
}
a{
文字装饰：无；
空白：nowrap；
颜色：#5f6368；
左侧填充：27px；
}


加拿大

我希望这会对你有所帮助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .country_nav {
            background-color: #f2f2f2;
            color: rgba(0,0,0,0.54);
            border-top: 1px solid #ededed;
            padding-top: -1px;
            padding-bottom: 1px;
            padding-left: 25px;
        }

        .country_nav li {
            font-size: 14px;
            font-family: arial, sans-serif;
            margin-left: -10px;
        }

        section{
            background-color: #ebebeb;
        }

        .bottom_nav_l li {
            float: left;
            margin: 10px;
            font-size: 14px;

        }

        .bottom_nav_r li {
            float: right;
            margin: 10px;
            font-size: 14px;
            list-style-type: none;
        }

        .bottom_nav_l li a {
            display: block;
            margin-left: -10px;
            text-decoration: none;
            color: rgba(0,0,0,0.54);
        }

        ul {
            list-style-type: none;
        }

        .bottom_nav_r li a {
            display: block;
            text-decoration: none;
            color: rgba(0,0,0,0.54);
        }

        .bottom_nav_l li a:hover {
            text-decoration: underline;
        }

        .bottom_nav_r li a:hover {
            text-decoration: underline;
        }

        .bottom_nav_l {
            padding-left: 15px;
            background-color: #f2f2f2;
        }

        .bottom_nav_r {
            padding-right: 15px;
            background-color: #d7d7d7;
        }

        .bottom_nav {
            padding-top: 0px;
            position: relative;
            top: 460px;
        }
    </style>
</head>
<body>

<footer class="bottom_nav">
    <div class="country_nav">
        <ul>
            <li>Canada</li>
        </ul>
    </div>
    <section>
        <div class="bottom_nav_l">
            <ul>
                <li><a href="#advertising">Advertising</a></li>
                <li><a href="#business">Business</a></li>
                <li><a href="#howsearchworks">How Search Works</a></li>
                <ul>
        </div>

        <div class="bottom_nav_r">
            <ul>
                <li><a href="#settings">Settings</a></li>
                <li><a href="#terms">Terms</a></li>
                <li><a href="#privacy">Privacy</a></li>
            </ul>
        </div>
    </section>

</footer>
</body>
</html>


标题
.国家导航{
背景色：#F2F2；
颜色：rgba（0,0,0,0.54）；
边框顶部：1px实心#ededed；
衬垫顶部：-1px；
垫底：1px；
左侧填充：25px；
}
李国荣{
字体大小：14px；
字体系列：arial，无衬线；
左边距：-10px；
}
部分{
背景色：#ebebebeb；
}
.bottom_nav_l li{
浮动：左；
利润率：10px；
字体大小：14px；
}
.底部导航李{
浮动：对；
利润率：10px；
字体大小：14px；
列表样式类型：无；
}
.bottom_nav_l li a{
显示：块；
左边距：-10px；
文字装饰：无；
颜色：rgba（0,0,0,0.54）；
}
保险商实验室{
列表样式类型：无；
}
.底部导航李a{
显示：块；
文字装饰：无；
颜色：rgba（0,0,0,0.54）；
}
.bottom_nav_l li a:悬停{
文字装饰：下划线；
}
.底部导航李a：悬停{
文字装饰：下划线；
}
.底部导航{
左侧填充：15px；
背景色：#F2F2；
}
.底部导航{
右侧填充：15px；
背景色：#d7d7d7；
}
.底部导航{
填充顶部：0px；
位置：相对位置；
顶部：460px；
}

加拿大

我希望这会对你有所帮助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .country_nav {
            background-color: #f2f2f2;
            color: rgba(0,0,0,0.54);
            border-top: 1px solid #ededed;
            padding-top: -1px;
            padding-bottom: 1px;
            padding-left: 25px;
        }

        .country_nav li {
            font-size: 14px;
            font-family: arial, sans-serif;
            margin-left: -10px;
        }

        section{
            background-color: #ebebeb;
        }

        .bottom_nav_l li {
            float: left;
            margin: 10px;
            font-size: 14px;

        }

        .bottom_nav_r li {
            float: right;
            margin: 10px;
            font-size: 14px;
            list-style-type: none;
        }

        .bottom_nav_l li a {
            display: block;
            margin-left: -10px;
            text-decoration: none;
            color: rgba(0,0,0,0.54);
        }

        ul {
            list-style-type: none;
        }

        .bottom_nav_r li a {
            display: block;
            text-decoration: none;
            color: rgba(0,0,0,0.54);
        }

        .bottom_nav_l li a:hover {
            text-decoration: underline;
        }

        .bottom_nav_r li a:hover {
            text-decoration: underline;
        }

        .bottom_nav_l {
            padding-left: 15px;
            background-color: #f2f2f2;
        }

        .bottom_nav_r {
            padding-right: 15px;
            background-color: #d7d7d7;
        }

        .bottom_nav {
            padding-top: 0px;
            position: relative;
            top: 460px;
        }
    </style>
</head>
<body>

<footer class="bottom_nav">
    <div class="country_nav">
        <ul>
            <li>Canada</li>
        </ul>
    </div>
    <section>
        <div class="bottom_nav_l">
            <ul>
                <li><a href="#advertising">Advertising</a></li>
                <li><a href="#business">Business</a></li>
                <li><a href="#howsearchworks">How Search Works</a></li>
                <ul>
        </div>

        <div class="bottom_nav_r">
            <ul>
                <li><a href="#settings">Settings</a></li>
                <li><a href="#terms">Terms</a></li>
                <li><a href="#privacy">Privacy</a></li>
            </ul>
        </div>
    </section>

</footer>
</body>
</html>


标题
.国家导航{
背景色：#F2F2；
颜色：rgba（0,0,0,0.54）；
边框顶部：1px实心#ededed；
衬垫顶部：-1px；
垫底：1px；
左侧填充：25px；
}
李国荣{
字体大小：14px；
字体系列：arial，sans-se

[css]相关文章推荐

随机文章推荐