CSS設定li列表前小圖示

admin發表於2017-11-22

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

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

程式碼例項如下:

[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,設定背景圖片,並且調整圖片的位置,預設狀態下不會和文字垂直居中。

相關文章