如何實現新聞標題和釋出時間之間用虛線間隔

admin發表於2017-02-10

在很多網站的新聞列表性質的內容都有這樣的效果，那就是新聞標題和新聞釋出時間之間都是用虛線連線的，還算是美觀吧，或者說這是一種格式習慣，下面就介紹一下如何實現此種效果。程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
li{ 
  list-style-type:none; 
  font-size:12px; 
  color:blue; 
  width:300px; 
  height:30px; 
  line-height:30px; 
} 
a{ 
  height:30px; 
  float:left; 
} 
span{ 
  color:red; 
  width:80px; 
  height:30px; 
  float:right; 
} 
</style> 
</head> 
<body> 
<div> 
  <ul> 
    <li><a href="#">螞蟻部落歡迎您</a><span>2012-12-13</span></li> 
    <li><a href="#">大家好，好久不見了</a><span>2012-12-13</span></li> 
    <li><a href="#">螞蟻部落</a><span>2012-12-13</span></li>        
  </ul>  
</div>  
</body> 
</html>

以上程式碼實現了一個新聞列表，但是並沒有所說的新聞標題和時間之間的虛線連結，程式碼改造如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
li{ 
  list-style-type:none; 
  font-size:12px; 
  color:blue; 
  width:300px; 
  height:30px; 
  line-height:30px; 
  background:url(mytest/demo/line.gif) repeat-x 0 50%; 
} 
a{ 
  height:30px; 
  float:left; 
  background-color:white; 
} 
span{ 
  color:red; 
  width:80px; 
  height:30px; 
  float:right; 
  background-color:white; 
} 
</style> 
</head> 
<body> 
<div> 
  <ul> 
    <li><a href="#">螞蟻部落歡迎您</a><span>2012-12-13</span></li> 
    <li><a href="#">大家好，好久不見了</a><span>2012-12-13</span></li> 
    <li><a href="#">螞蟻部落</a><span>2012-12-13</span></li>        
  </ul>  
</div>  
</body> 
</html>

以上程式碼實現了我們想要的功能。實現的原理就是為li元素設定一條背景，此背景就是虛線外觀，在橫向想設定重複，並且上下居中對齊，同時將a元素和span元素背景顏色設定為白色，這樣可以遮擋穿過時間和標題的那一段虛線。但是有時候感覺這樣並不美觀，可能需要在虛線兩端空出一段距離，程式碼改造如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
li{ 
  list-style-type:none; 
  font-size:12px; 
  color:blue; 
  width:300px; 
  height:30px; 
  line-height:30px; 
  background:url(mytest/demo/line.gif) repeat-x 0 50%; 
} 
a{ 
  height:30px; 
  float:left; 
  background-color:white; 
  padding-right:10px; 
} 
span{ 
  color:red; 
  width:80px; 
  height:30px; 
  float:right; 
  background-color:white; 
  padding-left:10px; 
} 
</style> 
</head> 
<body> 
<div> 
  <ul> 
    <li><a href="#">螞蟻部落歡迎您</a><span>2012-12-13</span></li> 
    <li><a href="#">大家好，好久不見了</a><span>2012-12-13</span></li> 
    <li><a href="#">螞蟻部落</a><span>2012-12-13</span></li>        
  </ul>  
</div>  
</body> 
</html>

在以上程式碼中，分辨為a元素和span元素新增左右邊距，這樣虛線兩段就出現了空白了。

相關文章