Question

我正在尝试制作Google第一页副本，但是页脚有问题。我的副本页脚如下所示：

我正在努力实现这一目标：

关于隐私，条款和设置的那部分，我想让它保持在同一位置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google</title>
    <!-- font awesome -->
    <script
      src="https://kit.fontawesome.com/8370b7a799.js"
      crossorigin="anonymous"
    ></script>
    <!-- custom css -->
    <link rel="stylesheet" href="styles.css" />
    <!-- Bootstrap -->
  </head>
  <body>
    <nav class="nav-bar">
      <a href="#">Gmail</a>
      <a href="#">Images</a>
      <a href="#"><i class="fab fa-buromobelexperte fa-lg"></i></a>
      <a href="#" id="account-nav-link">S</a>
    </nav>
    <main class="main-google">
      <div class="content">
        <div class="img-div">
          <img src="google.png" />
        </div>
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input type="text" />
          <i class="fas fa-microphone"></i>
        </div>
        <div class="search-buttons">
          <button class="changed-button">Google Search</button>
          <button class="changed-button">I'm Felling Lucky</button>
        </div>
        <div class="lang-div">
          <span>Google offered in:</span>
          <a href="#">Romana</a>
          <a href="#">magyar</a>
          <a href="#">Deutsch</a>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div>
        <p class="location">Romania</p>
      </div>
      <div class="footer-link-bar">
        <a href="#">Advertising</a>
        <a href="#">Business</a>
        <a href="#">About</a>
        <a href="#">How Search works</a>
        <span class="footer-links-right">
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Settings</a>
        </span>
      </div>
    </footer>
  </body>
</html>

将跨度移到页脚之外是否更好？

CSS

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.footer div {
  background: #f2f2f2;
  border: 1px solid #e4e4e4;
  line-height: 40px;
  font-family: arial, sans-serif;
  font-size: 15px;
}

.location {
  color: rgba(0, 0, 0, 0.54);
  padding-left: 25px;
}

.footer div a {
  margin-left: 25px;
  text-decoration: none;
  color: #5f6368;
}

.footer div a:hover {
  border-bottom: 1px solid #5f6368;
}

.footer-links-right {
  right: 0;
  position: fixed;
}

.footer span a {
  margin-right: 27px;
  margin-left: 0;
}

对于文本装饰，我试图修改text-decoration-thickness，但是它不起作用，所以我使用了边框底部，但是使用tect-decoration对我来说还有另一种可能性吗？

Answer 1

为页脚添加固定的最小宽度，而不是百分比。

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-width: 750px; /* footer doesn't shrink less than 750px */
}

您应该根据需要将其添加到整个页面的容器中。

body {
    width: 100vw; /* maintain width of 100 view width(users viewpoint)** */
    min-width: 750px; /* body doesn't shrink less than 750px */
}

**相对长度=> https://www.w3schools.com/cssref/css_units.asp

水平滚动时，元素位置保持在同一位置

1 个答案: