前端CSS专题

CSS 页面布局的方式

2021-03-24  本文已影响0人  黑木令

1. 实现页面布局的方法 ：

1. 浮动布局
2. 定位布局
3. 响应式布局
4. 弹性布局
6. 网格布局
7. 表格布局

2. 三栏布局

1. 假设高度已知, 请写出三栏布局, 其中 左栏 、 右栏 宽度各为 300px, 中间自适应 。
2. 解决方法: 浮动 / 绝对定位 / 弹性布局 / 网格布局 / 表格布局

绝对顶方法--代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对顶方法</title>
</head>

<style>
/* 注意: 此方法不能设置 html、body height: 100% */
/* 公共样式设置 */
html * {
  padding: 0;
  margin: 0;
}
/* 中间内容部分 */
.left-right-center {
  position: relative;
  min-width: 800px;
}
#left {
  height: 100%;
  width: 300px;
  position: absolute;
  left: 0;
  background-color: aquamarine;
}
.w_l-c {
  background-color: tan;
  height: 90%;
}
.center {
  height: 100%;
  margin-left: 300px;
  background-color: #666;
}
/* 头部 */
.w_head-top {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: steelblue;
}
.w_h-right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.w_h-right p {
  padding: 0 12px;
}
/* 底部 */
.w_foot-bot {
  height: 160px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: steelblue;
}
</style>
<body>
  <!-- 头部 -->
  <header class="w_head-top">
    <h1>XXX 有限公司</h1>
    <div class="w_h-right">
      <p>头像</p>
      <p>通知消息</p>
    </div>
  </header>
  <!-- 内容部分 -->
  <section class="layout float">
    <article class="left-right-center">
      <div id="left">
        <p class="w_l-c">左侧</p>
        <p>验证子元素设置 百分比 高度, 是否生效</p>
      </div>
      <div class="center">
        <h2>绝对定位的解决方案</h2>
        <h2>这是一个三栏布局中间内容部分</h2>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
        <p>增加高度</p>
      </div>
    </article>
  </section>
  <!-- 底部 -->
  <footer class="w_foot-bot">
    <div>
      外链
    </div>
    <address>
      地址, 联系方式
    </address>
    <div>
      二维码
    </div>
  </footer>
</body>
<script type="text/javascript">
  // window.onload = function() {
  //   visibleAreaMinHeight()
  // }
  // 设置元素的最小高度
  document.addEventListener('DOMContentLoaded', function() {
    // DOM 渲染完即可, 此时图片、 视频可能还没有加载完 。
    visibleAreaMinHeight()
  });
  // 监听窗口变化
  window.onresize = function () {
    visibleAreaMinHeight()
  }
  // 获取最小高度
  function visibleAreaMinHeight() {
    let visibleArea = window.innerHeight - 240 + 'px'
    document.getElementsByClassName("center")[0].style.minHeight = visibleArea
    document.getElementById('left').style.minHeight = visibleArea
  }
</script>
</html>
绝对顶方法--图例
1-绝对定位的解决方案 .png

弹性盒子方法--代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒子方法</title>
</head>

<style>
/* 公共样式设置 */
html * {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}

/* 中间内容部分 */
.layout {
  /* 注意这里不能使用: min-height: 100% */
  /* min-height: 100%; */
  height: 100%;
  /* height: calc(100% - 240px) */
}
.left-right-center {
  display: flex;
  min-width: 900px;
  /* 注意这里: 不能使用 height: 100%, 否则 当内容高度大于 body 高度时, 内容高度等于 body 高度(始终等于 window.innerHeight 获取的值); 超出部分将溢出,   */
  /* height: 100%; */
  /* 当布局不需要头部与底部时的设置 */
  /* min-height: 100%; */
  /* 布局有头部与底部 */
  min-height: calc(100% - 240px);
}
.left {
  width: 300px;
  background-color: aquamarine;
  /* height: 100%; */
}
.right {
  width: 300px;
  background-color: brown;
}
.center {
  background-color: #666;
  /* 中间自适应的原理 */
  /* flex-grow: 1; */
  flex: 1;
}

/* 头部 样式设置 */
.w_h-top {
  height: 80px;
  background-color: tan;
}

/* 底部 样式设置 */
.w_f-bot {
  height: 160px;
  background-color: blueviolet;
}
</style>
<body>
  <section class="layout">
    <header class="w_h-top">
      <p>头部</p>
    </header>

    <article class="left-right-center">
      <div class="left">
        左侧
      </div>
      <div class="center">
        <h2> flexbox 《弹性布局的方式》 的解决方案</h2>
        <h2>这是一个三栏布局中间内容部分</h2>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <!-- <br><br><br><br><br><br><br>s<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br>s<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>s
        <br><br><br><br><br><br><br>s<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>s -->
        <p>增加高度</p>
        <p>增加高度</p>
      </div>
      <div class="right">右侧</div>
    </article>

    <footer class="w_f-bot">
      <p>底部</p>
    </footer>
  </section>
</body>

</html>
弹性盒子方法--图例
2-弹性盒子解决方案.png

网格布局方法--代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网格布局方法</title>
</head>

<style>
html * {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}

/* 内容部分 */
.layout {
  /* height: 100%; */
  height: calc(100% - 240px)
}
.left-right-center {
  min-height: 100%;
  min-width: 900px;
  /* overflow: hidden; */
  /* 声明为网格布局 */
  display: grid;
  width: 100%;
  /* grid-template-rows: 100px; */
  grid-template-columns: 300px auto 300px;
}
.left {
  width: 300px;
  background-color: aquamarine;
}
.right {
  width: 300px;
  background-color: brown;
}
.center {
  background-color: #666;
}
/* 头部 样式设置 */
.w_h-top {
  height: 80px;
  background-color: tan;
}

/* 底部 样式设置 */
.w_f-bot {
  height: 160px;
  background-color: blueviolet;
}
</style>
<body>
  <section class="layout float">
    <header class="w_h-top">
      <p>头部</p>
    </header>
    <article class="left-right-center">
      <div class="left">左侧</div>
      <div class="center">
        <h2> 网格布局的方法  解决方案</h2>
        <h2>这是一个三栏布局中间内容部分</h2>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <p>增加高度</p>
        <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
        <p>增加高度</p>
      </div>
      <div class="right">右侧</div>
    </article>
    <footer class="w_f-bot">
      <p>底部</p>
    </footer>
  </section>
</body>
</html>
网格布局方法--图例
3-网格布局解决方案.png
如果对你有所帮助，大家喜欢可以点个关注；如有问题还望不吝赐教，本人会及时更改。(如要转载，请注明出处)。
上一篇 下一篇

猜你喜欢

热点阅读