当前位置: » 首页 » CSS技术 » 【CSS菜鸟实践之旅三】实现菜单列表前的自定义图标

【CSS菜鸟实践之旅三】实现菜单列表前的自定义图标

今天实践的内容是:菜单列表前添加自定义图标,实现以下效果:

Demo示例地址:菜单列表圆点示例
总结:
1.【background】属性,主要包含以下5个主要的配置项:

* background-color: 指定填充背景的颜色。
* background-image: 引用图片作为背景。
* background-position: 指定元素背景图片的位置。
* background-repeat: 决定是否重复背景图片。
* background-attachment: 决定背景图是否随页面滚动。

并且可以把各个属性合为一行,而不用每次都单独把他们写出来
例如:

background: url(image.jpg) 50% 0 repeat-y;

更加详细的【background】属性,请参考:CSS背景全攻略
2.实现的方法大体如下:
第一步:通过【list-style: none】隐藏列表可能自带的圆点。
第二部:放置自定义图标作为列表项的背景图片。
第三步:通过【background-position】配置项定位图标的位置,此例中配置为:【background-position: 15% center;】,即图标在水平位置上处于列表项15%宽度的位置,垂直位置上处于中央。

最受欢迎

发表评论