学习日记——圣杯布局

进阶H5小白

于 2021-11-03 15:33:06 发布

阅读量96

点赞数

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

本文链接：https://blog.csdn.net/qq_42660453/article/details/121122200

版权

H5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

需求:就是结构上把center 放在前面写,视觉上还是左中右三栏效果,有哪些方法可以实现

目的:是希望页面加载的时候优先加载中间的核心部分,优点,可以让搜索引擎及时抓取到想要表达的核心内容,便于搜索引擎收录

特点: 1\独立的3块 2\结构上优先写center 3\所有的盒子都左浮动4\center的宽度设置了100%

<style>
        /* 以下书写出来的就是圣杯布局: */
        body{
            margin: 0;
            padding-left: 100px;
            padding-right: 200px;
        }
        .left{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }
        .right{
            width: 200px;
            height: 400px;
            background-color: orange;
            float: left;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
        .center{
            width: 100%;
            height: 500px;
            background-color: blue;
            float: left;
        }
    </style>

<body>
    <div class="center">中间的</div>
    <div class="left">左边的</div>
    <div class="right">右边的</div>
</body>

效果图如下：

进阶H5小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习日记——圣杯布局

需求:就是结构上把center 放在前面写,视觉上还是左中右三栏效果,有哪些方法可以实现目的:是希望页面加载的时候优先加载中间的核心部分,优点,可以让搜索引擎及时抓取到想要表达的核心内容,便于搜索引擎收录特点: 1\独立的3块 2\结构上优先写center 3\所有的盒子都左浮动4\center的宽度设置了100%<style> /* 以下书写出来的就是圣杯布局: */ body{ ...
复制链接

扫一扫