前段基础笔记

最新推荐文章于 2024-09-04 23:24:54 发布

胡言不语

最新推荐文章于 2024-09-04 23:24:54 发布

阅读量59

点赞数

文章标签： html css servlet

本文链接：https://blog.csdn.net/WWW1260782205/article/details/126839872

版权

六、圣杯布局&双飞翼布局

概述：圣杯布局源于国外，双飞翼布局是经过淘宝UED优化对于圣杯布局的优化，都是经典的三栏式布局的解决方案

圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度，中间部分自适应的三栏布局，不过两者实现的原理有所不同

实现要点：

先加载中间列，结构中--左-右
显示结果是左-中-右
中间自适应，两侧列固定

圣杯布局

实现步骤

1）HTML结构中——先中间内容后侧边栏
2）两侧宽度固定，中间宽度设置100%
3）中间内容和左右两侧分别加浮动 float:left;
4) 将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到右边（margin-left: -右侧盒的宽度）
5）通过父盒将左右盒子的位置露出来（在父盒上设置padding: 0 右侧盒子宽度 0 左侧盒子宽度）
6）分别还原左侧盒和右侧盒
- 将左侧列移动至对应位置（position:relative; 左侧盒设置left属性，值为-左侧盒宽度；）
- 将右侧列移动至对应位置（position:relative; 左侧盒设置left属性，值为右侧盒宽度；）
7）父盒容器设置最小宽度，防止中间列消失

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .wrap {
            height: 420px;
            background-color: aquamarine;
            /* 将左右盒子的位置露出来 */
            padding: 0 200px;
            /* 解决当宽度到很小的问题 */
            min-width: 200px;
        }

        .wrap div {
            float: left;
        }

        .wrap .center {
            width: 100%;
            height: 390px;
            background-color: blue;
        }

        .left {
            width: 200px;
            height: 400px;
            background-color: tomato;
            margin-left: -100%;
            position: relative;
            left: -200px;

        }

        .right {
            width: 200px;
            height: 400px;
            background-color: pink;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
    </style>
</head>

<body>
    <div class="wrap clearfix">
        <div class="center">center主体内容</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

双飞翼布局

双飞翼布局，始于淘宝 UED。如果把三栏布局比作一只鸟，可以把 main 看成是鸟的身体，left 和 right 则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。

实现步骤

1）HTML结构中——先中间结构（主体结构中要有主体内容盒，主体内容盒里嵌套一个子盒）后侧边栏
2）两侧盒子固定宽度，中间主体结构盒宽度100%；
3）中间结构盒和左右两侧设置浮动 float: left;
4）将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到最右边（margin-left: -右侧盒宽度）
5）在中间主体结构盒的子盒上设置margin值将中间内容露出来（margin: 0 右侧边宽度 0 左侧边宽度）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .wrap {
            height: 420px;
            background-color: aquamarine;
            min-width: 400px;
        }

        .wrap>div {
            float: left;
        }

        .wrap .center {
            width: 100%;
            height: 395px;
            background-color: blue;


        }

        .wrap .center .inner {
            height: 380px;
            background-color: yellowgreen;
            /* 把左右盒子的位置留出来 */
            margin: 0 200px;
        }

        .wrap .left {
            width: 200px;
            height: 400px;
            background-color: tomato;
            margin-left: -100%;
        }

        .wrap .right {
            width: 200px;
            height: 400px;
            background-color: pink;
            margin-left: -200px;
        }
    </style>
</head>

<body>

    <div class="wrap clearfix">
        <div class="center">
            <div class="inner">
                main主体内容
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

</body>

</html>

四、文本溢出处理显示省略号

胡言不语

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前段基础笔记

概述：圣杯布局源于国外，双飞翼布局是经过淘宝UED优化对于圣杯布局的优化，都是经典的三栏式布局的解决方案圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度，中间部分自适应的三栏布局，不过两者实现的原理有所不同实现要点：先加载中间列，结构中--左-右显示结果是左-中-右中间自适应，两侧列固定。
复制链接

扫一扫