时间戳

首页 > 解决方案 > 无法更改底部导航栏的背景颜色

html - 无法更改底部导航栏的背景颜色

问题描述

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

这是我用于下部导航栏的 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

.country_nav {
    background-color: #f2f2f2;
    color: rgba(0,0,0,0.54);
    border-top: 1px solid #e4e4e4;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
}

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

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

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

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

.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: #f2f2f2;
}

.bottom_nav {
    padding-top: 170px;
}

这是该页面的外观以供参考。我希望最低的栏也是灰色的。 谷歌主页克隆

谁能帮我吗？

标签： htmlcss

解决方案

我希望这能帮到您..

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

推荐阅读