简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 双飞翼布局基本思路与实现代码
Blogger Information
Blog 29
fans 0
comment 0
visits 19494
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
双飞翼布局基本思路与实现代码
blog
Original
592 people have browsed it

下面时双飞翼布局的基本思路和实现代码

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="2.css">
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .header{
            background-color:lightgray;
        }
        .header .content{
            width:1000px;
            height:60px;
            background-color:black;
            margin:0px auto;
        }
        .header .content .nav{
            margin:0px;
            padding:0px;
        }
        .header .content .nav .item{
            list-style:none;
        }
        .header .content .nav .item a{
            float:left;
            min-width:100px;
            min-height:60px;
            line-height:60px;
            color:white;
            padding:0 15px;
            text-decoration: none;
            text-align:center;
        }
        .header .content .nav .item a:hover{
            background-color:#ccc;
            font-size:1.1rem;
        }
        .container{
            width:1000px;
            margin:5px auto;
            background-color:lightgray;
            overflow: hidden;
        }
        .wrap{
            width:inherit;
            min-height:800px;
            background-color:blue;
        }
        .left{
            width:200px;
            min-height:800px;
            background-color:green;
        }
        .right{
            width:200px;
            min-height:800px;
            background-color:lightseagreen;
        }
        .wrap, .left, .right{
            float:left;
        }
        .left{
            margin-left:-100%;
        }
        .right{
            margin-left:-200px;
        }
        .main{
            padding-left:200px;
            padding-right:200px;
        }
        .footer{
            background-color:lightgray
        }
        .footer .content{
            width:1000px;
            height:60px;
            background-color:#444;
            margin:0px auto;
        }
        .footer .content p{
            text-align:center;
            line-height:60px;
        }
        .footer .content a{
            text-decoration:none;
            color:lightgrey;
        }
        .footer .content a:hover{
            color:black;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="">首页</a></li>
            <li class="item"><a href="">视频教程</a></li>
            <li class="item"><a href="">社区问答</a></li>
            <li class="item"><a href="">技术文章</a></li>
            <li class="item"><a href="">编程词典</a></li>
            <li class="item"><a href="">工具下载</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="wrap">
        <div class="main">主体内容区</div>
    </div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>
<div class="footer">
    <div class="content">
        <p>
            <a href="">&copy;版权所有</a>&nbsp;|&nbsp;
            <a href="">0551-88889999</a> &nbsp;|&nbsp;
            <a href="">皖ICP2016098801-1</a>
        </p>
    </div>
</div>




</body>
</html>

运行实例 »

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

1.png

上述代码中涉及知识点注释总结:

  1. 双飞翼布局主要通过设置区块的负外边距的方式,实现向反方向移动区块,从而实现三列布局,如同上图中左侧,主体内容区,右侧的效果

  2. 中间栏要放在文档流前面以优先渲染

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！