CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。
CSS 列表

从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单,甚至你的所有朋友都可以表示为一个列表或者是列表的列表。

由于列表如此多样,这使得列表相当重要,所以说,CSS 中列表样式不太丰富确实是一大憾事。
列表类型

要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型。

例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型,可以使用属性 list-style-type:

ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。
列表项图像

有时,常规的标志是不够的。你可能想对各标志使用一个图像,这可以利用 list-style-image 属性做到:

ul li {list-style-image : url(xxx.gif)}

只需要简单地使用一个 url() 值,就可以使用图像作为标志。
列表标志位置

CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
简写列表样式

为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style,就像这样:点击这里来了解一下

li {list-style : url(example.gif) square inside}

list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。

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列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点.小 ...

  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. Google v8 - Hello world

    OS:Window 7 1.下载v8 zip:https://github.com/v8/v8,解压zip,重命名v8-master文件夹为v8. 2.下载安装svn:http://tortoises ...

  2. Xcode报错:Unexpected '@' in program

    今天犯了个很弱的错误,就是当定义个一个@property时,编译器直接报错:Unexpected '@' in program 原因是把定义的属性写在.m文件中了,改到.h文件中就好了... 以后大家 ...

  3. 将excel数据导入内表的函数

    call function 'TEXT_CONVERT_XLS_TO_SAP'    exporting      i_tab_raw_data       = lt_raw "开始行    ...

  4. 【技术贴】解决Mysql启动服务报错1067 进程意外终止

    无法启动MYSQL服务错误1067 进程意外终止. 我使用2013-10-25_appserv-win32-2.6.0.exe安装的MySql,结果服务起不来. 于是细心机智的我发现,在F:\stud ...

  5. CENTOS6上禁用IPV6和DHCP

    centos 6禁用ipv6方法   首先,在终端输入 ip -6 addr show 和 lsmod | grep ipv6查询一下有无安装IPV6模块,或用netstat -nuptl查看是否有i ...

  6. Java 构造器 一道构造器调用子类重载方法的题目

    构造器中不能new本类对象,否则进入死循环. 构造器没有返回值,也没有void修饰. 使用关键字super可以调用父类的构造器,而且这一句必须放在第一句的位置,否则无法编译. 题目: 请写出以下程序的 ...

  7. 【POJ 2152】 Fire (树形DP)

    Fire   Description Country Z has N cities, which are numbered from 1 to N. Cities are connected by h ...

  8. Android用户界面 UI组件--TextView及其子类(一) TextView

    1.TextView android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none /web/email/phone/map/a ...

  9. Hibernate:1对1关系总结。

    QQ和QQ空间是1对1关系:配置如下 一.主键关联,双方共同维护表关系,以主键关联 public class QQ { private Long id; private QQZone zone; } ...

  10. WIN7下制作的ubunbu U盘安装无法使用

    想在电脑上装个ubuntu 12.04来个双系统.就在win7下用U盘制作了个安装程序.但是U盘启动安装后一直无法开始安装.网上找了大半天才有个结论解决了. 步骤如下: 去ubuntu官网下载安装的i ...