企业级常用两栏和三栏布局(双飞翼模式、圣杯模式)

最新推荐文章于 2024-05-20 11:40:56 发布

Martin-Luo

最新推荐文章于 2024-05-20 11:40:56 发布

阅读量166

点赞数 3

分类专栏： html5+CSS3 文章标签：前端 css html

本文链接：https://blog.csdn.net/Dragon_Luo/article/details/137561352

版权

html5+CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

两栏布局

特点：

侧边栏固定宽度，主体随着屏幕宽度自适应。

CSS代码

 {
   margin: 0;
    padding: 0;
  }
  .wrap {
    position: relative;
    width: 100%;
    height: 100vh;
  }
  .wrap .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background-color: #377c79;
  }
  .wrap .main {
    padding-left: 200px;
    height: 100%;
    background-color: #5f7399;
  }

HTML代码

<div class="wrap">
  <div class="left"></div>
  <div class="main"></div>
</div>

三栏布局

圣杯模式

两边侧边栏固定宽度，主体随着屏幕宽度自适应。

CSS代码

* {
    margin: 0;
    padding: 0;
  }

  html,
  body,
  .container {
    height: 100%;
  }
  .container {
    margin: 0 300px 0 250px;
  }
  .container .column {
    position: relative;
    float: left;
    height: 100%;
  }
  .container .middle {
    width: 100%;
    background-color: #360d0d;
  }
  .container .left {
    left: -250px;
    width: 250px;
    margin-left: -100%;
    background-color: rgb(224, 140, 140);
  }
  .container .right {
    width: 300px;
    margin-right: -300px;
    background-color: #81753c;
  }

HTML代码

<div class="container">
	<!--注意：主体内容一定要写前面，便于浏览器优先解析和渲染-->
   <div class="column middle"></div>
   <div class="column left"></div>
   <div class="column right"></div>
 </div>

双飞翼模式

两边侧边栏固定宽度，主体随着屏幕宽度自适应。

CSS代码

* {
   margin: 0;
   padding: 0;
 }

 html,
 body,
 .container {
   height: 100%;
 }
 .container .column {
   position: relative;
   float: left;
   height: 100%;
 }
 .container .middle {
   width: 100%;
   background-color: #277e8d;
 }
 .container .middle .main {
   margin: 0 300px 0 250px;
 }
 .container .left {
   width: 250px;
   margin-left: -100%;
   background-color: rgb(224, 140, 140);
 }
 .container .right {
   width: 300px;
   margin-left: -300px;
   background-color: #81753c;
 }

HTML代码

<div class="container">
	<!--注意：主体内容一定要写前面，便于浏览器优先解析和渲染-->
    <div class="column middle">
      <div class="main">123</div>
    </div>
    <div class="column left"></div>
    <div class="column right"></div>
  </div>