记录京东广告两种方法

最新推荐文章于 2021-09-12 12:24:25 发布

Mm_Dxx

最新推荐文章于 2021-09-12 12:24:25 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/mm_dxx/article/details/103965748

版权

第一种

鼠标放到广告条上，显示一张大的广告图片

广告条在左侧分类大盒子里，再定位到左边

动画效果：过渡（一开始大图片宽度设置为0，鼠标放上去大图片宽度恢复）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jd</title>
	<style>
		.w {  /* 版心的公共类 */
			width: 1190px;  /* 京东的版心是 1190 */  
			margin: 0 auto; 
		}
		.main {
			height: 480px;
			background-color: pink;
		}
		.main-col1 {
			width: 190px;
			height: 100%;
			position: relative;
		}
		.ad {
			width: 250px;
			height: 480px;
			position: absolute;
			top: 0;
			left: -250px;
		}
		.ad-r img {
			position: absolute;
			top: 0;
			left: 250px;
			z-index: 999;
			width: 0;
			height: 480px;
			background: url(../images/ad-r.jpg);
			/* 这个盒子做动画，所以给它添加过渡 */
			transition: all 0.8s;
		}
		.ad:hover .ad-r img {  
			/* 鼠标经过 ad 这个广告大盒子的时候， 里面的这个叫 ad-r的盒子的宽度由0变为 990 */
			width: 990px;
		}
	</style>
</head>
<body>
	<div class="w main">
		<div class="main-col1">
			<div class="ad">
				<img src="images/ad-l.png" alt="">
				<div class="ad-r">
					<img src="images/ad-r.jpg" " >
				</div>
			</div>
		</div>
	</div>
</body>
</html>

第二种

鼠标放在两侧广告栏区域会变为小手，放在中间蓝色的版心区域则不会，即版心内容不受影响。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jd</title>
	<style>
		.w {  /* 版心的公共类 */
			width: 1190px;  /* 京东的版心是 1190 */  
			margin: 0 auto; 
		}
		.jd {
			height: 480px;
			margin: 0 auto;
			position: relative;
		}
		.ad {
			width: 100%;
			height: 100%;
			background: url(images/bg.png) no-repeat top center;
			position: absolute;
			top: 0;
			left: 0;
		}
		.ad a {
			display: block;
			width: 100%;
			height: 100%;
			cursor: pointer;	
		}
		.jd-inner {
			height: 480px;
			background-color: skyblue;
			position: relative;
			z-index: 999;
		}
	</style>
</head>
<body>
	<div class="jd">
		<div class="w jd-inner">
		</div>
		<div class="ad">
			<a href="#"></a>
		</div>
	</div>
</body>
</html>

Mm_Dxx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
记录京东广告两种方法

第一种鼠标放到广告条上，显示一张大的广告图片广告条在左侧分类大盒子里，再定位到左边动画效果：过渡（一开始大图片宽度设置为0，鼠标放上去大图片宽度恢复）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jd</title> ...
复制链接

扫一扫