css控制ul标签下li样式

html-css012

css控制ul标签下li样式,第1张

在ul标签下li的默认样式为一个实心圆（disc）   可忽略不写li样式的改变是用 list-style:属性值 来改变的我们给li设置css，去除默认样式（实心圆）将li的样式设置为空心圆将li的样式设置为实心正方形其他：  decimal   :  　CSS1　阿拉伯数字   lower-roman   :  　CSS1　小写罗马数字     upper-roman   :  　CSS1　大写罗马数字     lower-alpha   :  　CSS1　小写英文字母     upper-alpha   :  　CSS1　大写英文字母     armenian   :  　CSS2　传统的亚美尼亚数字     cjk-ideographic   :  　CSS2　浅白的表意数字     georgian   :  　CSS2　传统的乔治数字     lower-greek   :  　CSS2　基本的希腊小写字母    hebrew   :  　CSS2　传统的希伯莱数字     hiragana   :  　CSS2　日文平假名字符     hiragana-iroha   :  　CSS2　日文平假名序号     katakana   :  　CSS2　日文片假名字符     katakana-iroha   :  　CSS2　日文片假名序号     lower-latin   :  　CSS2　小写拉丁字母   upper-latin   : 　CSS2　大写拉丁字母 

只要在<ul>或者<ol>里定义CSS样式list-style-type或者设置<li>的list-style-type的就可以了。

举例：

<ul style="list-style-type:square">

<li>a</li>

<li>b</li>

<li>c</li>

</ul>

原来的点a

点b

点c

就变成 方块a

方块b

方块c

了。

list-style-type可以有以下取值：

取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

disc:点

circle: 圆圈

square: 正方形

decimal: 数字

decimal-leading-zero: 以一个0开头的数字e.g., 01, 02, 03, ..., 98, 99

lower-roman: 小写罗马文字i, ii, iii, iv, v, etc.

upper-roman: 大写罗马文字I, II, III, IV, V, etc.

lower-greek: 小写阿拉伯文字α, β, γ, ...

lower-latin: 小写拉丁文a, b, c, ... z

upper-latin: 大写拉丁文A, B, C, ... Z

armenian: 亚美尼亚数字

georgian: 乔治亚数字an, ban, gan, ..., he, tan, in, in-an, ...

lower-alpha: 小写拉丁文a, b, c, ... z

upper-alpha: 大写拉丁文A, B, C, ... Z

none: 无(取消所有的list样式)

inherit:继承

CSS对元素内的内容做字数限制，可以利用css的overflow: hidden属性解决了这个问题。

例子：li {width:80pxheight:30pxline-height:30pxoverflow:hidden}

说明：设置li的宽度和高度，超出部分就会被隐藏。

overflow:hidden这个属性的作用是隐藏溢出。