前端转行第 21 天：基础店铺页面样式实现完结篇

今天是转行前端的第 21 天，也是基础店铺页面样式实现的最后一天。今天要完成的任务是，基于昨天的实现，完成基础店铺页面下半部分的样式设计。加油！

今日学习目标

1. 按照昨天的规划，基于昨天实现的基础店铺页面上中半部分样式设计思路，实现页面下部的页面效果。
2. 确认通用的CSS样式、CSS变量和CSS工具样式。

1. CSS样式

我们首先来回顾一下昨天的内容。昨天我们已经实现了基础店铺页面上中半部分的样式设计。今天我们要做的，是完成页面下半部分的样式设计。

2. CSS变量

CSS变量是一种在CSS中存储值的机制。我们可以使用CSS变量来存储颜色、字体、间距等值，然后在整个项目中使用它们。CSS变量非常有用，因为它可以帮助我们轻松地更改项目的整体外观。

3. CSS工具样式

CSS工具样式是一些预先定义的样式，我们可以使用它们来快速地创建一些常用的效果。例如，我们可以使用CSS工具样式来创建按钮、表格和导航栏。

4. 页面效果

今天我们要实现的页面效果包括：

• 页脚
• 版权信息
• 社交媒体图标
• 返回顶部按钮

5. 代码实现

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <p>Copyright &copy; 2023 My Website</p>
      </div>
      <div class="col-md-4">
        <ul class="social-media">
          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
        </ul>
      </div>
      <div class="col-md-4">
        <a href="#" class="btn btn-primary">返回顶部</a>
      </div>
    </div>
  </div>
</footer>

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col-md-4 {
  flex-basis: 33.33%;
  max-width: 33.33%;
}

.copyright {
  text-align: center;
}

.social-media {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

.social-media li {
  margin: 0 10px;
}

.social-media a {
  color: #fff;
}

.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background-color: #0069d9;
}

6. 总结

今天我们完成了基础店铺页面样式实现的最后一步，实现了页面下半部分的样式设计。同时，我们还回顾了CSS样式、CSS变量和CSS工具样式的使用。希望今天的分享对你有帮助。