CSS中的div可以用于設置列表,使其看起來更美觀、易讀。下面介紹一些常用的設置。
/* 無序列表 */ ul { list-style: none; /* 去掉默認樣式 */ padding: 0; /* 去掉內邊距 */ } ul li { margin-bottom: 10px; /* 間距 */ padding-left: 30px; /* 設置左邊距 */ position: relative; /* 設置相對定位 */ } ul li:before { content: ""; /* 添加空白元素 */ position: absolute; /* 絕對定位在左上角 */ left: 0; top: 0; width: 20px; Height: 20px; /* 設置圖標大小 */ background: #000; /* 設置圖標顏色 */ border-radius: 50%; /* 設置圖標為圓形 */ } /* 有序列表 */ ol { list-style: none; /* 去掉默認樣式 */ padding: 0; /* 去掉內邊距 */ counter-reset: index; /* 重置計數器 */ } ol li { margin-bottom: 10px; /* 間距 */ padding-left: 30px; /* 設置左邊距 */ position: relative; /* 設置相對定位 */ counter-increment: index; /* 計數器自增 */ } ol li:before { content: counter(index); /* 添加計數器 */ position: absolute; /* 絕對定位在左上角 */ left: 0; top: 0; width: 20px; Height: 20px; /* 設置圖標大小 */ background: #000; /* 設置圖標顏色 */ color: #fff; /* 設置字體顏色 */ text-align: center; /* 計數器居中 */ border-radius: 50%; /* 設置圖標為圓形 */ }
使用以上代碼可以將無序列表和有序列表的樣式進行美化,讓列表更加清晰易讀。
上一篇mysql的核心組件
下一篇css div輸入文字