css样式中li也是块标签吗?

html-css011

css样式中li也是块标签吗?,第1张

列表<ul><li></li></ul>,其中ul是块级元素,li也是块级元素,怎么知道是不是块级元素?

给他们分别加上不同的background,给他们设定一定的width和height你就可以清晰的知道了。

li标签的css样式名称是current其中要说明的就是楼上说的有点小问题,li是dw的默认标签所以不需要调用class,直接设置完css之后li即可生效。不过它控制的是所有的li.如果要控制单个要分开定义css样式,然后再用class或id调用.

只要在<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:继承

解决思路:

在HTML中没有相应的属性可以设置该效果,但在CSS中可以,相应的属性为list-style-type,要把圆点改成实心方块,只需要设置list-style-type的值为square。

具体步骤:

代码示例:

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

<li>list1

<li>list2

<li>list3

<li>list4

</ul>

技巧:想必大家都注意到,列表项离左边有很大一段距离,利用前面学过的知识,设置margin-left属性就行了:

<ul style="list-style-type:squaremargin-left:12px">

<li>list1

<li>list2

<li>list3

<li>list4

</ul>

另外,如果要把小黑点换成自定义图片,可以用list-style-image,用法:

list-style-image:url(demo.gif)

提示:对于列表项目,还有一个list-style-position属性可以定义,主要用于设置列表项前的符号根据列表文字的排列方式,对应的脚本特性为listStylePosition。可选值的说明如下:

outside 列表项目符号在文本以外,文本不根据标记对齐。

inside 列表项目符号在文本以内,文本根据标记对齐。

可选值说明

none不使用项目符号

disc实心圆,默认值

circle空心圆

square实心方块

decimal阿拉伯数字

lower-roman小写罗马数字

upper-roman大写罗马数字

lower-alpha小写英文字母

upper-alpha大写英文字母