html中经典的多列布局和两列自适应布局

最新推荐文章于 2024-05-11 01:28:20 发布

哎呦灬不错呦。

最新推荐文章于 2024-05-11 01:28:20 发布

阅读量1.8k

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_52583582/article/details/110248925

版权

html5 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

前端

32 篇文章 0 订阅

订阅专栏

经典的多列布局

自适应：一个盒子的宽度随着屏幕宽度发生变化单位：%

两列自适应布局

原理：两列并排左列固定宽度右列宽度自适应（100%）

/* 1.解决方案：左列+ float: left; */

/* 2.解决方案左列+ position:absolute */

在这里插入图片描述

三列自适应布局

原理：左右两列固定宽度中间列自适应 (100%)
在这里插入图片描述

圣杯布局

过程：

三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用最外侧大盒子的内边距和相对定位把中间列内容居中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        * {padding: 0;
        margin: 0;}
        .max {
           
            height: 400px;
            /* 4.最外侧大盒子设置左右内边距 值为两列宽度  中间列的内容就被居中    */
            padding: 0px 220px 0px 200px;
            
        }
        .left {
            float: left;
            width: 200px;
            height: 400px;
            background-color: deeppink;
            /* 2. 向左移动 ml:-一个中间列的宽度*/
            margin-left: -100%;
            /* 5.移动 与外边距相似的是相对定位  向左移动 left :- 自身宽度 */
            position: relative;
            left: -200px;
        }
        .right {
            float: left;
            width: 220px;
            height: 400px;
            background-color: deepskyblue;
            /* 3.向左移动  ml:-自身的宽度 */
            margin-left: -220px;
            /* 6.移动 与外边距相似的是相对定位  向右移动 right :- 自身宽度 */
            position: relative;
            right: -220px;
        }
        .center {
            float: left;
            /* 自适应 */
            width: 100%;
            height: 400px;
            background-color: gold;
          
        }
    </style>
</head>
<body>
    <div class="max">
        <!-- 1. 中间列要先写 写到html结构的最上面 -->
        <div class="center">center</div>
        <div class="left">left</div>
      
        <div class="right">right</div>
    </div>
</body>
</html>

双飞翼布局

过程：

原理：三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用中间列盒子的内容盒子的外边距把中间列内容居中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        * {padding: 0;
        margin: 0;}
        .max {
           
            height: 400px;
          
            
        }
        .left {
            float: left;
            width: 200px;
            height: 400px;
            background-color: deeppink;
            /* 2. ml:-100% */
            margin-left: -100%;
         
        }
        .right {
            float: left;
            width: 220px;
            height: 400px;
            background-color: deepskyblue;
            /* 3.ml: */
            margin-left: -220px;
         
        }
        .center {
            float: left;
          
            width: 100%;
            height: 400px;
            background-color: gold;
          
        }
        .inner {
            margin:0px 220px 0px 200px;
        }
    </style>
</head>
<body>
    <div class="max">
        <!-- 1. 中间列要先写 写到html结构的最上面 -->
        <div class="center">
            <div class="inner">
                center
            </div>
         
        
        </div>
        <div class="left">left</div>
      
        <div class="right">right</div>
    </div>
</body>
</html>

图片优化技巧

减少http请求降体积

合适地方选择合适的图片类型

jpg 不支持背景透明装饰性，商品盒子图片 (60-70)

png 支持背景透明（精灵图）png-8

webp 背景透明+ 无损压缩+体积小不兼容ie-8

哎呦灬不错呦。

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
html中经典的多列布局和两列自适应布局

经典的多列布局自适应：一个盒子的宽度随着屏幕宽度发生变化单位：%两列自适应布局原理：两列并排左列固定宽度右列宽度自适应（100%）/* 1.解决方案：左列+ float: left; *//* 2.解决方案左列+ position:absolute */三列自适应布局原理：左右两列固定宽度中间列自适应 (100%)圣杯布局过程：三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用最外侧大盒子的内边距和相对定位把中间列内容居
复制链接

扫一扫