CSS設定li列表前小圖示

admin發表於2017-11-22
CSS

在實際的應用中，很多列表形式的結構前面都有小圖示，這些小圖示的形式有多種多樣。

比如表示順序的數字，還有關於新聞型別的各種圖示等，在一定程度上提高了美觀度。

程式碼例項如下:

[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:none;
  font-size:12px;
  width:250px;
  height:30px;
  line-height:30px;
  padding-left:20px;
  background:url(mytest/demo/antzonebg.jpg) no-repeat 0px 6px;
}
</style>  
</head>  
<body>  
<ul>
  <li>只有努力奮鬥才會有美好的未來。</li>
  <li>螞蟻部落歡迎您，分享互助是本站的宗旨。</li>
  <li>每一天都是新的，請好好珍惜。</li>
  <li>當下的時間才是切實的，請不要說下一刻。</li>
  <li>沒有人一開始就是高手。</li>
</ul>
</body>  
</html>

下面對需要注意的幾點做一下簡單介紹：

（1）.設定padding-left是為了給背景圖片留出空間。

（2）.background:url(mytest/demo/antzonebg.jpg) no-repeat 0px 6px，設定背景圖片，並且調整圖片的位置，預設狀態下不會和文字垂直居中。

相關文章