要做到网页页尾的图标logo和文字处在同一水平线，帮我写一下代码

可以使用flex布局来实现网页页尾的图标logo和文字处在同一水平线上。具体的代码如下：

HTML代码：

<footer>
  <div class="logo"><img src="logo.png" alt="logo"></div>
  <div class="text">版权所有 © 2021</div>
</footer>

CSS代码：

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f5f5f5;
}

.logo {
  margin-right: 10px;
}

.logo img {
  height: 50px;
}

.text {
  font-size: 14px;
  color: #666;
}

在上面的代码中，我们使用了flex布局来实现页尾的水平居中和垂直居中。其中，`.logo`和`.text`两个元素都是`flex`容器的子元素。`.logo`元素设置了一个右边距`margin-right`，用来和`.text`元素分开一定的距离。`.logo img`元素设置了一个高度`height`，用来限制logo的大小。`.text`元素设置了一个字体大小`font-size`和颜色`color`。

相关问题

网页页尾的设计代码

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

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 代码可以用来控制返回顶部按钮的显示和隐藏，以及点击按钮时网页滚动到顶部的动画效果。

使用php代码制作简易页尾

可以使用以下代码制作简易页尾：

<footer>
  <p>&copy; <?php echo date("Y"); ?> Your Website</p>
</footer>

该代码会在页面底部添加一个带有版权信息的页尾，并且会动态显示当前年份。你可以根据需要自定义页尾的样式和内容。