html中有序列表的css样式,CSS 列表样式(ul)

CSS 列表

CSS 列表属性作用如下：设置不同的列表项标记为有序列表

设置不同的列表项标记为无序列表

设置列表项标记为图像

列表

在 HTML 中，有两种类型的 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-type 属性的常见属性值的描述：none：不使用项目符号

disc：实心圆

circle：空心圆

square：实心方块

decimal：阿拉伯数字

lower-alpha：小写英文字母

upper-alpha：大写英文字母

lower-roman：小写罗马数字

upper-roman：大写罗马数字

作为列表项标记的图像

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

实例

{

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

}

上面的例子在各大主流浏览器中的显示有所差异，IE 和 Opera 显示图像标记比火狐( Firefox )，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

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

html中有序列表的css样式,CSS 列表样式(ul)相关推荐

Css中设置列表项目符号属性,CSS如何设置列表样式属性，分享
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
CSS(七) css列表样式（ul）
CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像 1.列表在HTML中,有两种类型的html列表: 无序列表-列表项标记用特殊图形(如: ...
html好看css列表样式_CSS样式HTML列表样式
html好看css列表样式 We often see webpages with navigation menus, providing links to other pages in a dropd ...
CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...
php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式水果苹 ...
CSS修改默认列表元素样式(1.修改默认元素样式 2.伪元素选择器)
CSS修改默认列表元素样式 1. 修改默认元素样式 <!DOCTYPE html> <html lang="en"><head><meta ...
CSS -- CSS字体样式、文本样式、去掉列表的小圆点、背景、背景渐变
1. CSS字体样式.文本样式.去掉列表的小圆点.背景.背景渐变 1.1字体样式字体样式 font-family 字体(可以添加2种字体,一种针对中文,一种针对英文) font-size 字体大小( ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
html中初始化css样式,css样式初始化 normalize
总于找到一款良心的css初始化样式重置,哈哈在没上google之前,在百度搜一些腾讯,阿里等初始化样式,效果一般般,勉强用, 网上也有很多类似不过大部分都是去除浏览器所有样式而normalize. ...
Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
Web学习第四天--CSS简介.选择器,常用(文本.字体.列表.背景.超链接)样式一.CSS简介 (一).什么是CSS? (二).CSS能够干什么? (三).CSS语法结构 (四).CSS的使用方式 ...

html中有序列表的css样式,CSS 列表样式(ul)

html中有序列表的css样式,CSS 列表样式(ul)相关推荐

最新文章

热门文章