制作 div 底部页面 (1)

📌 相关文章

📜 制作 div 底部页面 (1)

📅 最后修改于: 2023-12-03 15:07:16.691000 🧑 作者: Mango

制作 div 底部页面

在Web开发中，我们经常需要为网站添加底部页面。底部页面通常包含版权信息、公司信息、链接等内容。在本文中，我们将介绍如何使用HTML和CSS制作一个简单的div底部页面。

HTML结构

首先，我们需要创建一个HTML文件。在该文件中，我们将创建一个包含底部页面内容的div。我们还将使用HTML5中添加的语义标签<footer>来定义底部页面。

<!DOCTYPE html>
<html>
  <head>
    <title>底部页面</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="footer">
      <footer>
        <p>版权信息</p>
        <p>公司信息</p>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
      </footer>
    </div>
  </body>
</html>

CSS样式

接下来，我们需要添加一些CSS样式来美化我们的底部页面。我们将为.footer类添加position:fixed属性，这样我们的底部页面将始终位于屏幕底部。我们还将为<footer>标签添加背景颜色、文字颜色和字体大小。此外，我们还将添加一些内边距和外边距来使页面更加美观。

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  padding: 10px;
}

结论

现在，我们已经成功制作出一个简单的div底部页面。您可以根据自己的需要进行样式的调整，如增加更多链接、更改背景颜色等。希望这篇文章对您有所帮助！

返回的markdown格式：

# 制作 div 底部页面

在Web开发中，我们经常需要为网站添加底部页面。底部页面通常包含版权信息、公司信息、链接等内容。在本文中，我们将介绍如何使用HTML和CSS制作一个简单的div底部页面。

## HTML结构

首先，我们需要创建一个HTML文件。在该文件中，我们将创建一个包含底部页面内容的div。我们还将使用HTML5中添加的语义标签`<footer>`来定义底部页面。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>底部页面</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="footer">
      <footer>
        <p>版权信息</p>
        <p>公司信息</p>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
      </footer>
    </div>
  </body>
</html>

CSS样式

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  padding: 10px;
}