Question

我正在尝试创建google主页的克隆，这是我的第一个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;
}

这是页面的外观，仅供参考。我也希望最低的条也为灰色。 google homepage clone

有人可以帮我吗？

Answer 1

尝试添加以下CSS：

var form = document.querySelector('form');
var data = new FormData(form);

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       console.log(this.responseText);
    }
  };
  xhttp.open("POST", "<YOUR-URL>", true);
  xhttp.send(data);
}

Answer 2

您不需要使用fetch() ul。您可以将li包装到div中，并使用bottom link和display: flex在链接之间留出空间。

我还通过添加填充和justfify-content:space-between

来修改a链接以与Google页脚完全匹配

演示中的Google页脚的完整副本。

正在运行的演示：https://jsfiddle.net/kx291hqm/

运行下面的代码段。

text-decoration:none

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


.bottom_nav_l li a {
    display: block;
    text-decoration: 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_r {
    padding-right: 27px;
}

.bottom_nav {
    padding-top: 170px;
}

.bottom_link {
      display: flex;
    justify-content: space-between;
        line-height: 40px;
        background: #f2f2f2;
}
a {
  text-decoration: none;
    white-space: nowrap;
   color: #5f6368;
   padding-left: 27px;
}

Answer 3

希望这对您有帮助。

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

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

3 个答案: