Blogger Information
Blog 60
fans 1
comment 1
visits 64402
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
利用html+css制作圣杯布局_2018年8月18日
PHP学习
Original
809 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        .content {
            width: 600px;
            background-color: lightblue;
            margin: auto;
            padding: 0 200px;
            overflow: hidden;
        }
        .main {
            width: 100%;
            background-color: yellow;
            height: 600px;
            float: left;
        }
        .left {
            width: 200px;
            height: 600px;
            background-color: blue;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            width: 200px;
            height: 600px;
            background-color: burlywood;
            float: left;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="main">主体内容</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结

1、对最后的相对定位没有搞懂,为什么要利用相对定位,不是移动上去了,应该就可以把位置显示出来了啊。

2、不是我移动了-100%的百分对吗,应该是直接到最初的位置。

猜测:

1、虽然我们移动了-100%百分比,但是这个是建立在父元素上面,因为父元素已经改变了大小,是600像素了,所以要利用相对定位,将-200往后移动。所以右边也一样的。

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post