02 Layout

最新推荐文章于 2023-08-19 11:41:38 发布

鸿雁南去情难寄

最新推荐文章于 2023-08-19 11:41:38 发布

阅读量149

点赞数 1

分类专栏：网页布局文章标签： layout

本文链接：https://blog.csdn.net/qq_42873753/article/details/115519657

版权

网页布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页布局

文章目录

网页布局

一、两栏布局

边栏定宽，主栏自适应

在这里插入图片描述

1.1 float + overflow方式

<body>

  <div class="layout">
    <div class="aside">边栏</div>
    <div class="main">主栏</div>
  </div>

</body>

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 200px 0;
  font-size: 24px;
  background-color: #323232;

}

.layout {
  width: 100%;
  height: 100%;
}

/* ----------核心s---------- */

.aside {
  height: 400px;

  /* 关键代码s */
  width: 200px;
  float: left;
  /* 关键代码e */
    
  background-color: #91;
}

.main {
  height: 400px;

  /* 关键代码s */
  overflow: hidden;
  /* 关键代码e */

  background-color: #c6e6ff;
}

/* ----------核心s---------- */

1.2 float + margin方式

<body>

  <div class="layout">
    <div class="aside">边栏</div>
    <div class="main">主栏</div>
  </div>

</body>

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 200px 0;
  font-size: 24px;
  background-color: #323232;

}

.layout {
  width: 100%;
  height: 100%;
}

.aside,
.main {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----------核心s---------- */

.aside {
  height: 400px;

  /* 关键代码s */
  width: 200px;
  float: l
  /* 关键代码e */

  background-color: #ffca91;
}

.main {
  height: 400px;

  /* 关键代码s */
  margin-left: 200px;
  /* 关键代码e */

  background-color: #c6e6ff;
}

/* ----------核心e---------- */

1.3 flex方式

<body>

  <div class="container">
    <div class="aside">边栏</div>
    <div class="main">主栏</div>
  </div>

</body>

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 200px 0;
  font-size: 24px;
  background-color: #323232;

}

.aside,
.main {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----------核心s---------- */

.container {
  width: 100%;
  height: 100%;

  /* 关键代码s */
  display: flex;
  /* 关键代码e */

}

.aside {
  height: 400px;

  /* 关键代码s */
  width: 200px;
  /* 关键代码e */

  background-color: #ffca91;
}

.main {
  height: 400px;

  /* 关键代码s */
  flex: 1;
  /* 关键代码e */

  background-color: #c6e6ff;
}

/* ----------核心e---------- */

二、三栏布局

两侧栏定宽，主栏自适应

在这里插入图片描述

2.1 圣杯布局

<body>

  <div class="layout">
    <div class="main">主栏</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
  </div>

</body>

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 200px 0;
  font-size: 24px;
  background-color: #323232;
  min-width: 720px;

}

.left,
.right,
 main {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----------核心s---------- */

.layout {
  /* 关键代码s */
  padding: 0 200px;
  /* 关键代码e */
}

.left {

  /* 关键代码 */
  width: 200px;
  float: left;

  position: relative;
  left: -200px;
  margin-left: -100%;
  /* 关键代码e */

  background-color: #ffca91;
}

.right {

  /* 关键代码s */
  width: 200px;
  float: left;

  position: relative;
  right: -200px;
  margin-left: -200px;
  /* 关键代码e */

  background-color: #ffca91;
}

.main {

  /* 关键代码s */
  width: 100%;
  float: left;
  /* 关键代码e */

  background-color: #c6e6ff;
}

/* ----------核心s---------- */

2.2 双飞翼布局

<body>

  <div class="layout">

    <div class="main">
      <div class="inner">主栏</div>
    </div>
    <div class="left">左侧栏</div>
    <div class="right">右边栏</div>
      
  </div>

</body>

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 200px 0;
  font-size: 24px;
  background-color: #323232;

}

.left,
.right,
.main {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----------核心s---------- */

.left {

  /* 关键代码 */
  width: 200px;
  float: left;

  margin-left: -100%;
  /* 关键代码e */

  background-color: #ffca91;
}

.right {

  /* 关键代码s */
  width: 200px;
  float: left;

  margin-left: -200px;
  /* 关键代码e */

  background-color: #ffca91;
}

.main {

  /* 关键代码s */
  width: 100%;
  float: left;
  /* 关键代码s */

  background-color: #c6e6ff;
}

.inner {
  /* 关键代码s */
  margin: 0 200px;
  /* 关键代码e */
  height: 200px;
}
/* ----------核心e---------- */

2.3 float + overflow方式

<body>

  <div class="layout">
      
    <div class="left">左侧栏</div>
    <div class="right">右边栏</div>
    <div class="main">主栏</div>

  </div>

</body>

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 200px 0;
  font-size: 24px;
  background-color: #323232;
  min-width: 720px;
}

.left,
.right,
.main {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----------核心s---------- */
.left {

  /* 关键代码s */
  width: 200px;
  float: left;
  /* 关键代码e */

  background-color: #ffca91;
}

.right {

  /* 关键代码s */
  width: 200px;
  float: right;
  /* 关键代码e */

  background-color: #ffca91;
}

.main {

  /* 关键代码s */
  overflow: hidden;
  /* 关键代码e */

  background-color: #c6e6ff;
}
/* ----------核心e---------- */

2.4 flex方式

<body>

  <div class="layout">

    <div class="left">左侧栏</div>
    <div class="main">主栏</div>
    <div class="right">右边栏</div>

  </div>

</body>

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 200px 0;
  font-size: 24px;
  background-color: #323232;
  min-width: 720px;
}

.left,
.right,
.main {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ------------------以下为核心代码---------------- */
.layout {
  display: flex;
}

.left {

  /* 关键代码s */
  width: 200px;
  /* 关键代码e */

  background-color: #ffca91;
}

.right {

  /* 关键代码s */
  width: 200px;
  /* 关键代码e */

  background-color: #ffca91;
}

.main {

  /* 关键代码s */
  flex: 1;
  /* 关键代码e */

  background-color: #c6e6ff;
}

三、三行布局

头尾定高主栏自适应

在这里插入图片描述

3.1 calc方式

<body>

  <div class="layout">

    <header>头部</header>
    <main>
      <div class="inner">主部</div>
    </main>
    <footer>尾部</footer>

  </div>


</body>

* {
  margin: 0;
  padding: 0;
}

html,
body,
.layout {
  height: 100%;
}

body {
  margin: 0;
  font-size: 24px;
  background-color: #323232;
  min-width: 720px;
}

header,
main,
footer {
  text-align: center;
}

main {
  overflow-y: auto;
}

.inner {
  height: 400px;
}

/* ----------核心s---------- */

header {
  /* 关键代码s */
  height: 50px;
  /* 关键代码e */

  line-height: 50px;
  background-color: #3f764b;
}

footer {

  /* 关键代码s */
  height: 50px;
  /* 关键代码e */

  line-height: 50px;
  background-color: #ffa500;
}

main {

  /* 关键代码s */
  height: calc(100% - 100px);
  overflow: auto;
  /* 关键代码e */

  background-color: #31aff9;
}

/* ----------核心e---------- */

3.2 position方式

<body>

  <div class="layout">

    <header>头部</header>
    <main>
      <div class="inner">主部</div>
    </main>
    <footer>尾部</footer>

  </div>


</body>

* {
  margin: 0;
  padding: 0;
}

html,
body,
.layout {
  height: 100%;
}

body {
  margin: 0;
  font-size: 24px;
  background-color: #323232;
  min-width: 720px;
}

header,
main,
footer {
  text-align: center;
}

main {
  overflow-y: auto;
}

.inner {
  height: 400px;
}

/* ----------核心s---------- */

.layout {
  /* 关键代码s */
  position: relative;
  /* 关键代码e */
}

header {
  /* 关键代码s */
  height: 50px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  /* 关键代码e */

  line-height: 50px;
  background-color: #3f764b;
}

footer {

  /* 关键代码s */
  height: 50px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  /* 关键代码e */

  line-height: 50px;
  background-color: #ffa500;
}

main {

  /* 关键代码s */
  height: 100%;
  padding: 50px 0;
  box-sizing: border-box;
  /* 关键代码e */

  background-color: #31aff9;
}

/* ----------核心e---------- */

3.3 flex方式

<body>

  <div class="layout">

    <header>头部</header>
    <main>
      <div class="inner">主部</div>
    </main>
    <footer>尾部</footer>

  </div>


</body>

* {
  margin: 0;
  padding: 0;
}

html,
body,
.layout {
  height: 100%;
}

body {
  margin: 0;
  font-size: 24px;
  background-color: #323232;
  min-width: 720px;
}

header,
main,
footer {
  text-align: center;
}

main {
  overflow-y: auto;
}

.inner {
  height: 400px;
}

/* ----------核心s---------- */

.layout {
  /* 关键代码s */
  display: flex;
  flex-direction: column;
  /* 关键代码s */
}

header {
  /* 关键代码s */
  height: 50px;
  /* 关键代码e */

  line-height: 50px;
  background-color: #3f764b;
}

footer {

  /* 关键代码s */
  height: 50px;
  /* 关键代码e */

  line-height: 50px;
  background-color: #ffa500;
}

main {

  /* 关键代码s */
  flex: 1;
  /* 关键代码e */

  background-color: #31aff9;
}

/* ----------核心e---------- */