创建正确对齐的页脚答案

【问题标题】：Create a correctly aligned footer创建正确对齐的页脚
【发布时间】：2021-09-09 07:44:00
【问题描述】：

我创建了一个页脚，我想在我的网站上复制，经过多次测试，这是获得的最佳结果：

我要制作的页脚图片：https://i.imgur.com/QpmoreU.png

请问如何匹配我网站上的图片？我已经尝试了很多事情，以至于我什至不明白我在做什么，如果您有任何解释和帮助，我会很高兴...

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 16px;
    color: rgba(0, 0, .87);
    font-family: "Montserrat", sans serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-weight: 500;
    width: 100%;
}

.topbar {
    height: 80px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
    display: flex;
    align-items: center;
    width: 100%;
    background-image: url(img/background.svg);  
    background-color: rgba(62,62,62, 1);
}

.topbar nav {
    display: flex;
    width: 100%;
}

.middle {
  margin: 0 auto;
}

.topbar nav a {
    color: #9F9F9F;
    text-decoration: none;
    font-weight: 500;
    padding: 0 20px;
    display: inline-block;
    text-align: center;
    font-size: 21px;
}

.topbar nav a:hover, .topbar nav a.active {
    color: #94C8D0;
}


.header-logo {
  padding: 0px 20px;
    cursor: pointer;
    width: 25vh;
}

.login {
  display: flex;
  justify-content: end;
  flex-direction: row-reverse;
}

.login_btn {
  margin: auto 25px auto;
  background-color: #EEEEEE;
  color: #3b3b3b;
}

.circuit {
  background-image: url(img/background.svg);    
  background-color: rgba(62,62,62, 1);
  padding: 192px 0 112px;
}

.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.header_title {
  text-align: center;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 1000;
  font-size: 72px;
  word-spacing: 0px;
  margin: 0px;
  padding: 0px;
  letter-spacing: normal;
  line-height: 72px;
}

.header_second_title {
  text-align: center;
  color: #9F9F9F;
  font-family: 'Inter';
  font-size: 30px;
  margin: 16px 0px 0px;
  padding: 0px;
  line-height: 36px;
  font-weight: 500;
}


.container {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.invite_btn {
  font-size: 24px;
  font-family: 'Inter';
  background-color: #1A9BB6;
  color: #ffffff;
  border: none;
  text-align: center;
  text-decoration: none;
  padding: 15px 32px;
  
}

.support_btn {
  font-size: 24px;
  font-family: 'Inter';
  background-color: #EEEEEE;
  color: #282828;
  border: none;
  text-align: center;
  text-decoration: none;
  padding: 15px 32px;
}

h1 {
  text-align: center;
  color: #9F9F9F;
}

h2 {
  text-align: center;
  color: #9F9F9F;
}

  #footer {
    font-family: sans-serif;
    display: grid;
    height: 20%;
    background-color: black;
    color: white;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr .6fr .6fr 1fr;
    grid-template-areas: "logo product resources business" 
    "social . . design";
}
  
  li {
    list-style: none;
    padding-top: 8%;
    font-size: .9em;
    line-height: 1px;
}
  
  .flex {
    display: flex;
    justify-content: end;
}
  
  #footer li a {
    color: rgb(22,145,176);
    text-decoration: none;
}
  
  .logo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-area: logo;
    padding-left: 1rem;
    padding-top: .5rem;
}
  
  .img {
    padding-top: .5rem;
    width: 25vh;
    cursor: pointer;
}
  
  .logo h4 {
    line-height: 1rem;
    margin-left: 2rem;
}
  
  .copyright {
    padding-top: .3rem;
    font-size: 1em;
    color: rgb(97,97,97);
}
  
  .product {
    grid-area: product;
    font-size: 20px;
    padding-top: .5rem;
}
  
  .resources {
    grid-area: resources;
    font-size: 20px;
    padding-top: .5rem;
}
  
  .business {
    grid-area: business;
    font-size: 20px;
}

.social { 
    grid-area: social;
    padding-top: 1em;
    padding-left: 1em;
    cursor: pointer;
}

.design {
    grid-area: design;
    font-size: 1em;
    text-align: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poseidon | The Perfect Discord Bot</title>

    <link rel="stylesheet" href="main.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">

</head>

<body>

    <header class="topbar">
        <a href="#"><img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html"></a>
        <nav>
            <div class="middle">
                <a href="invite.html">Invite</a>
                <a href="commands.html">Commands</a>
                <a href="documentation.html">Documentation</a>
                <a href="premium.html">Premium</a>
                <a href="support.html">Support</a>
                
                <div class="login">
                    <a href="" class="login_btn">Login<i class="fas fa-sign-in-alt"></i></a>
                </div>
            </div>

            
        </nav>
    </header>

    <div class="circuit">
        <h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
        <h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2> 
        <div class='container'>
            <a href="#" class="invite_btn">Invite</a>
            <a href="#" class="support_btn">Support</a>
            </div>
    </div>


    <div class="dark">
        <h1>The Perfect Discord Bot.</h1>
        <h2>Poseidon is the only Discord bot you'll ever need!</h2>

        <h1>The Perfect Discord Bot.</h1>
        <h2>Poseidon is the only Discord bot you'll ever need!</h2>

        <h1>The Perfect Discord Bot.</h1>
        <h2>Poseidon is the only Discord bot you'll ever need!</h2>
    </div>

    <div class="circuit">
        <h1>The Perfect Discord Bot.</h1>
        <h2>Poseidon is the only Discord bot you'll ever need!</h2>
    </div>

    <div id="footer">
        <div class="logo">
            <div class="flex">
                <img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
            </div>


            <div class="copyright">&#169; Poseidon Bot 2012 - All Rights Reserved.</div>
        </div>
        <ul class="product">
            <li><b>Product</b></li>
            <li><a href="#">Invite</a></li>
            <li><a href="#">Commands</a></li>
            <li><a href="#">Premium</a></li>
        </ul>
        <ul class="resources">
            <li><b>Resources</b></li>
            <li><a href="#">Docs</a></li>
            <li><a href="#">Provacy</a></li>
            <li><a href="#">Refunds</a></li>
        </ul>
        <ul class="business">
            <li><b>Business</b></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="design">
            designed with <span style="color: red;">&#10084;</span> by <span style="color: #00e09d;">My Discord
                ID</span></div> <!-- Javascript clickable text // add js function -->
        <div class="social">
            <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
            <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
            <a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
        </div>
    </div>
</body>

</html>

【问题讨论】：

看起来够近了。你可以说得更详细点吗？如果希望它与图像完全相同，只需添加边距和填充以匹配间距。
基本上定位不一样，文本没有居中/对称性不好，是的，我尝试了填充和边距，但不幸的是，正如我所说，我根本没有成功.. . 这就是为什么图像的结果和我的网站的渲染如此不同的原因是有不同的问题可能是我无法识别它们我仍然是初学者 x)

标签： html css footer

【解决方案1】：

我只是将一个新类添加为 .links 并修复您的产品资源和业务，您可以检查它，并对右下边缘文本进行一些更改，将页脚相对和文本设置为 absoulte right:0 bottom: 0 并制作文字更小。希望有所帮助。

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 16px;
    color: rgba(0, 0, .87);
    font-family: "Montserrat", sans serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-weight: 500;
    width: 100%;
}



.circuit {
  background-image: url(img/background.svg);    
  background-color: rgba(62,62,62, 1);
  padding: 192px 0 112px;
}

.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}


h1 {
  text-align: center;
  color: #9F9F9F;
}

h2 {
  text-align: center;
  color: #9F9F9F;
}

  #footer {
    font-family: sans-serif;
    display: flex;
    height: 20%;
    background-color: black;
    color: white;
    padding-top:3em;
    position:relative;
    justify-content:space-between;
}
  
  li {
    list-style: none;
    padding-top: 8%;
    font-size: .9em;
    line-height: 1px;
}
  
  .flex {
    display: flex;
    justify-content: end;
}
  .links{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:50%;
  }
  #footer li a {
    color: rgb(22,145,176);

    text-decoration: none;
}
  
  .logo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-area: logo;
    padding-left: 1rem;
    padding-top: .5rem;
    padding-bottom:2rem;
    width:40%;
}
  
  .img {
    padding-top: .5rem;
    width: 25vh;
    cursor: pointer;
}
  .right-side{
    width:60%;
    display:flex;
  }
  .right-side div{
    margin-right:2em;
  }
   .right-side div b{
    display:inline-block;
    padding-bottom:1em;
  }
  .logo h4 {
    line-height: 1rem;
    margin-left: 2rem;
}
  
  .copyright {
    padding-top: .3rem;
    font-size: 0.7em;
    color: rgb(97,97,97);
}
  
  .product {
    grid-area: product;
    font-size: 20px;
    padding-top: .5rem;
}
  
  .resources {
    grid-area: resources;
    font-size: 20px;
    padding-top: .5rem;
}
  
  .business {
    grid-area: business;
    font-size: 20px;
}

.social { 
    position:absolute;
    bottom:0;
    left:1em;
    cursor: pointer;
}

.design {
    grid-area: design;
    position:absolute;
    right:0;
    bottom:0;
    font-size: 1em;
    text-align: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poseidon | The Perfect Discord Bot</title>

    <link rel="stylesheet" href="main.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">

</head>

<body>



    <div id="footer">
        <div class="logo">
            <div class="flex">
                <img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
            </div>


            <div class="copyright">&#169; Poseidon Bot 2012 - All Rights Reserved.</div>
        </div>
        <div class="right-side">
          <div>
            <b>Product</b>
            <ul class="links">

                <li><a href="#">Invite</a></li>
                <li><a href="#">Commands</a></li>
                <li><a href="#">Premium</a></li>
            </ul>
          </div>
          <div>
            <b>Resources</b>
            <ul class="links">

                <li><a href="#">Docs</a></li>
                <li><a href="#">Provacy</a></li>
                <li><a href="#">Refunds</a></li>
            </ul>
          </div>
          <div>
            <b>Business</b>
            <ul class="links">

                <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>
        <div class="design">
            designed with <span style="color: red;">&#10084;</span> by <span style="color: #00e09d;">My Discord ID</span></div> <!-- Javascript clickable text // add js function -->
        <div class="social">
            <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
            <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
            <a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
        </div>
    </div>
</body>

</html>

【讨论】：

我觉得更糟:(i.imgur.com/5Bi4itP.png
其实：HTML：bin.readthedocs.fr/erbonf.txtCSS：bin.readthedocs.fr/rankey.txt
:( 试试这个。我实际上得不到你想要的。
哪一个没看懂？

【解决方案2】：

试试这个怎么样？我只保留了与页脚部分相关的代码。

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  font-size: 16px;
  color: rgba(0, 0, .87);
  font-family: "Montserrat", sans serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  font-weight: 500;
  width: 100%;
}

#footer {
  font-family: sans-serif;
  display: grid;
  height: 20%;
  background-color: black;
  color: white;
  grid-template-rows: 1fr;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  grid-template-areas: "logo product resources business" "social . . design";
  align-items: flex-start;
}

#footer ul {
  margin-top: .5rem;
}

#footer ul li {
  list-style: none;
  padding-top: 5%;
  font-size: 1rem;
  line-height: 1px;
  margin-top: 10px;
}

.flex {
  display: flex;
  justify-content: end;
}

#footer ul li a {
  color: rgb(22, 145, 176);
  text-decoration: none;
  font-size: .7rem;
}

.logo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  grid-area: logo;
  padding-left: 1rem;
  padding-top: .5rem;
}

.img {
  padding-top: .5rem;
  width: 25vh;
  cursor: pointer;
}

.logo h4 {
  line-height: 1rem;
  margin-left: 2rem;
}

.copyright {
  padding-top: .3rem;
  font-size: .65em;
  color: rgb(97, 97, 97);
}

.product {
  grid-area: product;
  font-size: 20px;
}

.resources {
  grid-area: resources;
  font-size: 20px;
}

.business {
  grid-area: business;
  font-size: 20px;
}

.social {
  grid-area: social;
  padding-top: 1em;
  padding-left: 1em;
  cursor: pointer;
}

.design {
  grid-area: design;
  font-size: 1em;
  text-align: right;
  align-self: end;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Poseidon | The Perfect Discord Bot</title>
  <link rel="stylesheet" href="main.css">
  <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>

<body>
  <div id="footer">
    <div class="logo">
      <div class="flex">
        <img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
      </div>
      <div class="copyright">&#169; Poseidon Bot 2012 - All Rights Reserved.</div>
    </div>
    <ul class="product">
      <li><b>Product</b></li>
      <li><a href="#">Invite</a></li>
      <li><a href="#">Commands</a></li>
      <li><a href="#">Premium</a></li>
    </ul>
    <ul class="resources">
      <li><b>Resources</b></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Provacy</a></li>
      <li><a href="#">Refunds</a></li>
    </ul>
    <ul class="business">
      <li><b>Business</b></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div class="design">
      designed with <span style="color: red;">&#10084;</span> by <span style="color: #00e09d;">My Discord
                ID</span></div>
    <!-- Javascript clickable text // add js function -->
    <div class="social">
      <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
      <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
      <a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
    </div>
  </div>
</body>

</html>

希望这能解决您的问题！

【讨论】：

仍然不适合我屏幕上的内容，它甚至比以前更糟糕，谢谢：/