京东头部shortcut部分左图片右文字的制作方法

最新推荐文章于 2022-03-01 18:29:16 发布

xiaoxiao_xiaoliu

最新推荐文章于 2022-03-01 18:29:16 发布

阅读量1.1k

点赞数

分类专栏： css 左图片右文字的实现方法文章标签： css 左图片右文字

本文链接：https://blog.youkuaiyun.com/xiaoxiao_xiaoliu/article/details/40978987

版权

css 左图片右文字的实现方法专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何制作京东头部快捷入口的左图片右文字布局。提供了两种方法，包括利用定位和padding-left，以及使用margin-left配合背景图实现。详细讲解了样式设置，如设置图片的height和width，以及通过负margin调整元素位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用背景图时一定要定义height和width，否则图片显示不出来

方法一：使用定位和padding-left，图片作为背景图，之后使用定位实现

li.fore1{ padding-left:16px; position:relative;}
li.fore1 b{ position:absolute; top:10px; left:0; background:url("http://misc.360buyimg.com/lib/skin/2013/i/20130725.png") no-repeat 0 0;width:13px; height:13px;}

方法二：使用margin-left:-?px;图片依旧作为背景图

li.fore2 b{ float:left; display:inline; width:12px; height:12px; background:url("http://misc.360buyimg.com/product/skin/2013/i/index-jd-wx-qrcode.png") no-repeat;margin-left:-16px; margin-top:11px;}