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

最新推荐文章于 2022-10-06 12:44:42 发布

ai_d_chuan

最新推荐文章于 2022-10-06 12:44:42 发布

阅读量606

点赞数

分类专栏： web前端文章标签： html css

本文链接：https://blog.csdn.net/ai_d_chuan/article/details/82811788

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<div class="w grid">//中间主体部分
			<div class="ad-l">
				<a href="#"><img src="img/ad-l.png" /></a>
				<a href="#">
					<img src="img/ad-r.jpg" class="ad-r"/>
				</a>
			</div>
</div>

在这里插入图片描述
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;设置点击后展开大小
}

效果如图
在这里插入图片描述