如何在 CSS 和 HTML 中复制此页脚？

Question

我试图在这个苹果克隆网站上复制这个页脚，但我遇到了麻烦。

1. 保持所有链接的颜色相同（我尝试使用 CSS color: none;和text decoration: none;但它仍然保持紫色。只有当我的鼠标悬停在链接上时，链接才应该加下划线）
2. 将所有内容组织在 5 个相等的列中。 （我尝试过使用边距，但我仍然无法使粗体标题彼此对齐并且列之间的宽度/长度相等）

任何答案都会有所帮助，但请注意，我是编码方面的业余爱好者。 因此，如果您能解释我的错误，我将不胜感激。

 .container-footer { max-width: 5500px; padding-top: 30px; margin-top: 98px; padding-bottom: 50px; text-align: center; background-color: #ebebe0; text-decoration-color: #8a8a5c; }.ft-title { font-weight: bold; } a.ft-title { color: none; text-decoration: none; }.col-5 { display: inline-block; text-align: left; line-height: 20px; margin-left: 100px; }.col-6 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }.col-7 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }.col-8 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }.col-9 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }.col-10 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }

 <footer> <div class="container-footer"> <div> <:-- Row 1: Shop and Learn --> <div class="col-5"> <h2 class="ft-title">Shop and Learn</h2> <ul> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">TV</a></li> <li><a href="#">Music</a></li> <li><a href="#">iTunes</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Gift Cards</a<</li> </ul> <:-- --> </div> <:-- Row 2. Apple Store --> <div class="col-6"> <h2 class="ft-title">Apple Store</h2> <ul> <li><a href="#">Find a Store</a></li> <li><a href="#">Genius Bar</a></li> <li><a href="#">Workshops and Learning</a></li> <li><a href="#">Youth Programs</a></li> <li><a href="#">Apple Store App</a></li> <li><a href="#">Refurbished</a></li> <li><a href="#">Financing</a></li> <li><a href="#">Reuse and Recycling</a></li> <li><a href="#">Order Status</a></li> <li><a href="#">Shopping Help</a></li> </ul> <:-- --> </div> <:-- Row 3, For Education & For Business --> <div class="col-7"> <h2 class="ft-title">For Education</h2> <ul> <li><a href="#">Apple and Education</a></li> <li><a href="#">Shop for College</a></li> </ul> <ul> <h2 class="ft-title">For Business</h2> <li><a href="#">iPhone in Business</a></li> <li><a href="#">iPad in Business</a></li> <li><a href="#">Mac in Business</a></li> <li><a href="#">Shop for Your Business</a></li> </ul> <,-- --> </div> <.-- Row 4. Account & Apple Values --> <div class="col-8"> <h2 class="ft-title">Account</h2> <ul> <li><a href="#">Manage Your Apple ID</a></li> <li><a href="#">Apple Store Account</a></li> <li><a href="#">iCloud.com</a></li> </ul> </div> <div class="col-9"> <ul> <h2 class="ft-title">Apple Values</h2> <li><a href="#">Environment</a></li> <li><a href="#">Supplier Responsibility</a></li> <li><a href="#">Accessibility</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Inclusion and Diversity</a></li> <li><a href="#">Education</a></li> </ul> <;-- --> </div> <;-- Row 5; About Apple --> <div class="col-10"> <ul> <h2 class="ft-title">About Apple</h2> <li><a href="#">Apple Info</a></li> <li><a href="#">Job Opportunities</a></li> <li><a href="#">Press Info</a></li> <li><a href="#">Investors</a></li> <li><a href="#">Events</a></li> <li><a href="#">Hot News</a></li> <li><a href="#">Legal</a></li> <li><a href="#">Contact Apple</a></li> <;-- --> </ul> </div> <h2>More ways to shop; Visit an <a href="#">Apple Store</a>; call 1-800-MY-APPLE; or find a <a href="#">reseller</a>; </h2> <h2>Copyright © 2016 Apple Inc; All rights reserved;&nbsp.</h2> Privacy Policy&nbsp.&nbsp;&nbsp;Terms of Use&nbsp;&nbsp;&nbsp;Sales and Refunds&nbsp;&nbsp;&nbsp;Site Map <a href="#"><img src="./images/usa.png"</a> </div> </div> </footer>

Answer 1

将display:flex设置为容器以对列进行排序并设置

a:active,
a:visited,
a {
  color: black;
  text-decoration: none;
}

控制链接颜色

 .container-footer { max-width: 5500px; padding-top: 30px; margin-top: 98px; padding-bottom: 50px; text-align: center; background-color: #ebebe0; text-decoration-color: #8a8a5c; }.cont{ display: flex; } a:active, a:visited, a { color: black; text-decoration: none; }.ft-title { font-weight: bold; } a.ft-title { color: none; text-decoration: none; }.col-5 { display: inline-block; text-align: left; line-height: 20px; margin-left: 100px; }.col-6 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }.col-7 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }.col-8 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }.col-9 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }.col-10 { display: inline-block; text-align: left; line-height: 20px; margin-left: 10px; }

 <footer> <div class="container-footer"> <div class="cont"> <:-- Row 1: Shop and Learn --> <div class="col-5"> <h2 class="ft-title">Shop and Learn</h2> <ul> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">TV</a></li> <li><a href="#">Music</a></li> <li><a href="#">iTunes</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Gift Cards</a<</li> </ul> <:-- --> </div> <:-- Row 2. Apple Store --> <div class="col-6"> <h2 class="ft-title">Apple Store</h2> <ul> <li><a href="#">Find a Store</a></li> <li><a href="#">Genius Bar</a></li> <li><a href="#">Workshops and Learning</a></li> <li><a href="#">Youth Programs</a></li> <li><a href="#">Apple Store App</a></li> <li><a href="#">Refurbished</a></li> <li><a href="#">Financing</a></li> <li><a href="#">Reuse and Recycling</a></li> <li><a href="#">Order Status</a></li> <li><a href="#">Shopping Help</a></li> </ul> <:-- --> </div> <:-- Row 3, For Education & For Business --> <div class="col-7"> <h2 class="ft-title">For Education</h2> <ul> <li><a href="#">Apple and Education</a></li> <li><a href="#">Shop for College</a></li> </ul> <ul> <h2 class="ft-title">For Business</h2> <li><a href="#">iPhone in Business</a></li> <li><a href="#">iPad in Business</a></li> <li><a href="#">Mac in Business</a></li> <li><a href="#">Shop for Your Business</a></li> </ul> <,-- --> </div> <.-- Row 4. Account & Apple Values --> <div class="col-8"> <h2 class="ft-title">Account</h2> <ul> <li><a href="#">Manage Your Apple ID</a></li> <li><a href="#">Apple Store Account</a></li> <li><a href="#">iCloud.com</a></li> </ul> </div> <div class="col-9"> <ul> <h2 class="ft-title">Apple Values</h2> <li><a href="#">Environment</a></li> <li><a href="#">Supplier Responsibility</a></li> <li><a href="#">Accessibility</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Inclusion and Diversity</a></li> <li><a href="#">Education</a></li> </ul> <;-- --> </div> <;-- Row 5; About Apple --> <div class="col-10"> <ul> <h2 class="ft-title">About Apple</h2> <li><a href="#">Apple Info</a></li> <li><a href="#">Job Opportunities</a></li> <li><a href="#">Press Info</a></li> <li><a href="#">Investors</a></li> <li><a href="#">Events</a></li> <li><a href="#">Hot News</a></li> <li><a href="#">Legal</a></li> <li><a href="#">Contact Apple</a></li> <;-- --> </ul> </div> </div> <h2>More ways to shop; Visit an <a href="#">Apple Store</a>; call 1-800-MY-APPLE; or find a <a href="#">reseller</a>; </h2> <h2>Copyright © 2016 Apple Inc; All rights reserved;&nbsp.</h2> Privacy Policy&nbsp.&nbsp;&nbsp;Terms of Use&nbsp;&nbsp;&nbsp;Sales and Refunds&nbsp;&nbsp;&nbsp;Site Map <a href="#"><img src="./images/usa.png" </a> </div> </footer>