CSS布局实例

最新推荐文章于 2023-05-22 18:25:58 发布

ellieokokok

最新推荐文章于 2023-05-22 18:25:58 发布

阅读量345

点赞数

分类专栏： css 页面布局实例

css 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

页面布局

4 篇文章 0 订阅

订阅专栏

实例

1 篇文章 0 订阅

订阅专栏

淘宝双飞翼

这里写图片描述

它的特点是：页面在被浏览器解析时，按照子 - –> 主—> 附加的顺序进行加载
淘宝在DOM中是按主列 - –>子列 - –> 扩展列的顺序书写的，此时网页被浏览器解析时，按照主 - –> 子 - –> 附加的顺序进行加载 —— 也就是我们常说的”重要的内容先加载”。这种结构会更好一些

<div class="grid-s5m0e5">
　　<div class="col-main">我是主列</div>
　　<div class="col-sub">我是子列</div><br>　　<div class="col-extra">我是附加列</div>
</div>

.grid-s5m0e5 { width:100%;}
.grid-s5m0e5 .col-main { float:left; width:100%; min-height:30px; background:#000; }
.col-sub { float:left; width:190px; min-height:30px; background:#f00; margin-left:-100%; }
.col-extra { float:left; width:190px; min-height:30px; background:#00f; margin-left:-190px; }

下面逐行分析一下：

第1行.grid-s5m0e5 是一个布局框的名称，我们为其定义了宽度100%（在IE6一不定义100%时，有点小问题，亲们自己可以一试）

第2行.col-main 【主列】：浮动左侧，宽度100%（宽度全让它给占了，左右两侧的层该怎么办？）

第3行.col-sub 【子列】：浮动左侧，宽度190，左边界为-100%（此处是关键：浮动情况下，负边界值会导致DIV上移，而使用-100%可以确实它移动到最左侧。）

第4行.col-extra 【附加列】：左浮动，宽度190，左边界为-190px（道理同上，注意的是，负左边界一定要大于或等于该DIV的宽度，才能靠到上一行去）

网页的呈现基本上已经是【子】【主】【附加】的排列了。那么，现在的问题是：【子列】【附加列】的位置对了，但是【主列】会被子列和附加列给挡住，如何正确的给【主列】定位呢？

1、DOM结构的改变：在.col-main下再次添加一个 .main-wrap【这就是淘宝的布局中col-main下有一个main-wrap，而col-sub下却没有sub-wrap的原因，我猜的^_^】

2、利用CSS调整.main-wrap的位置。【这里很简单，就是把左右被挡住的部分，设置为main-wrap的左右边界即可】

修改后是这样的

<div class="grid-s5m0e5">
    <div class="col-main">
        <div class="main-wrap">
            我是主列，出来吧！
        </div>
    </div>
    <div class="col-sub">我是子列</div>
    <div class="col-extra">我是附加列</div>
</div>
<style>
.grid-s5m0e5 { width:100%; margin-right:auto; margin-left:auto; }
.grid-s5m0e5 .col-main { float:left; width:100%; min-height:30px; background:#000; }
.grid-s5m0e5 .col-main .main-wrap {
    margin-left:200px;  /*与col-sub产生10像素距离*/
    margin-right:200px; /*与col-extra产生10像素距离*/
    background:#0f0;
    min-height:30px;
}
.col-sub { float:left; width:190px; min-height:30px; background:#f00; margin-left:-100%; }
.col-extra { float:left; width:190px; min-height:30px; background:#00f; margin-left:-190px; }
</style>

布局解释：
左右190px，中间自动伸缩并与左右保持10个像素的距离。

这种布局的好处之一是：可以实现主要的内容先加载的优化；

那么第二个好处是：兼容目前所有的主流浏览器，包括IE6在内哦。

第三个好处是：不同的布局框，可以通过调整.col-sub、.col-extra、.col-main、.col-main .main-wrap的相关CSS属性即可实现。

多列等高

主体内容是两列结构，左列是用来导航的，右列是用来显示内容的。我们看到它们有一个共同的边框，中间还有一条分隔线，左右两列的高度都是不固定的。这种情况下就需要两列的高度保持一致了，左边高度增加，右边也跟着增加，右边高度增加，左边同样也要增加，否则就会出现“断层”的效果。
在这里，等高布局是为了维护边框线条的完整性，在有些地方则可能是为了维护背景的完整性，达到整体一致不缺失的效果。

这里写图片描述

这个css多列等高是利用padding-bottom|margin-bottom正负值相抵消的原理来制作的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
    overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
    padding-bottom:2000px;
    margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;
   padding-bottom:2000px;
   margin-bottom:-2000px;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">我是left</div>
    <div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div>
    <div style="clear:both"></div>
</div>
</body>
</html>