常用布局

1.用CSS控制三个DIV，实现如下图布局：

主要考虑几个问题：1. IE6 的 3 像素 BUG；2. 清除浮动；

HTML结构：

<div class='one'></div>      
<div class='two'></div>
<div class='three'></div>

css样式：

.one{ width: 200px; height: 300px; background:#ccc; float:left;}
.two{ width: 200px; height: 200px; background:red; clear:left; float:left; margin-top:10px;}
.three{ width:300px; height: 500px; background:green; margin-left:210px; zoom:1; _margin-left:207px;}

 

2.三列，左右定宽，高度自适应，中间宽度自适应

主要考虑中间宽度自适应，左右高度自适应问题

HTML结构：

<div style="overflow:hidden;">
      <div class='right'></div>      
      <div class='left'></div>
      <div class='center'></div>
</div>

ccs样式：

.left{ width:200px; background-color:red; float:left; margin-bottom:-20000px; padding-bottom:20000px; }
.center{ height:500px; background-color:blue; margin-left:200px; margin-right:200px; }
.right{ width:200px; background-color:green; float:right; margin-bottom:-20000px; padding-bottom:20000px;}

 

3.两列，左定宽，右自适应

HTML结构：

<div class='left'></div>
<div class='right'></div>

ccs样式：

.left{ width:200px; background-color:red; height:500px; float:left; }
.right{ background-color:green; margin-left:200px; height:500px; }

 

4.两列，右定宽，左自适应

HTML结构：

<div class='right'></div>
<div class='left'></div>

ccs样式：

.left{ height: 500px; background-color: red;  margin-right: 200px;}
.right{ width: 200px; height: 500px; background-color: green; float:right; }

 

5.当鼠标略过某个区块的时候，该区块会放大25%，并且其他的区块仍然固定不动。

HTML结构：

<div class='one' id="one"></div>      
<div class='two'></div>
<div class='three'></div>

ccs样式：

.one ,.two ,.three{ position:absolute;}
.one{ width: 200px; height: 300px; background:#ccc; top:0;  }
.two{ width: 200px; height: 200px; background:red; top:300px; }
.three{ width:300px; height: 500px; background:green; left:210px; }

javascript代码：

function big(id,x,y){
    var obj = document.getElementById(id);
    var w = obj.clientWidth;
    var h = obj.clientHeight;
    obj.onmouseover = function(){
        this.style.width = w * x + "px";
        this.style.height = h * y + "px";
        this.style.background = "#ff0";
        this.style.zIndex = "5"
    }
    obj.onmouseout = function(){
        this.style.width = "";
        this.style.height = "";
        this.style.background = "#ccc";
        this.style.zIndex = ""
    }
}
 big("one",1.25,1.25);