在越来越流行的
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 】即可解决!
分享到:
相关推荐
这是我们之前没有分享过的CSS3特效类型,它是一个可以自定义美化UL和OL列表的CSS3应用。当我们将鼠标滑过每一个列表项的时候都会出现一定的动画特效,效果非常不错。这种列表美化样式一共有3种,发光效果最酷了。
DIV CSS布局教程:应用ul、li实现表格形式DIV CSS布局教程:应用ul、li实现表格形式DIV CSS布局教程:应用ul、li实现表格形式
一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的...
纯CSS UL LI下拉式菜单特效,鼠标悬停于一级菜单时,会向下显示出二级子菜单,代码中没有涉及JavaScript代码,完全CSS代码来实现这款下拉菜单,符合WEB2.0标准哦。
怎么实现ul的横向排列和去掉li那个烦人的点,现在找到方法了,在此与大家分享下,感兴趣的朋友可以参考下,以备不时之需
使用html+css+js实现自定义弹出对话框/输入框,使用html+css+js实现自定义弹出对话框/输入框,使用html+css+js实现自定义弹出对话框/输入框
CSS3实现自定义Checkbox动画是一款CSS3自定义checkbox,而且这款checkbox还带有动画效果,当你选中checkbox的时候,会以动画的方式打上一个大大的勾。
四级菜单的使用很常见实现的方法也有很多,在本文为大家介绍下使用ul li ul li ul li ul li 来轻松实现下,感兴趣的朋友可以参考下
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...
用“ul li”及css制作韩国风格菜单
新手1分钟,新旺铺自定义CSS: 1.支持,自定义背景色,字体色,翻转色,激活色 2.支持背景图片自定义,支持字体自定义
DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等。下面给大家一个css ul li的例子供学习
正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果,我们需要借助CSS的其他方法来实现,比如说CSS伪元素,他可以帮助我们模拟出这些CSS无法...
CSS自定义图片热区示例代码,直接在HTML里,查看代码
css3-ul-li 设计列表,好看的列表样式,欢迎下载哦。亲测
纯CSS3实现聊天窗口是一款基于CSS3和HTML5的自定义聊天窗口,这里要声明的是它并不能完成聊天的功能,只是提供了聊天窗口的UI,包括,聊天语句的Tooltip样式,还有漂亮的自定义滚动条以及头像图片的处理。...
用ul、li来实现表格形式的布局,实现了类似于表格的效果,另类的感觉
因为很长,所以放在<li>的外边<ul>里 ②当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里 A 复制代码代码如下: <style> .test1 { width:100px; height:265px; ...
CSS结合JavaScript 实现Li隔行换色 代码