HTML经典布局方式

最新推荐文章于 2024-03-23 20:03:07 发布

独立寒秋-

最新推荐文章于 2024-03-23 20:03:07 发布

阅读量494

点赞数

分类专栏： HTML、CSS 文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_51445423/article/details/126698079

版权

HTML、CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML经典布局

圣杯式布局

在这里插入图片描述

    <div class="box1">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
   <style>
        .box1{
            width: 80%;
            height: 2000px;
            background-color: green;
            padding: 0 200px 0 150px;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .box1 div{
            float: left;
        }
        .left{
            width: 150px;
            height: 150px;
            background-color: red;
            margin-left: -100%;
            position: relative;
            left: -150px;
        }
        .right{
            width: 200px;
            height: 150px;
            background-color: blue;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
        .middle{
            width: 100%;
            height:180px;
            background-color: yellow;
        }
    </style>

双飞翼式布局

在这里插入图片描述

<div class="box1">
    <div class="middle">
        <div></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<style>
        .box1{
            width: 80%;
            height: 2000px;
            background-color: green;
        }
        .box1>div{
            float: left;
        }
        .left{
            width: 150px;
            height: 150px;
            background-color: red;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            height: 150px;
            background-color: blue;
            margin-left: -200px;
        }
        .middle{
            width: 100%;
            
        }
        .middle div{
            height:180px;
            background-color: yellow;
            margin: 0 200px 0 150px;
        }
    </style>

顶部侧边布局

在这里插入图片描述

<div class="container">
    <div class="head">这里是头部</div>
    <div class="sider">这里是侧边栏</div>
    <div class="content">
        <div class="son"></div>
    </div>
</div>
        body {
          margin: 0;
          padding: 0;
        }
        .head {
          position: fixed;
          height: 100px;
          width: 100%;
          background-color: pink;
        }
        .sider {
          position: fixed;
          top: 100px;
          width: 100px;
          height: 100vh;
          background-color: green;
        }
        .content {
          position: absolute;
          top: 100px;
          left: 100px;
          bottom: 0;
          right: 0;
          /* background-color: blue; */
          overflow: auto; /* 或 auto */
        }
        .son{
            width: 8000px;
            height: 2600px;
            background-color: #bfa;
        }
      </style>