css如何將新聞列表前面的點去掉

antzone發表於2017-03-15
CSS

製作新聞列表通常使用li元素，但是在預設情況li元素前面有黑色的原點，有些人可能感覺還不錯，但是一般有更多的人認為這是比較醜陋的效果，下面就介紹一下如何去掉前面預設的小點。

[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;
}
li{
  width:250px;
  height:25px;
  line-height:25px;
}
</style>
</head>
<body>
<ul class="mytest">
  <li>俄羅斯爆發隕石雨，導致上千人受傷</li>
  <li>朝鮮成功進行核試驗，半島無核程式終結</li>
  <li>中國進入春運高峰期</li>
</ul>
</body>
</html>

上面的程式碼實現我們的要求，只要在ul或者li上新增如下程式碼即可:

[CSS] 純文字檢視 複製程式碼
list-style:none

在實際應用中可能需要再新聞列表前面新增圖示以增加美觀度，參閱css設定li列表前小圖示程式碼例項一章節。

相關文章