html圣杯和双飞翼布局

最新推荐文章于 2025-06-01 14:38:30 发布

自然醒L

最新推荐文章于 2025-06-01 14:38:30 发布

阅读量53

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_62981580/article/details/132526651

版权

圣杯布局

HTML圣杯布局是一种流行的三栏布局方式，它可以实现一个固定宽度的中间内容栏和两个自适应宽度的侧边栏。以下是一个示例的HTML代码和布局介绍：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      
      .container {
        padding-left: 200px; /* 左侧边栏宽度 */
        padding-right: 200px; /* 右侧边栏宽度 */
      }
      
      .header, .footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
      }
      
      .main {
        width: 100%;
        float: left;
        background-color: #f1f1f1;
      }
      
      .sidebar-left, .sidebar-right {
        width: 200px;
        float: left;
        background-color: #ddd;
      }
      
      .sidebar-left {
        margin-left: -100%; /* 将左侧边栏向左偏移 */
        position: relative;
        left: -200px; /* 左侧边栏宽度的负数 */
      }
      
      .sidebar-right {
        margin-left: -200px; /* 将右侧边栏向左偏移 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <!-- 头部内容 -->
      </div>
      <div class="main">
        <!-- 主要内容 -->
      </div>
      <div class="sidebar-left">
        <!-- 左侧边栏内容 -->
      </div>
      <div class="sidebar-right">
        <!-- 右侧边栏内容 -->
      </div>
      <div class="footer">
        <!-- 底部内容 -->
      </div>
    </div>
  </body>
</html>

布局解释：

首先，我们创建一个名为.container的容器，用于包裹整个布局。
.header和.footer是顶部和底部的固定高度区域，可以放置网站的标题、导航或其他内容。
.main是中间的主要内容区域，宽度为100%，占据剩余的宽度。
.sidebar-left和.sidebar-right分别是左侧和右侧的侧边栏区域，宽度可以自定义。
使用浮动（float）将.main、.sidebar-left和.sidebar-right浮动在左侧。
通过给.sidebar-left和.sidebar-right添加负的左外边距（margin-left），将它们向左偏移，覆盖住.main的部分，形成固定宽度的中间内容栏。

使用这个HTML代码，你可以根据自己的需求和样式进行自定义，比如更改背景颜色、调整宽度、添加内容等。通过CSS样式，你可以进一步美化布局，使其符合你的设计要求

双飞翼布局

HTML双飞翼布局是一种常用的三栏布局方式，与圣杯布局类似，它也能实现一个固定宽度的中间内容栏和两个自适应宽度的侧边栏。以下是一个示例的HTML代码和布局介绍：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      
      .container {
        overflow: hidden;
      }
      
      .header, .footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
      }
      
      .main {
        float: left;
        width: 100%;
      }
      
      .main-content {
        margin: 0 200px; /* 左右侧边栏宽度 */
        background-color: #f1f1f1;
      }
      
      .sidebar-left, .sidebar-right {
        float: left;
        width: 200px;
      }
      
      .sidebar-left {
        margin-left: -100%; /* 将左侧边栏向左偏移 */
      }
      
      .sidebar-right {
        margin-left: -200px; /* 将右侧边栏向左偏移 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <!-- 头部内容 -->
      </div>
      <div class="main">
        <div class="main-content">
          <!-- 主要内容 -->
        </div>
      </div>
      <div class="sidebar-left">
        <!-- 左侧边栏内容 -->
      </div>
      <div class="sidebar-right">
        <!-- 右侧边栏内容 -->
      </div>
      <div class="footer">
        <!-- 底部内容 -->
      </div>
    </div>
  </body>
</html>

布局解释：

和圣杯布局一样，我们首先创建一个名为.container的容器，用于包裹整个布局。
.header和.footer是顶部和底部的固定高度区域，可以放置网站的标题、导航或其他内容。
.main是中间的主要内容区域，宽度为100%。
.main-content是包裹主要内容的容器，通过设置左右外边距（margin）来腾出左右侧边栏的位置。
.sidebar-left和.sidebar-right分别是左侧和右侧的侧边栏区域，宽度可以自定义。
通过浮动（float）将.main、.sidebar-left和.sidebar-right浮动在左侧。
通过给.sidebar-left和.sidebar-right添加负的左外边距（margin-left），将它们向左偏移，覆盖住.main-content的部分，形成固定宽度的中间内容栏。