在使用CSS来美化网页的过程中，列表带点是一种比较常见的需求。不同于普通的无序列表，赋予了点的效果，让网页看起来更加有条理和美观。接下来我们就来介绍如何使用CSS来制作带点的列表。

/* 代码块一：无序列表带点样式 */
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
position: relative;
padding-left: 20px;
}
li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background-color: black;
border-radius: 50%;
}

上述代码块实现了普通的无序列表，通过CSS将其样式重置，隐藏原本的圆点符号并且给li标签添加了padding来容纳后面的点。接下来，在li标签的伪元素中，通过content属性添加一个“空”的内容来占位，并设置其宽高、背景颜色和边框半径等属性，最终实现了点的效果。但是这个点的颜色、大小和形态等都是固定的。

/* 代码块二：带颜色和大小控制的无序列表带点样式 */
li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background-color: #ff6a00;
border-radius: 50%;
}

如果我们还想对点的大小和颜色进行自定义控制，只需在代码块一的基础上，修改相应的属性值即可。比如，将点的大小设置为8px，并将颜色修改为橙色。通过这种方式，就可以根据具体需求，灵活地自定义列表带点的样式。