利用CSS背景定位实现列表项目符号图像的精确定位(ul,li,自定义项目符号)
来源:互联网 发布:python工程师薪资 编辑:程序博客网 时间:2024/05/16 19:08
在越来越流行的DIV+CSS建站模式中,对于首页或频道主页放置的大量栏目或信息列表,普遍采用的是HTML中的列表类标签:ul li、ol li、dl dt dd。
对于这些标签除了可以直接使用CSS BOX MODEL来进行设定,同时还有专有的CSS列表样式属性 list-style可以对其默认存在的项目符号进行设定。
list-style的相关设定如下:
list-style-type :设定列表项目符号的类型。
以下是在CSS1.0版本中支持且目前通用的值:
disc —— 实心圆【无序列表默认值】
circle —— 空心圆
square —— 实心方块
decimal —— 阿拉伯数字【有序列表默认值】
lower-roman —— 小写罗马数字
upper-roman —— 大写罗马数字
lower-alpha —— 小写英文字母
upper-alpha —— 大写英文字母
none —— 不使用项目符号
list-style-image :设定列表项目符号的自定义图像。其值是一个引用图像的URL路径
url ( url ) —— 使用绝对或相对 url 地址指定图像
list-style-position:设定列表项目符号的定位和文本对齐方式。
outside —— 默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside —— 列表项目标记放置在文本以内,且环绕文本根据标记对齐
一般而言,以上的3种CSS列表属性足以去修饰和设定基本性的列表,但使用时往往会发现如果使用list-style-image属性去设定自定义的项目符号时没办法去精确定义符号与列表文字之间的空隙和距离。因为并没有相应的属性可以控制。那么我们该怎么办呢?
实际上,如果你浏览大多数在这方面表现的不错的网站时,你会发现那些排列整齐且效果精致的项目符号图片其实并不是使用list-style-image属性来定义的,而是换了一个思维,直接对每一行列表项【如li、dt、dd】元素进行背景图片定位来实现的!
让我们把这个点子讲述的再详细一些,其思维如下:
1、首先使用 list-style-type : none ; 将列表的默认项目符号消除掉;
2、对每一行显示信息的 li 增加一个background-image 的设定,将原本用于当作符号的图像转型成为其背景;
3、这时候你需要利用更多的CSS背景属性设置来定义这个“假”的项目符号,比如不让其重复出现【 background-repeat : no-repeat ; 】、设定精确的背景定位【 background-position : 左至右的距离 上至下的距离 ; 】
4、你会发现背景图已经乖乖的出现在你想要精确定位的地方了,令人烦恼的是信息文字正好处于其上方,和图片重叠一起.......
5、解决这个小问题的方法更为简单,只需要对你的列表标签增加一个CSS文本首行缩进属性【text-indent 】或利用BOX MODEL设定其左侧内边距的距离【padding-left 】即可解决!
对于这些标签除了可以直接使用CSS BOX MODEL来进行设定,同时还有专有的CSS列表样式属性 list-style可以对其默认存在的项目符号进行设定。
list-style的相关设定如下:
list-style-type :设定列表项目符号的类型。
以下是在CSS1.0版本中支持且目前通用的值:
disc —— 实心圆【无序列表默认值】
circle —— 空心圆
square —— 实心方块
decimal —— 阿拉伯数字【有序列表默认值】
lower-roman —— 小写罗马数字
upper-roman —— 大写罗马数字
lower-alpha —— 小写英文字母
upper-alpha —— 大写英文字母
none —— 不使用项目符号
list-style-image :设定列表项目符号的自定义图像。其值是一个引用图像的URL路径
url ( url ) —— 使用绝对或相对 url 地址指定图像
list-style-position:设定列表项目符号的定位和文本对齐方式。
outside —— 默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside —— 列表项目标记放置在文本以内,且环绕文本根据标记对齐
一般而言,以上的3种CSS列表属性足以去修饰和设定基本性的列表,但使用时往往会发现如果使用list-style-image属性去设定自定义的项目符号时没办法去精确定义符号与列表文字之间的空隙和距离。因为并没有相应的属性可以控制。那么我们该怎么办呢?
实际上,如果你浏览大多数在这方面表现的不错的网站时,你会发现那些排列整齐且效果精致的项目符号图片其实并不是使用list-style-image属性来定义的,而是换了一个思维,直接对每一行列表项【如li、dt、dd】元素进行背景图片定位来实现的!
让我们把这个点子讲述的再详细一些,其思维如下:
1、首先使用 list-style-type : none ; 将列表的默认项目符号消除掉;
2、对每一行显示信息的 li 增加一个background-image 的设定,将原本用于当作符号的图像转型成为其背景;
3、这时候你需要利用更多的CSS背景属性设置来定义这个“假”的项目符号,比如不让其重复出现【 background-repeat : no-repeat ; 】、设定精确的背景定位【 background-position : 左至右的距离 上至下的距离 ; 】
4、你会发现背景图已经乖乖的出现在你想要精确定位的地方了,令人烦恼的是信息文字正好处于其上方,和图片重叠一起.......
5、解决这个小问题的方法更为简单,只需要对你的列表标签增加一个CSS文本首行缩进属性【text-indent 】或利用BOX MODEL设定其左侧内边距的距离【padding-left 】即可解决!
- 利用CSS背景定位实现列表项目符号图像的精确定位(ul,li,自定义项目符号)
- 自定义列表li项目符号
- css的背景图像设置设置列表的项目符号
- css ul li 图标 图片位置定位 背景定位
- 无序列表<ul>与列表项目<li>
- Css <ul><li>列表的样式的控制</li></ul>
- Latex带序号的项目符号列表
- 实现边框透明,安卓手机头像圆形不识别%;利用样式实现”>“符号,以及tips符号的实现方法,以及粘性定位position:sticky用法
- CSS设置列表的符号
- 项目符号的问题
- CSS背景图片精确定位
- css中的ul li ul li ul li ul li 实现四级菜单
- BulletedList控件 以项目符号的格式来创建列表
- ul li css 的表格
- 项目符号列表Tab键不起作用
- 项目符号列表Tab键不起作用
- Word2010中插入自定义的图片作为项目符号
- 利用项目符号标签制作选单技巧
- [你必须知道的.NET] 第四回:后来居上:class和struct
- FastDB程序崩溃后的锁清理
- 设置舒服的电脑背景色
- C++中extern “C”含义深层探索
- symbian 窗体透明
- 利用CSS背景定位实现列表项目符号图像的精确定位(ul,li,自定义项目符号)
- linux c代码 统计函数执行时间
- Ubuntu 11.04下最流行的17款应用
- Today is Better than yesterday
- FastDB不同访问模式带来的影响
- PB datawindows 动态创建数据窗口
- Linux系统中的计时机制及相关时间函数
- [你必须知道的.NET] 第五回:深入浅出关键字---把new说透
- 常用的三大dll模块