CSS Lists 項目

設定值

list-style-type

設定有無icon，與icon樣式

/*空心圈*/
ul.a {
  list-style-type: circle; 
}
/*實心方*/
ul.b {
  list-style-type: square;
}
/*羅馬數字*/
ol.c {
  list-style-type: upper-roman;
}
/*英文順序*/
ol.d {
  list-style-type: lower-alpha;
}

list-style-image

設定項目圖片icon

ul {
  list-style-image: url('sqpurple.gif');
}

list-style-position

設定縮排

/*整體縮排對齊*/
ul.a {
  list-style-position: outside;
}
/*第一行縮排*/
ul.b {
  list-style-position: inside;
}

☞ 範例

/* css範例-ul */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul {
  list-style: square inside url("sqpurple.gif");
}

/* css範例-list底色 */
ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}