效果展示

代码

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link href="main.css" rel="stylesheet">
</head>
<body>
<div class="mr-box"><ol><li><img src="data:images/1.jpg">海外购.日本上线  跨境直邮</li><li><img src="data:images/2.jpg">英美复活节折扣季 国际大牌免邮</li><li><img src="data:images/3.jpg">新品馆 国际免邮</li><li><img src="data:images/4.jpg">Skechers 舒适鞋169元起</li><li><img src="data:images/4.jpg">英亚Prime 精品上新国际免邮</li><li><img src="data:images/6.jpg">大牌口红专场低至139元</li><li><img src="data:images/7.jpg">世界牛仔翘楚Lee低至89元</li><li><img src="data:images/8.jpg">游戏玩家必备装备199元起  广告</li></ol>
</div>
</body>
</html>

CSS

.mr-box{width:1400px;height:400px;margin:0 auto;position:relative;background: url(images/1.jpg) no-repeat 0 0;/*设置背景图像*/
}
li img{position:absolute;/*设置定位方式*/top:0;left:0;display:none;
}
li{list-style:none;width:158px;height:55px;float: left;background:#949494;margin-top:300px;margin-left:2px;font-family: "微软雅黑";font-size:14px;text-indent:2em;text-align: center;line-height: 20px;color:#fff;padding-top:10px;/*设置内边距*/
}
li:hover img{display:block;
}
li:hover{  /*鼠标滑过时候的样式*/background:orange;
}

实现淘宝广告图片切换（display：block/none）相关推荐

jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
爬虫案例若干-爬取CSDN博文,糗事百科段子以及淘宝的图片
前面学习了基本的浏览器伪装的方式,现在来看三个实例: 例1 爬取CSDN首页的博文思路很简单,伪装浏览器之后,通过正则获取对应的url链接,然后把对应的url的文章都下载下来 #!/usr/bin/ ...
js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
JavaScript之衣服相册切换效果（类似淘宝商品图切换）
JavaScript之衣服相册切换效果(类似淘宝商品图切换) 话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> &l ...
爬虫第二弹：千图网电商淘宝模板图片下载
爬虫第二弹:千图网电商淘宝模板图片下载一.功能分析: 1.下载千图网电商淘宝的所有模板图片要求是高清版本: 2.并按照主页面将图片归类文件夹. 二.思路分析: 1.利用scrapy构建scra ...
淘宝/天猫图片识别商品接口，1688图片识别商品API接口
淘宝/天猫图片识别商品接口,1688图片识别商品API接口接口代码如下: 1.公共参数: 名称类型必须描述 key String 是调用key(必须以GET方式拼接在URL中) secret ...
淘宝店图片尺寸是多少？怎么修改淘宝图片的尺寸？
随着网络的发展现在的电商平台越来越多,淘宝作为常用的电商平台也是大家最熟悉的,同时也是比较成熟的平台,许多人都会选择在淘宝上开自己的网店,而很多新手在装修上传图片资料问题上会遇到图片大小不合适的情况, ...
Python淘宝美眉图片下载爬虫视频教程-何家胜-专题视频课程
Python淘宝美眉图片下载爬虫视频教程-21985人已学习课程介绍本套视频主要讲述Python项目实训一:如何利用Python的while循环体设计实现网络爬虫刷博器的程序的设计 ...
看不到淘宝部分图片，只能看youku视频
仅供参考:我用的是windows xp sp3 雨林木风的系统,IE4的浏览器.不知道什么时候开始,无论我用什么浏览器,上淘宝看不到图片,上56.土豆,网页排版错误,有视频的地方全部左上方有一个红叉. ...

实现淘宝广告图片切换（display：block/none）

实现淘宝广告图片切换

效果展示

代码

HTML

CSS

实现淘宝广告图片切换（display：block/none）相关推荐

最新文章

热门文章