首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >3列页脚坐在左侧- html

3列页脚坐在左侧- html
EN

Stack Overflow用户
提问于 2021-10-20 04:14:30
回答 1查看 93关注 0票数 0

我试图有一个3栏页脚,但我所做的每一次尝试,文本只是坐在左边。下面是最新的,列在左边的另一列上。背景颜色和字体不工作,在索引页上,字体似乎是粗体的原因。

代码语言:javascript
复制
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

footer-container {
  background-color: #99cc99;
  font-family: "Open Sans";
  padding-bottom: 4rem;
}

footer {
  width: 80%;
  height: 40vh;
  background-color: #99cc99;
  color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

footer-heading {
  display: flex;
  flex-direction: column;
  margin-right: 4rem;
}

footer-heading h2 {
  margin-bottom: 2rem;
}

footer-heading a {
  color: white;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

footer-heading a:hover {
  color: #336633;
  transition: 0.3s ease-out;
}
代码语言:javascript
复制
<div class="footer-container">

  <div class="footer">

    <div class="footer-heading footer-1">

      <h3>ADDRESS</h3>
      <p>1234 Sandy Beach Road, <br> Queenscliffe, New Zealand</p>

    </div>

    <div class="footer-heading footer-2">
      <h3>CONTACT</h3>
      <p>Sally Sharp <br> Tel: (00) 1234 1122</div>
  </div>

  <div class="footer-heading footer-3">
    <h3>QUICK LINKS</h3>

    <a href="About/About.html#Ammenities">Ammenities</a><br>
    <a href="About/About.html#Availability">Availability</a><br>
    <a href="About/About.html#Cancellation Policy">Cancellation Policy</a><br>
    <a href="About/About.html#Location">Location</a><br>
    <a href="About/About.html#What's nearby">What's nearby</a>

  </div>

</div>

</div>

EN

回答 1

Stack Overflow用户

发布于 2021-10-20 04:21:42

</div>的末尾,HTML中有一个额外的.footer-heading.footer-2。此外,CSS选择器中的类的语法是.className。针对类的CSS规则中没有一个在.之前包含className字符。

代码语言:javascript
复制
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.footer-container {
  background-color: #99cc99;
  font-family: "Open Sans";
  padding-bottom: 4rem;
}

.footer {
  width: 80%;
  height: 40vh;
  background-color: #99cc99;
  color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

.footer-heading {
  display: flex;
  flex-direction: column;
  margin-right: 4rem;
}

.footer-heading h2 {
  margin-bottom: 2rem;
}

.footer-heading a {
  color: white;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.footer-heading a:hover {
  color: #336633;
  transition: 0.3s ease-out;
}
代码语言:javascript
复制
<div class="footer-container">
  <div class="footer">
    <div class="footer-heading footer-1">
      <h3>ADDRESS</h3>
      <p>1234 Sandy Beach Road, <br> Queenscliffe, New Zealand</p>
    </div>

    <div class="footer-heading footer-2">
      <h3>CONTACT</h3>
      <p>Sally Sharp <br> Tel: (00) 1234 1122
    </div>

    <div class="footer-heading footer-3">
      <h3>QUICK LINKS</h3>

      <a href="About/About.html#Ammenities">Ammenities</a><br>
      <a href="About/About.html#Availability">Availability</a><br>
      <a href="About/About.html#Cancellation Policy">Cancellation Policy</a><br>
      <a href="About/About.html#Location">Location</a><br>
      <a href="About/About.html#What's nearby">What's nearby</a>
    </div>
  </div>
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69640253

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档