CSS 列表
CSS列表属性作用如下:
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
列表
在HTML中,有两种类型的列表:
- 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
- 有序列表 - 列表项的标记有数字或字母
使用CSS,可以列出进一步的样式,并可用图像作列表项标记。
不同的列表项标记
list-style-type属性指定列表项标记的类型是::
实例
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
一些值是无序列表,以及有些是有序列表。
作为列表项标记的图像
要指定列表项标记的图像,使用列表样式图像属性:
上面的例子在所有浏览器中显示并不相同,IE和Opera显示图像标记比火狐,Chrome和Safari更高一点点。
如果你想在所有的浏览器放置同样的形象标志,就应使用浏览器兼容性解决方案,过程如下
浏览器兼容性解决方案
同样在所有的浏览器,下面的例子会显示的图像标记:
实例
{
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属性吧文本置于列表中
列表 -缩写属性
在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。
为列表使用缩写属性,列表样式属性设置如下:
如果使用缩写属性值的顺序是:
- list-style-type
- list-style-position (有关说明,请参见下面的CSS属性表)
- list-style-image
如果上述值丢失一个,其余仍在指定的顺序,就没关系。

更多实例
所有不同的列表项标记
这个例子演示了所有不同的CSS列表项标记。
所有的CSS列表属性
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图象设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |
CSS 列表的更多相关文章
- HTML 学习笔记 CSS(列表)
CSS列表属性允许你放置 改变列表项标志 或者将图像作为列表项标志. CSS列表 从某中意义上讲 不是描述性的文本的任何内容都可以认为是列表.人口普查.太阳系.家谱.参观菜单,甚至你的所有朋友都可以表 ...
- DIV+CSS列表式布局(同意图片的应用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS 列表 你知道吗
CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志.CSS 列表从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表.人口普查.太阳系.家谱.参观菜单,甚至你的所有朋友都可以表 ...
- [CSS]列表属性(List)
CSS 列表属性(List) 属性 描述 CSS list-style 在一个声明中设置所有的列表属性. 1 list-style-image 将图象设置为列表项标记. 1 list-style- ...
- 复习-css列表和表格相关属性
css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...
- CSS 列表实例
CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志.CSS 列表属性(list)属性 描述list-style 简写属性.用于把所有用于列表的属性设置于一个声明中.list-styl ...
- CSS 列表样式详解
CSS列表用于前端的列表排列. CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列 ...
- CSS:CSS 列表
ylbtech-CSS:CSS 列表 1.返回顶部 1. CSS 列表 CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML ...
- css列表属性和样式控制
如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它. 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表.设置列表标记有 ...
随机推荐
- HDU-1598 find the most comfortable road
find the most comfortable road Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- margin-top 父div下落
解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...
- Axure原型用pmdaniu在线托管尝试
这次把原型中语音模块的坑填了一部分,实现了拖拽按钮控制的界面效果 http://www.pmdaniu.com/prototype/view?id=WXpVNwNhUmYMPFN3AkA
- [LeetCode] Decode Ways 解题思路
A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...
- mysql数据库引擎问题汇总
可以使用mysql> show engines;查看mysql支持何种引擎, 其中default表明该引擎为默认引擎. 在windows下面的mysql引擎默认为InnoDB,linux下的为 ...
- POJ 2955 括号匹配,区间DP
题意:给你一些括号,问匹配规则成立的括号的个数. 思路:这题lrj的黑书上有,不过他求的是添加最少的括号数,是的这些括号的匹配全部成立. 我想了下,其实这两个问题是一样的,我们可以先求出括号要匹配的最 ...
- 实用的Android代码片段集合(精)
1.精确获取屏幕尺寸(例如:3.5.4.0.5.0寸屏幕) public static double getScreenPhysicalSize(Activity ctx) { DisplayMetr ...
- Jupyter Notebook PDF输出的中文支持
Jupyter Notebook是什么 Jupyter Notebook是ipython Notebook 的升级.Jupyter能够将实时代码,公式,可视化图表以Cell的方式组织在一起,形成一个对 ...
- [每日一题] 11gOCP 1z0-052 :2013-08-31 数据库的存储结构....................................................A8
转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/10784599 . 正确答案:A 将逻辑存储与物理存储分开是关系数据库范例的必要部分.关系数 ...
- oracle7
管理初始化参数 管理初始化参数(调优的一个重要知识点,凭什么可以对数据库进行调优呢?是因为它可以对数据库的一些参数进行修改修正) 初始化参数用于设置实例或是数据库的特征.oracle9i提供了200多 ...