html ul 的类别,CSS 类表样式(ul)

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;}

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

作为列表项标记的图像

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

{

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

}

上面的例子在所有浏览器中显示并不相同，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: square url("sqpurple.gif");

}

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

ist-style-type

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

list-style-image

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

所有的CSS列表属性

属性

描述

list-style

简写属性。用于把所有用于列表的属性设置于一个声明中

list-style-image

将图象设置为列表项标志。

list-style-position

设置列表中列表项标志的位置。

list-style-type

设置列表项标志的类型。

html ul 的类别,CSS 类表样式(ul)相关推荐

angular学习笔记(九)-css类和样式2
在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error ...
html ul list style,CSS list-style列表样式属性用法介绍
list-style我们使用得最多的地方就是ul li中了,但很多朋友都搞不清楚•list-style-type,•list-style-position,•list-style-image具体的区别 ...
CSS 实现日历样式
一些解释附在代码注释中 HTML代码 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
html class和id,css教程之样式表的基本语法(二) class(类)和id的一个小实例
class(类)和id的一个小实例在上一节中我们了解了如何为特定的标签定义样式,例如我们利用 "h1{font-size: 12px;}"将页面内所有的标题1的字体大小改为了12 ...
jquery 判断控件css样式,jQuery获取并设置CSS类
jQuery获取并设置CSS类通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: • add ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
CSS 列表样式 (ul)
CSS 列表 CSS 列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在 HTML 中,有两种类型的 HTML列表: 无序列表 - 列表 ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
CSS三种样式表内部样式表、行内部样式表、外部引用
目录 CSS三种样式表 1.内部样式表 2.行内部样式表 3.外部引用: CSS三种样式表 1.内部样式表 2.行内样式表(内联式) 3.外部样式表(外链式) 1.内部样式表内嵌式:将CSS代码集中 ...
CSS叠层样式表（一）
CSS叠层样式表(一) 如何使用css 选择器如何使用css 如何在HTML页面中添加CSS: 使用style属性:在元素中直接指定CSS样式,可以使用style属性来定义,称为内联样式. < ...

html ul 的类别,CSS 类表样式(ul)

html ul 的类别,CSS 类表样式(ul)相关推荐

最新文章

热门文章