双飞翼布局

最新推荐文章于 2024-06-01 23:21:16 发布

css_styles

最新推荐文章于 2024-06-01 23:21:16 发布

阅读量485

点赞数

分类专栏： css 文章标签：布局技术

本文链接：https://blog.csdn.net/css_styles/article/details/50954314

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

    采用三栏式布局时所提出的要求一般是左栏与右栏定宽，中间部分宽度自适应，中间部分作为内容主体，我们需要将其放在左栏与
右栏之前来达到优先渲染的效果。一般采用双飞翼布局和圣杯布局。
    双飞翼布局与国外的圣杯布局有着相似的思路，但是在某些细节上也有不同点。
    二者的主要技术要点：浮动、负边距、相对定位position：relative；
    二者的不同之处在于处理主体mian部分时，圣杯布局是将main、left、right部分的父元素使用padding来左右留出left、right的宽度，
然后将left、right部分使用 position:relative; 来定位到相应的位置；
    而双飞翼布局是给主体main部分增加一个div来包括文章内容，新增的div使用margin增加左右边距隔离left、right部分，
没有用到position:relative;（相对定位）。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <title>双飞翼布局</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            color:#fff;
            font-size: 16px;
            line-height: 3;
            text-indent: 2em;
        }
        .header{
            background:#205488;
            width:100%;
            height:150px;
        }
        .footer{
            background:#2E5D5C;
            width:100%;
            height:100px;
        }
        .article{
            background:#EAD335;
            width:100%;
            min-width:900px;
            overflow:hidden;
            clear:both;
            _zoom:1;
        }
        /* 三列等高的样式 */
        .article>div{
            float:left;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .article .main{
            background:#35CA7F;
            width:100%;
        }
        .article .main-inner{
            background: #FD893B;
            margin:0 150px 0 200px;
        }
        .article .left{
            background: #18C3BD;
            width:200px;
            margin-left:-100%;
        }
        .article .right{
            background: #3890E8;
            width:150px;
            margin-left:-150px;
        }
    </style>   
</head>
<body>
<!-- header -->
<div class="header">
    头部，通常放置logo、导航、banner图等
</div>
<!-- article -->
<div class="article">
    <!-- main -->
    <div class="main">
        <div class="main-inner">
            <p>内容部分</p>
            <p>内容部分</p>
            <p>内容部分</p>
            <p>内容部分</p>
            <p>内容部分</p>
            <p>内容部分</p>
            <p>内容部分</p>
            <p>内容部分</p>
            <p>内容部分</p>
            <p>内容部分</p>
            <p>内容部分</p>
        </div>
    </div>
    <!-- left -->
    <div class="left">
        左侧边栏
    </div>
    <!-- right -->
    <div class="right">
        右侧边栏
    </div>
</div>
<!-- footer -->
<div class="footer">
    尾部，通常放置版权信息等
</div>

</body>
</html>

css_styles

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双飞翼布局

采用三栏式布局时所提出的要求一般是左栏与右栏定宽，中间部分宽度自适应，中间部分作为内容主体，我们需要将其放在左栏与右栏之前来达到优先渲染的效果。一般采用双飞翼布局和圣杯布局。双飞翼布局与国外的圣杯布局有着相似的思路，但是在某些细节上也有不同点。二者的主要技术要点：浮动、负边距、相对定位position：relative；二者的不同之处在于处理主体mian部分时，
复制链接

扫一扫

专栏目录