CSS 列表详解

嘿嘿，让我来为你好好讲讲CSS列表是怎么回事。现在你开网页的时候，看到的那些美美的分类、排版，实际上很多都利用了CSS列表的功效！

CSS列表，英文名字叫做CSS List，它能够让我们的网页排版更加清晰、有效。基础格式如下：

```

1. 项目1
2. 项目2
3. 项目3

```

看懂了吗？啊哈哈，其实也没那么难，就是一个开头叫ol，里面有很多个开头叫li的小东西，就像一个班级有好多学生一样，大象讲课法确实容易懂嘛！

好啦，记住两个哲学思想，万法皆可分，不求甚解。这里就给大家汇总一下CSS列表的各种功效咯！

## 1. 有序列表ol

看到上面的代码，其实list item，也就是li是并没有被明确的标号呢，这个时候如果我们想加上一个有序的编号呢？这时候，就要用到有序列表ol啦！

在ol标签中，你可以添加type属性：

- type="1" ：默认的数字编号，逐一往下排列。

- type="A" ：大写字母编号。

- type="a" ：小写字母编号。

- type="I" ：大写罗马数字编号。

- type="i" ：小写罗马数字编号。

```html

1. 编号1
2. 编号2
3. 编号3

1. 编号1
2. 编号2
3. 编号3

1. 编号1
2. 编号2
3. 编号3

1. 编号1
2. 编号2
3. 编号3

1. 编号1
2. 编号2
3. 编号3

```

哇塞，看到上面的代码，感觉这些编号好像很厉害好吧？

## 2. 无序列表ul

有序列表讲完了，那对应的，自然是要有一个无序列表啦！让我们来看看代码：

```html

• 列表1
• 列表2
• 列表3

```

咋一看跟有序列表的代码没啥变化，但是重点在于它呈现的方式咯。

无序列表主要特色是用符号、或其它图案来代替数字编号。这里有几个比较实用的实现方法：

### 2.1 圆点

```html

• 列表1
• 列表2
• 列表3

```

### 2.2 方块

```html

• 列表1
• 列表2
• 列表3

```

### 2.3 小三角形

```html

• 列表1
• 列表2
• 列表3

```

上面的例子里，首先使用了list-style-type:none来去除默认的符号，再用margin-left属性来控制文本距离左侧的偏移量。至于为什么会变成想要的小三角形？这其实是因为我们在li的样式中，添加了border-left、border-bottom属性后所表现出来的效果咯！

``` CSS

li {

border-left: 9px solid transparent;

border-bottom: 10px solid #007fff;

padding: 10px 0 10px 10px;

}

```

## 3. 自定义列表实现

除了以上常用的无序列表，我们还可以利用CSS的强大特性来自定义一些更加特别的列表分类。

还记得我们上面说到的，班级和学生的关系吗？在这里，我们可以用CSS来美化我们的“学生”们，让他们更加特别！

```html

• 学生1
• 学生2
• 学生3

```

我们先在ul中添加了一个class=.my-list的自定义类名，好让样式表去找他、给他进行美妙的改变。接下来我们在CSS中为它定制特殊的样式吧！

```CSS

.my-list {

display: block;

width: 100%;

background-color: #f5f5f5;

border: 1px dashed #ccc;

padding: 15px;

list-style-type:none;

}

.my-list li {

display: block;

width: 100%;

border-radius: 5px;

background-color: #d6eaf8;

padding: 10px;

margin-bottom: 10px;

}

```

啊哈哈哈哈，大家现在刷新一下页面，看看学生们变成了啥样？

定义CSS样式，要点在于对常见的元素进行属性重写。例如这里的li元素，就重写了它的backgroung-color、 border-radius，改变了它的显示效果。

看到这里，是不是已经完全get到CSS列表的魅力啦！哇，感觉又多了一把利器，去打败其他人啦！ www.0574web.net 宁波海美seo网络优化公司 是网页设计制作，网站优化，企业关键词排名，网络营销知识和开发爱好者的一站式目的地，提供丰富的信息、资源和工具来帮助用户创建令人惊叹的实用网站。 该平台致力于提供实用、相关和最新的内容，这使其成为初学者和经验丰富的专业人士的宝贵资源。