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{ 200px; height: 300px; background:#ccc; top:0; }
.two{ 200px; height: 200px; background:red; top:300px; }
.three{ 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);