网页页尾的设计代码

以下是一个基本的网页页尾设计代码示例，包括版权信息、联系方式和返回顶部按钮：

HTML代码：

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>&copy; 2021 My Website. All Rights Reserved.</p>
      </div>
      <div class="col-md-6 text-right">
        <p>Contact Us: 123 Main St, Anytown, USA | Phone: 555-555-5555 | Email: info@mywebsite.com</p>
      </div>
    </div>
  </div>
  <a href="#" class="back-to-top">Back to Top</a>
</footer>

CSS代码：

footer {
  background-color: #f9f9f9;
  padding: 20px 0;
  color: #666;
  font-size: 14px;
  text-align: center;
}

footer a {
  color: #666;
  text-decoration: none;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  text-decoration: none;
  color: #fff;
  background-color: #333;
  padding: 10px;
  border-radius: 5px;
}

.back-to-top:hover {
  background-color: #666;
}

解释：
- `<footer>` 标签定义网页页尾。
- `.container` 和 `.row` 类是 Bootstrap CSS 框架中的网格系统类，用于创建网页布局。
- `.col-md-6` 类是 Bootstrap CSS 框架中的栅格类，用于创建网页列布局。
- `.back-to-top` 类定义返回顶部按钮的样式，包括位置、背景颜色、文本颜色等。
- JavaScript 代码可以用来控制返回顶部按钮的显示和隐藏，以及点击按钮时网页滚动到顶部的动画效果。