css中的列表样式

在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化。

在css中对列表样式主要是对列表项目前列表符号的设置,其语法如下:

list-style-type : disc | circle | square | decimal |           lower-roman | upper-roman | lower-alpha | upper-alpha |           none | armenian | cjk-ideographic | georgian | lower-greek |           hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha |           lower-latin | upper-latin

通过取不同的list-style-type属性值,我们可以得到不同的项目符号。

例:

ul { list-style-type:disc;} /*实心圆*/

ul { list-style-type:circle;} /*空心圆*/

ul { list-style-type:square;} /*实心方块*/

ul { list-style-type:none;} /*不显示项目符号*/

ol { list-style-type:decimal;} /*阿拉伯数字*/

ol { list-style-type:lower-roman;} /*小写罗马数字*/

ol { list-style-type:upper-alpha;} /*大写英文字母*/

如果对于css中所规定了的众多列表符号感到不满意,我们呀可以自定义列表的符号

list-style-image : none | url ( url )

使用这种方式,我们可以为项目列表设置任意的图片为列表符号。这里,我们所设的值为图片文件相对于网页文件的路径或绝对路径(来自网站的文件)。

在列表样式中最为需要注意的是,列表样式只能在列表标签中设置(ul,ol),而不能设置在列表的自标签中(li)。

时间: 2024-11-18 04:27:24

css中的列表样式的相关文章

CSS ul(列表样式)

CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点.小方框等) 有序列表 - 列表项的标记有数字或字母 使用CSS,可以列出进一步的样式,并可用图像作列表项标记. 二.不同的列表项标记 list-style-type属性指定列表项标记的类型是: ul.a {list-style-type: circle;} /*无序,空心

CSS如何设置列表样式属性,看这篇文章就够用了

原文:CSS如何设置列表样式属性,看这篇文章就够用了 列表样式属性# 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列表,列表的基础知识就简单说明下,本章内容主要说明的是如何给列表设置样式,若有不懂列表是什么的园友笔者建议去W3school官网进行学习. 列表样式常用的属性有4种如:list-style-type.list-style-position.lis

CSS中的字体样式和文本样式

CSS中的字体样式: 在手机端设置大小的时候,一般不使用px CSS字体颜色三种表达方式: 1.具体颜色名称         例:color:red; 2.数字 0~255,百分比:0%~100%        例:color:rgb(0%,100%,0%) 3.十六进制:#开头,六位,0~F         例:color:#00880a font-weight文字粗细: font-weight:normal |bold | bolder |lighter | 100~900 400相当于no

css中的段落样式及背景

一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent : length text-align : left | right | center | justify letter-spacing : normal | length text-overflow:clip | ellipsis word-wrap:normal | break-word 其中

css中的类样式和id样式有何区别?

W3C标准中对于ID与CLASS的设定是:ID具有唯一性,CLASS具有普遍性. 而目前大部分浏览器确实可以定义页面中多个元素的ID相同,并赋以相同的样式,因为目前的浏览器和CSS都对其睁一只眼闭一只眼. 就比如说法律规定你做好事,但你也可以去做坏事一样.这是一个标准,你可以遵守,也可以不遵守,但是不遵守的后果很严重. 在CSS中你可能不会碰到太大的问题.但是当用JavaScript调用ID时,问题就来了,比如下面的代码: <p id="html">第一段文字</p&

【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大家有一些帮助: a:link { color: #000000; text-decoration: none } a:visited { color: #000000; text-decoration: none } a:hover { color: #ff7f24; text-decoration

CSS 所有的列表样式类型

<html> <head> <style type="text/css"> ul.none {list-style-type: none} ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.decimal {list-style-type: decimal} ul.decimal-lead

周总结:html中所有列表样式的类型

<html><head><style type="text/css">ul.none {list-style-type: none}没有ul.disc {list-style-type: disc}小黑点实心ul.circle {list-style-type: circle}小圆圈ul.square {list-style-type: square}小方框ul.decimal {list-style-type: decimal}1.ul.decim

CSS中LI圆点样式li {list-style-type:符号名称}

css中用list-style-type指定列表(lists)前面符号,如下: li {list-style-type:符号名称} 符号名称可用的值为: disc : CSS1 实心圆 circle : CSS1 空心圆 square : CSS1 实心方块 decimal : CSS1 阿拉伯数字 lower-roman : CSS1 小写罗马数字 upper-roman : CSS1 大写罗马数字 lower-alpha : CSS1 小写英文字母 upper-alpha : CSS1 大写