CSS 設定列表樣式

admin發表於2018-10-09
CSS

列表是最為常用的HTML元素之一。

通常用於比較有規律性的展示佈局，比如新聞列表或者產品列表等。

既然使用頻繁，那麼它的美觀性就比較重要，下面介紹一下如何利用CSS設定列表的外觀。

可以設定列表CSS屬性有很多，比如width與height，但是這些是通用屬性，不做介紹。

list-style則是專門用於設定列表樣式的屬性。

語法結構：

[CSS] 純文字檢視 複製程式碼
list-style：[ list-style-type ] || [ list-style-position ] || [ list-style-image ]

list-style是一個複合屬性，也就是它的屬性值由多個獨立值構成，分別設定列表的不同特點。

屬性值解析如下：

（1）.list-style-type：設定列表起始位置標記型別，這些型別都是預定義好的。

（2）.list-style-image：設定列表起始位置標記為自定義圖片。

（3）.list-style-position：設定列表起始位置的標記的位置。

可能有些概念從字面比較難以理解，下面通過程式碼例項做一下演示。

一.list-style-type：

此屬性用於設定列表起始位置的標識，標識都是預定義好的。

主要有如下幾種型別：

（1）.空心圓。

（2）.實心圓。

（3）.實心方塊。

（4）.阿拉伯數字。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  height:15px;
  font-size:12px;
}
.circle{list-style-type:circle}
.disc{list-style-type:disc}
.square{list-style-type:square}
.decimal{list-style-type:decimal}
</style>
</head>
<body>
<ul class="circle">
  <li>螞蟻部落一</li>
  <li>螞蟻部落一</li>
  <li>螞蟻部落一</li>
</ul>
<ul class="disc">
  <li>螞蟻部落二</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落二</li>
</ul>
<ul class="square">
  <li>螞蟻部落三</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落三</li>
</ul>
<ul class="decimal">
  <li>螞蟻部落四</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/110142kxgm9wo9ljj0vjjc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼演示了列表最為常見的起始標記型別。

這些標記型別都是預定義好的。

二.list-style-image：

在實際應用中，預設的標記可能難以滿足實際需求，那麼可以使用list-style-image自定義。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  list-style-image:url(mytest/div+css/index.jpg)
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/110214iuoirlripoyo8ubf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼通過list-style-image屬性設定列表的起始位置的標識。

此屬性的優先順序要高於list-style-type屬性。

三.list-style-position：

此屬性用於設定列表標記的位置，具有兩個屬性值：

（1）.outside：標記放置於每一項列表的外側，預設值。

（2）.inside：標記放置於每一項列表的內側。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  height:15px;
  font-size:12px;
}
.inside{
  list-style:inside;
}
.outside{
  list-style:outside;
}
</style>
</head>
<body>
<ul class="inside">
  <li>螞蟻部落一</li>
  <li>螞蟻部落一</li>
  <li>螞蟻部落一</li>
</ul>
<ul class="outside">
  <li>螞蟻部落二</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落二</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/110246tevndfe9edmyst9f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的程式碼演示了list-style-position屬性的作用。

前面所有的程式碼是將複合屬性拆開演示的，下面演示一下一體使用：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant-1 li{
  list-style:circle inside;
}
.ant-2 li{
  list-style:circle outside;
}
</style>
</head>
<body>
<ul class="ant-1">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ul>
<ul class="ant-2">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ul>
</body>
</html>

最後總結：

（1）.list-style可以滿足普通需要，但是難以滿足要求比較高的需求，比如list-style-position難以精確定位。

（2）.所以很多時候，使用背景圖片方式設定列表起始位置標識更為精確有效。

相關文章