CSS 帶有時間日期的新聞列表

admin發表於2020-03-12
CSS

新聞列表是常見的佈局，通常標題後面會跟著時間日期。

本文分享一段程式碼例項，它實現了類似功能。

程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
a {text-decoration: none;}
ul li {
  list-style:none;
  font-size:12px;
  line-height:25px;
  border-bottom:1px dotted green;
}
.ant_news {
  width:400px;
  margin: 100px auto;
}
.ant_news li {
  height: 24px;
  line-height: 24px;
  overflow: hidden;
}
.ant_news li span {
  float: right;
  padding-left: 10px;
}
</style>
</head>
<body>
<div class="ant_news">
  <ul>
    <li><span>2020-3-15</span><a href="#">螞蟻部落致力於前端知識分享。</a></li>
    <li><span>2020-3-15</span><a href="#">沒有人一開始就是高手，必須通過努力奮鬥。</a></li>
    <li><span>2020-3-15</span><a href="#">本站的網址是www.softwhy.com。</a></li>
    <li><span>2020-3-15</span><a href="#">新聞的標題的後面會跟著時間日期。</a></li>
  </ul>
</div>
</body>
</html>

上述程式碼實現了我們的需求，比較簡單，直接套用即可。

相關文章