色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css新聞列表加時間

鄧天宇1年前6瀏覽0評論

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可輕松地實現新聞列表加時間,想必在新聞站點的開發中會使用到。