多语言展示
当前在线:1192今日阅读:155今日分享:35

HTML用CSS设计列表符号的属性

在网页中列表项使用的频率比较高,使用起来方便,网页中的条目显示起来方便。今天我就来设置项目显示属性的属性值。
工具/原料
1

HTML列表项相关知识

2

CSS裂变处理相关基础知识

方法/步骤
1

在一个项目列表中我们知道默认的项目符号为,用具体代码来看看实际效果: 列表项目符号

  • 语文
  • 数学
  • 英语
  • 政治
  我们可以看到默认的项目符号是实心的圆点,和设置list-style-type:disc效果是一样的。

2

那么我如果想要列表项没有项目符号该怎么做呢?这里我就用实例来说明问题,具体的代码如下: 列表项目符号

  • 语文
  • 数学
  • 英语
  • 政治
  可以看到我们的列表项目前面没有标识符号了。

4

我们设置标记为空心圆点和实心圆点,那么我们该怎么设置项目的符号为实心方块呢?接下来就来设计项目符号为实心的方块了,具体代码如下: 列表项目符号

  • 语文
  • 数学
  • 英语
  • 政治
  可以看到,下图列表项的标记为实心的方块了。

5

如果想要项目符号的标记是数字该怎么做呢?具体的代码如下: 列表项目符号

  • 语文
  • 数学
  • 英语
  • 政治
  可以看到,项目的符号变成了数字了。

6

除了数字还可以设置成小罗马数字和大写的罗马数字,具体代码如下: 列表项目符号

  • 语文
  • 数学
  • 英语
  • 政治
  如下图可以看到,小写的罗马数字的效果如下,大写的罗马数字设置方法一样,list-style-type的值改成upper-roman就可以了。

7

我们看到有的项目符号的标记为字母,这个该怎么设置呢?具体代码如下: 列表项目符号

  • 语文
  • 数学
  • 英语
  • 政治
  现在是不是项目符号的标记变成了小写字母了呢。

注意事项
1

列表项目的符号设置的值比较多

2

列表标记需要结合实际,怎么美观怎么来设计。

推荐信息