阿里的一道面试题

第一部分：用CSS实现布局

请使用CSS控制3个div，实现如下图的布局：

 

 

<div class="rightcontainer">right part</div>
<div class="left-on">left part1</div>
<div class="left-down">left part2</div>

 

<style type="text/css">
      body{ 
        margin:0 auto; 
        padding:30px;
        width:900px;
      }  
      div{
        background:#CCCCCC; 
      } 
      .left-on{
        width:100px;
        height:150px;
        border:1px solid gray;
  	}
      .left-down{
        width:100px;
        height:150px;
        border:1px solid gray;
       }
  	.rightcontainer{
  	float:right;
        width:800px;
        height:300px;
        border:1px solid gray;
  	}
  	</style>

 

 

 

第二部分：用javascript或者css优化布局

当鼠标略过某个区块的时候，该区块会放大25%,其他区域固定不动。

利用css3中的缩放可以轻松解决问题：

 

.left-on:hover{
        background-color:red;
        -webkit-transform:scale(1.25);
        transform:scale(1.25);
      }