CSS如何给列表加边框为标题

介绍

列表在网页中经常被用作展示一些有序的信息，但是如果不加边框，会显得比较杂乱。那么如何使用CSS给列表加上边框，这就是本文要介绍的内容。

常规方法

最常规的方法就是使用CSS的border属性。但是如果直接对整个列表添加border，会让列表自带的圆点符号也被包含在内，效果并不好看。

所以我们需要对列表项进行样式设置：

```

li{

border: 1px solid black;

list-style: none;

}

```

这样边框就被加到了列表项上，并且自带的圆点符号也被删除了。

但是这样实际上并没有给列表项添加标题，只是加了边框而已。

给列表加标题

要给列表加标题，我们需要对列表进行父子元素选择器的操作，将一级标题和二级标题分别赋予不同的样式。

先来看一下待操作的列表代码：

```

列表项1

列表项2

```

接下来是CSS代码：

```

ul{

margin: 0;

padding: 0;

border: 1px solid black;

list-style: none;

}

ul li:first-child{

border-top: 1px solid black;

}

ul li:last-child{

border-bottom: 1px solid black;

}

ul li {

background-color: white;

border-right: 1px solid black;

border-left: 1px solid black;

padding: 10px;

}

ul li:first-child {

border-top: none;

}

ul li:last-child {

border-bottom: none;

}

ul h2 {

font-size: 1.2rem;

margin-top: 0.5rem;

margin-bottom: 0.25rem;

}

```

可以看到，我们将ul元素的边框加到了ul元素本身而不是列表项上。然后通过对第一个和最后一个列表项设置不同的样式来为它们添加上下边框。接着给每个列表项添加背景色和左右边框，同时对第一个和最后一个元素的上下边框进行删除操作。最后，我们依照需要设置了标题的样式。

将这些CSS代码应用到上面的列表后，就会得到一个如下图所示的列表。

结论

通过上面的操作，我们可以轻松地为列表添加标题，并且让列表变得更加整洁美观。希望对大家的学习有所帮助。