CSS列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

列表

在HTML中,有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

使用CSS,可以列出进一步的样式,并可用图像作列表项标记。


不同的列表项标记

list-style-type属性指定列表项标记的类型是::

实例

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

尝试一下 »

一些值是无序列表,以及有些是有序列表。


作为列表项标记的图像

要指定列表项标记的图像,使用列表样式图像属性:

实例

ul
{
list-style-image: url('sqpurple.gif');
}

尝试一下 »

上面的例子在所有浏览器中显示并不相同,IE和Opera显示图像标记比火狐,Chrome和Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志,就应使用浏览器兼容性解决方案,过程如下

浏览器兼容性解决方案

同样在所有的浏览器,下面的例子会显示的图像标记:

实例

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

尝试一下 »

例子解释:

  • ul:

    • 设置列表样式类型为没有删除列表项标记
    • 设置填充和边距0px(浏览器兼容性)
  • ul中所有li:
    • 设置图像的URL,并设置它只显示一次(无重复)
    • 您需要的定位图像位置(左0px和上下5px)
    • 用padding-left属性吧文本置于列表中

列表 -缩写属性

在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。

为列表使用缩写属性,列表样式属性设置如下:

实例

ul
{
list-style: square url("sqpurple.gif");
}

尝试一下 »

如果使用缩写属性值的顺序是:

  • list-style-type
  • list-style-position (有关说明,请参见下面的CSS属性表)
  • list-style-image

如果上述值丢失一个,其余仍在指定的顺序,就没关系。


更多实例

所有不同的列表项标记
这个例子演示了所有不同的CSS列表项标记。


所有的CSS列表属性

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

CSS 列表的更多相关文章

  1. HTML 学习笔记 CSS(列表)

    CSS列表属性允许你放置 改变列表项标志 或者将图像作为列表项标志. CSS列表 从某中意义上讲 不是描述性的文本的任何内容都可以认为是列表.人口普查.太阳系.家谱.参观菜单,甚至你的所有朋友都可以表 ...

  2. DIV+CSS列表式布局(同意图片的应用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS 列表 你知道吗

    CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志.CSS 列表从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表.人口普查.太阳系.家谱.参观菜单,甚至你的所有朋友都可以表 ...

  4. [CSS]列表属性(List)

      CSS 列表属性(List) 属性 描述 CSS list-style 在一个声明中设置所有的列表属性. 1 list-style-image 将图象设置为列表项标记. 1 list-style- ...

  5. 复习-css列表和表格相关属性

    css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...

  6. CSS 列表实例

    CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志.CSS 列表属性(list)属性 描述list-style 简写属性.用于把所有用于列表的属性设置于一个声明中.list-styl ...

  7. CSS 列表样式详解

    CSS列表用于前端的列表排列. CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列 ...

  8. CSS:CSS 列表

    ylbtech-CSS:CSS 列表 1.返回顶部 1. CSS 列表 CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML ...

  9. css列表属性和样式控制

    如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它. 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表.设置列表标记有 ...

随机推荐

  1. HDU-1598 find the most comfortable road

    find the most comfortable road Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  2. margin-top 父div下落

    解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...

  3. Axure原型用pmdaniu在线托管尝试

    这次把原型中语音模块的坑填了一部分,实现了拖拽按钮控制的界面效果 http://www.pmdaniu.com/prototype/view?id=WXpVNwNhUmYMPFN3AkA

  4. [LeetCode] Decode Ways 解题思路

    A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...

  5. mysql数据库引擎问题汇总

    可以使用mysql> show engines;查看mysql支持何种引擎, 其中default表明该引擎为默认引擎. 在windows下面的mysql引擎默认为InnoDB,linux下的为 ...

  6. POJ 2955 括号匹配,区间DP

    题意:给你一些括号,问匹配规则成立的括号的个数. 思路:这题lrj的黑书上有,不过他求的是添加最少的括号数,是的这些括号的匹配全部成立. 我想了下,其实这两个问题是一样的,我们可以先求出括号要匹配的最 ...

  7. 实用的Android代码片段集合(精)

    1.精确获取屏幕尺寸(例如:3.5.4.0.5.0寸屏幕) public static double getScreenPhysicalSize(Activity ctx) { DisplayMetr ...

  8. Jupyter Notebook PDF输出的中文支持

    Jupyter Notebook是什么 Jupyter Notebook是ipython Notebook 的升级.Jupyter能够将实时代码,公式,可视化图表以Cell的方式组织在一起,形成一个对 ...

  9. [每日一题] 11gOCP 1z0-052 :2013-08-31 数据库的存储结构....................................................A8

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/10784599 . 正确答案:A 将逻辑存储与物理存储分开是关系数据库范例的必要部分.关系数 ...

  10. oracle7

    管理初始化参数 管理初始化参数(调优的一个重要知识点,凭什么可以对数据库进行调优呢?是因为它可以对数据库的一些参数进行修改修正) 初始化参数用于设置实例或是数据库的特征.oracle9i提供了200多 ...