前端培训之如何解决列表中list-style-image不能精准定位的问题

在我们前端培训学习的过程中大家应该都见到过在列表前边有的时候为了美观度,我们都会加一个小图标,我们在培训学习的时候都应该知道这个可以给li设置样式,简单的可以用list-style-image属性完成,直接赋值url图片路径就可以,但是当要求设置图片位置的时候,那么这个方法可能就不够用了。那就要用下边的这个方法了。.

方法:

不使用list-style-image来定义列表项目标记符号,而用background-image来代替并通过background-position来进行定位

.product-shiruo-left ul li{

    padding-left: 26px;   //别忘了设置padding-left否则你的图片位置会贴着字开始

    background:url(“../image/chanpin_yuan.png”) no-repeat 3px 13px;

}

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)