html两侧对联代码 css

HTML两侧对联通常是指在网页的两侧放置两个广告条或者装饰性元素，它们通常具有相同的高度并且固定在页面的两侧。这种布局可以通过CSS来实现，下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>两侧对联示例</title>
<style>
  .container {
    margin: 0 auto;
    width: 80%;
    position: relative;
  }
  .left, .right {
    position: fixed;
    top: 20%;
    width: 10%;
    height: 90vh; /* 视口高度的90% */
    background-color: #f1f1f1;
    text-align: center;
    line-height: 90vh; /* 使文本垂直居中 */
  }
  .left {
    left: 2%;
  }
  .right {
    right: 2%;
  }
  .content {
    margin-left: 12%;
    margin-right: 12%;
  }
</style>
</head>
<body>

<div class="container">
  <div class="left">左侧对联</div>
  <div class="content">
    <!-- 这里是网页的主体内容 -->
    <h1>欢迎来到我的网站</h1>
    <p>这里是主体内容区域。</p>
  </div>
  <div class="right">右侧对联</div>
</div>

</body>
</html>

在这个例子中，.left 和 .right 类定义了两侧对联的样式，它们都被设置为 position: fixed;，这意味着它们会相对于浏览器窗口固定位置，不会随着页面滚动而移动。.left 设置了 left: 2%; 而 .right 设置了 right: 2%;，这样它们就会分别固定在窗口的左侧和右侧。

优势：