如何创建左侧带有徽标的页脚

Question

几天来，我一直在尝试创建一个与我的网站风格一致的页脚，该网站本身正在创建过程中，但已经定义了样式

我有一张图片来说明页脚“我的梦想”:p 我想知道如何创建它？我想创建包含 <p> 和 <a> 的 div，标题的 <p> 和包含不同链接的 <a>

这是我希望在我的网站上拥有的图片：https://prnt.sc/13kr8kt

有人知道如何正确地向我解释吗？因为我尝试了但不幸的是不可能成功...我想了解我的错误提前感谢！

这是我的代码：

* {
  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;
  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 16px;
}

.topbar {
  height: 80px;
  background-color: #fff;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
  display: flex;
  align-items: center;
  width: 100%;
}

.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;
}

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

.header-logo {
  cursor: pointer;
  width: 25vh;
}

h1 {
  text-align: center;
  color: #fff;
}

.footer {
  color: #fff;
  background-color: rgb(9, 9, 9);
  padding: 100px;
}

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

  <header class="topbar">
    <a href="#"><img class="header-logo" src="img/logo.svg" alt="Kurium 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="support.html">Support</a>
      </div>
      <div class="right">
        <a href="/">Social 1</a>
        <a href="/">Social 2</a>
      </div>
    </nav>
  </header>


</head>

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

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

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

  <div class="dark">
    <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 class="footer">
    <footer>
      Copyright
    </footer>
  </div>
</body>

</html>

Answer 1

在徽标元素上使用带有弹性的网格布局。使用网格布局，您可以使用 grid-template-columns: 表达您希望列的宽度，然后在网格父级中调用每个选择器上的网格区域。您可能需要根据自己的喜好进行一些调整，具体取决于您要使用的视口。

对您希望排成一行的子项使用 flex。简单 Ul/li 链接...

/* for display purposes in this snippit only adding margin and padding 
   to your body may have a negatrive affect on your display in your browser */

body {
  margin: 0;
  padding: 0;
}


/**/

#footer {
  position: relative;
  font-family: sans-serif;
  height: 20%;
  background-color: black;
  color: white;
  display: grid;
  grid-template-columns: 2fr 0.9fr 0.7fr 0.2fr 1.2fr;
  grid-template-rows: 1.9fr 0.1fr;
  grid-template-areas: 
  "logo product resource resource business"   
  "social social . design design";
}

li {
  list-style: none;
  padding-top: 2%;
  font-size: .9em;
}

.flex {
  display: flex;
}

#footer li a {
  color: #065299;
  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: 60px;
  height: 50px;
}

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

.copy {
  padding-top: .3rem;
  font-size: .7em;
  color: #7d8287;
}

.product {
  grid-area: product;
}

.resource {
  grid-area: resource;
}

.business {
  grid-area: business;
}

.social { 
  grid-area: social;
  padding-left: .3rem;
  padding-bottom: .3rem; 
  font-size: .6em;
  display: flex;
}

.design {
  grid-area: design;
  font-size: .6em;
  text-align: right;
  padding-right: .3rem;
  padding-bottom: .3rem;
}

.icons {
  width: 1rem;
  height: 1rem;
  padding-left: .3rem;
}

<div id="footer">
  <div class="logo">
    <div class="flex">
      <img class="img" src="https://thumb9.shutterstock.com/image-photo/redirected-150nw-795281602.jpg">
      <h4>My Company</h4>
    </div>

    <div class="copy">&#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="#">Articles</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 ❤ by <span style="color: #065299;">My Discord ID</span>
  </div>  
  <div class="social">
    <img class="icons" src="http://icons.iconarchive.com/icons/custom-icon-design/mono-general-3/128/twitter-icon.png">
    <img class="icons" src="https://www.stackbuilders.com/assets/img/github-icon-hover.png">
    <img class="icons" style="filter: invert(100%)" src="https://www.iconninja.com/files/625/765/244/social-media-Whosebug-icon.png">
    
  </div>
</div>

编辑：注意图片中带圆圈的项目，它们占据了两个不同的宽列以构成它们的全宽。资源是 0.2 + 0.7 = 0.9fr，其中设计是 0.2 + 1.2 = 1.4fr，此外，这允许我们通过从资源左侧 0.2fr 的前一列开始其左侧来倾斜底部行列右侧。

如何创建左侧带有徽标的页脚

How to create a footer with a logo on the left

html

css

footer