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. Using .NET 4's Lazy<T> 实现单实例

    Using .NET 4's Lazy<T> type Explanation of the following code: If you're using .NET 4 (or high ...

  2. Windows 8 系统完全上手指南 - 非常详尽的 Win8 系统入门学习手册与使用技巧专题教程!

    每次当有新版本的操作系统发布的时候,市面上总会冒出各种从入门到精通类的学习书籍,这次最新的 Windows 8 也不例外!不过,今天给大家送上免费的大礼——<Windows 8 完全上手指南&g ...

  3. 在windows下创建.gitignore文件

    1.使用另存为的方式   2.在win7下,文件名输入 ”.gitignore.“ http://hbiao68.iteye.com/blog/2055496 http://lyhopq.github ...

  4. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

  5. C语言面试题(嵌入式开发方向,附答案及点评)

    整理自C语言面试题(嵌入式开发方向,附答案及点评) 预处理器(Preprocessor) 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SEC ...

  6. JAVA模拟各种请求方式访问RESTFUL

    //打开restful链接 HttpURLConnection conn = (HttpURLConnection) url.openConnection(); // 提交模式 conn.setReq ...

  7. Best Practices for Using Alpha

    Alpha是图形界面开发中常用的特效,通常我们会使用以下代码来实现Alpha特效: view.setAlpha(0.5f); View.ALPHA.set(view, 0.5f); ObjectAni ...

  8. minicom-2.4安装配置

    minicom-2.4安装说明 1.#tar –zxvf minicom-2.4.tar.gz 解压开有连个文件,minicom-2[1].4.tar.gz  和minirc.dfl rpm包方式# ...

  9. linux 下 select 编程

    linux 下的 select 知识点 unp 的第六章已经描述的很清楚,我们这里简单的说下 select 的作用,并给出 select 的客户端实例.我们知道 select 是IO 多路复用的一个最 ...

  10. Jersey+Spring+Maven(转)

    spring和maven的搭建参考相关文档.本文只介绍与jersey有关配置. 一.jersey在maven中的依赖包 <!-- jersey --> <dependency> ...