css浮动考题,阿里的
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
border:solid 1px #339;
background-color:#069;
}
#d1{
width:100px;
height:150px;
margin-bottom:10px;
float:left;
}
#d2{
clear:left;
float:left;
width:100px;
height:150px;
}
#d3{
width:200px;
height:210px;
margin-left:110px;
_margin-left:107px;
}
</style>
</head>
<body>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
</body>
*{
margin:0;
padding:0;
}
div{
border:solid 1px #339;
background-color:#069;
}
#d1{
width:100px;
height:150px;
margin-bottom:10px;
float:left;
}
#d2{
clear:left;
float:left;
width:100px;
height:150px;
}
#d3{
width:200px;
height:210px;
margin-left:110px;
_margin-left:107px;
}
</style>
</head>
<body>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
</body>
另外的一个效果
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
border:solid 1px #339;
background-color:#069;
position:absolute;
}
#d1{
width:100px;
height:150px;
}
#d2{
width:100px;
height:150px;
top:160px;
}
#d3{
width:200px;
height:210px;
margin-left:110px;
}
</style>
<script type="text/javascript">
function load1(){
alert("打开网页广告");
window.open("http://www.baidu.com/","","width=700,height=620,top=0,left=0,Location=yes,Toolbar=yes,Resizable");
}
function unload1(){
alert("关闭网页广告");
window.open("http://www.google.com/");
}
</script>
<script type="text/javascript" defer="defer">
function zoom(id,x,y)
{
var obj=document.getElementById(id);
//alert(obj);
var objw=obj.clientWidth;
//alert(objw);
var objh=obj.clientHeight;
//alert(objh);
obj.onmousemove=function(){
this.style.width=objw*x+"px";
this.style.height=objh*y+"px";
this.style.backgroundColor="#900";
this.style.zIndex=1;
}
obj.onmouseout=function()
{
this.style.width="";
this.style.height="";
this.style.backgroundColor="";
this.style.zIndex="";
}
}
zoom("d1",1.25,1.25);
zoom("d2",1.25,1.25);
zoom("d3",1.25,1.25);
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
border:solid 1px #339;
background-color:#069;
position:absolute;
}
#d1{
width:100px;
height:150px;
}
#d2{
width:100px;
height:150px;
top:160px;
}
#d3{
width:200px;
height:210px;
margin-left:110px;
}
</style>
<script type="text/javascript">
function load1(){
alert("打开网页广告");
window.open("http://www.baidu.com/","","width=700,height=620,top=0,left=0,Location=yes,Toolbar=yes,Resizable");
}
function unload1(){
alert("关闭网页广告");
window.open("http://www.google.com/");
}
</script>
<script type="text/javascript" defer="defer">
function zoom(id,x,y)
{
var obj=document.getElementById(id);
//alert(obj);
var objw=obj.clientWidth;
//alert(objw);
var objh=obj.clientHeight;
//alert(objh);
obj.onmousemove=function(){
this.style.width=objw*x+"px";
this.style.height=objh*y+"px";
this.style.backgroundColor="#900";
this.style.zIndex=1;
}
obj.onmouseout=function()
{
this.style.width="";
this.style.height="";
this.style.backgroundColor="";
this.style.zIndex="";
}
}
zoom("d1",1.25,1.25);
zoom("d2",1.25,1.25);
zoom("d3",1.25,1.25);
</script>
