简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 三列双飞翼网站布局和三列圣杯网站布局案例_20180820_1526
Blogger Information
Blog 27
fans 0
comment 0
visits 43519
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
三列双飞翼网站布局和三列圣杯网站布局案例_20180820_1526
xingzhi的博客
Original
920 people have browsed it

经典的三列双飞翼网站布局

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经典的三列双飞翼网站布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    header,footer{
        width: 100%;
        height: 90px;
        background: #efefef;
        display: block;
        line-height: 90px;
        text-align: center;
    }
    .fl{
        float: left;
    }
    .w250{
        width: 250px;
    }
    .container{
        width: 1000px;
        margin:0 auto;
        overflow: hidden;
        background: #2c2c2c;
    }
    .container .wrap{
        width: 100%;
    }
    .container .main{
        min-height: 600px;
        margin: 0 260px;
        background:#cbc2c2;
    }
    .container .left{
        min-height: 600px;
        background: #a6a3a3;
        margin-left: -100%;
    }
    .container .right{
        min-height: 600px;
        background: #5f5d5d;
        margin-left: -250px;
    }
</style>
<body>
    <header>
        <div class="container">TOP</div>
    </header>
    <div class="container">
        <div class="wrap fl">
            <div class="main">MAIN</div>
        </div>
        <div class="left w250 fl">LEFT</div>
        <div class="right w250 fl">RIGHT</div>
    </div>
    <footer>
        <div class="container">FOOTER</div>
    </footer>
</body>
</html>

运行实例 »

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

三列经典的双飞翼布局的创建步骤与原理分析:
第1步: 创建一个大容器container,设置页面总宽度并左右居中

第2步:创建三列DOM结构,顺序非常重要,
  2.1主体content在前,其次是left和right
  2.2主体content必须套一个父级块main,将样式加给它才可以
  2.3其中main宽度100%,left,right宽度固定
  2.4main,left,right的高度暂时先设置为固定值,有了内容填充时再设置为100%,随内容自适应变化

第3步:main,left,right全部左浮动,因为前面的wrap块宽度为100%,必须导致left,right全部被挤到了下面
第4步: left设置,margin:-1000px;或者 margin-left:-100%;
(100%就是父级块的宽度1000px,负数表示方向相反,即向左缩进,最终到达父块起始点:0,0)

第5步: right设置,参考left,只需要margin-left: -200px;
 (注意,只要移动一个绝对值,把自己移上去到最后就可以了)

第6步: content内容块,添加左右外边距,将内容区挤压出来: margin: 0 200px;
  并给一个宽度100%,直接引用父级块宽度


经典的三列圣杯网站布局

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经典的三列圣杯网站布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    header,footer{
        width: 100%;
        height: 90px;
        background: #efefef;
        display: block;
        line-height: 90px;
        text-align: center;
    }
    .fl{
        float: left;
    }
    .w250{
        width: 250px;
    }
    .container{
        width: 500px;
        margin:0 auto;
        overflow: hidden;
        background: #2c2c2c;
        padding: 0 250px;
    }
    .container .main{
        width: 100%;
        min-height: 600px;
        background:#cbc2c2;
    }
    .container .left{
        min-height: 600px;
        margin-left:-100%;
        background: #a6a3a3;
        position:relative;
        left: -250px;
    }
    .container .right{
        min-height: 600px;
        background: #5f5d5d;
        margin-left:-250px;
        position:relative;
        right:-250px;
    }
</style>
<body>
    <header>
        <div class="container">TOP</div>
    </header>
    <div class="container">
        <div class="main fl">MAIN</div>
        <div class="left w250 fl">LEFT</div>
        <div class="right w250 fl">RIGHT</div>
    </div>
    <footer>
        <div class="container">FOOTER</div>
    </footer>
</body>
</html>

运行实例 »

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


双飞冀与圣杯布局的最大区别：

20180820161830.jpg

Correction status：qualified

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！