CSS技術現在又迎來了一次革新,新的樣式要素能夠更容易地實現日報、新聞、博客等站點所需的審美效果。無論是簡單的新聞列表還是復雜的時序數據應用,CSS都可以幫你完成。
.news { padding: 10px; border: 1px solid #ccc; margin-bottom: 20px; } .news-header { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .news-time { font-size: 12px; color: #999; margin-bottom: 5px; display: inline-block; width: 70px; text-align: right; } .news-content { font-size: 14px; line-height: 1.5; }
以上是用CSS編寫的新聞列表樣式,其中.news代表新聞的容器,包含news-header、news-time、news-content三個部分。news-header是標題,news-time是時間,news-content是正文內容。
請注意,在.news-time中,我們使用了display:inline-block;屬性來創建一個像標簽一樣的盒子。它有固定的寬度和text-align:right;的文字對齊。
如果你使用一個擁有很多新聞、日期的頁面,那么可以使用CSS Grid來更輕松地管理和布局。例如:
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }
以上是一個簡單的CSS Grid新聞布局,即將頁面分割為3列等寬度,間隔20px。為了最后一個新聞嚴謹的布局,你可以使用grid-auto-rows屬性設定高度。
使用CSS可輕松地實現新聞列表加時間,想必在新聞站點的開發中會使用到。