CSS设置列表的符号

通常的列表采用<ul>或者<ol>标记，然后，结合<li>标记罗列各个项目。

项目表单实例，代码如下：

<span style="font-size:24px;"><html><head><title>项目列表</title><style><!--body{background-color:#c1daff;}ul{font-size:0.9em;color:#00458c;}--></style></head>   <body><p>水上运动</p><ul><li>freestyle自由泳</li><li>backstroke仰泳</li><li>breaststroke蛙泳</li><li>butterfly蝶泳</li><li>individualmedley 个人混合泳</li><li>freestylerelay 自由泳接力</li></ul></body>
</html></span>

CSS通过list-style-type属性设置列表的编号，无论是<ul>标记，还是<ol>标记都可以使用相同的属性值，二者的效果完全相同。

<span style="font-size:24px;">ul{font-size:0.9em;color:#00458c;list-style-type:decimal;}</span>

Decimal属性值，项目列表的编号安装十进制编号显示。

当给<ul>或者<ol>标记设置list-style-type属性时，中间所有的<li>标记都会采用该设置。

如果，对某一个<li>标记单独设置list-style-type属性，则仅仅作用于该条项目上。

<span style="font-size:24px;"><html><head><title>项目列表</title><style><!--body{background-color:#c1daff;}ul{font-size:0.9em;color:#00458c;list-style-type:decimal;}li.special{list-style-type:circle;}--></style></head>   <body><p>水上运动</p><ul><li>freestyle自由泳</li><li>backstroke仰泳</li><liclass="special">breaststroke 蛙泳</li><li>butterfly蝶泳</li><li>individualmedley 个人混合泳</li><li>freestylerelay 自由泳接力</li></ul></body>
</html></span>

可以看到蛙泳变成了空心圆显示，其他的还是编号。

此外，该属性的属性值还有很多，如下：

CSS设置列表的符号相关推荐

CSS 设置列表格式
在word中,列表也是使用频率非常高的元素.在CSS中,列表和列表项都是块级元素.也就是说,一个列表会形成一个块框,其中的每个列表项也会形成一个独立的块框.所以,盒模型中块框的所有属性,都适用于列表和 ...
html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式属性有很多可以自己去试:circle,disc,decimal ...
Css中设置列表项目符号属性,CSS如何设置列表样式属性，分享
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式水果苹 ...
CSS的基本概念及文字属性、段落属性、背景属性、列表案例符号的样式
一. CSS的基本概念 1.CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观.指颜色背景大小元素定位. Css选择器:css选择器,也称为选择符,用于选择需要 ...
利用CSS背景定位实现列表项目符号图像的精确定位(ul,li,自定义项目符号)
在越来越流行的 DIV+CSS建站模式中,对于首页或频道主页放置的大量栏目或信息列表,普遍采用的是 HTML中的列表类标签:ul li.ol li.dl dt dd. 对于这些标签除了可以直接使用CS ...
如何在html中加入项目列表,css如何添加列表项目符号
css如何添加列表项目符号一般默认情况下列表项目符号是有的.如果是定义了 ul{list-style:none;} ,那个项目符号就没有了,在这种情况下,可以用 list-style-type把那个 ...
CSS：列表样式（设置列表项的标志图案/位置）
通过CSS 列表属性可以放置.改变列表项标志,或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: 示例代码: <!DOCTYP ...
html怎么改无序图标,css怎么设置无序列表？css的列表样式总结
css怎么样设置无序列表的样式你知道吗?这里有无序列表的详细应用,去掉这些图标之类的,还介绍了去掉小圆点给添加的图片的介绍,大家可以自己试试看.现在就让我们一起来看看这篇文章吧首先我们先来看看无序列 ...

CSS设置列表的符号

CSS设置列表的符号相关推荐

最新文章

热门文章