京东首页左侧广告部分设计

//中间主体部分
			

				
				
					
				
			

css部分

.ad-l {
	position: absolute;//绝对定位，调整ad-l位置,gird是相对定位
	top: 10px;
	left: -250px;
	height: 470px;
	width: 250px;
}
.ad-r {
	position: absolute;//绝对定位，调整ad-l位置,gird是相对定位
	top: 0;
	left: 250px;
	height: 470px;
	width: 0;//隐藏ad-r
	z-index: 999;提高权重
	transition: all 0.8s;设置css3动画
}
.ad-l:hover .ad-r{
	width: 790px;设置点击后展开大小
}

效果如图