CSS List Style sample
CSS
CSS List Style 是一個比較常用的敘列資訊的方式,通常都是用來列舉POINT FORM或是作為目錄時使用。可以一般常用的<ul><li>style 來來回回都是那一兩個。今天就分享一些小編會用到的List Style CSS 樣版。
一些傳統的圖案:
.one { list-style-type: disc; }
.two { list-style-type: circle; }
.three { list-style-type: square; }
.four { list-style-type: none; }
可以自訂字符 例如 “*” :
ul li { list-style: none; }
ul li::before { content: ‘*’;}
可以自訂線性漸變顏色:
ul li:before { background: linear-gradient(45deg, #fff0f6, #5f5d58); }
可以把文字加底色:
ul li {
list-style-type: none;
counter-increment: item;
}
ul li:before {
content: counter(item);
margin-right: 5px;
font-size: 80%;
background-color: #f9dd94;
color: #7eb4e2;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
可以自訂自選圖案:
ul li { list-style: none; padding-left: 50px; position: relative; } ul li:before { content: ""; position: absolute; top: 12px; left: 5px; display: inline-block; height: 30px; width: 30px; background-size: contain; background-image: url("imgages/xxxx.png"); }