CSS 是網頁樣式設計的重要組成部分,可以用它來實現新聞發布的網頁布局,使頁面更加美觀和易于閱讀。
/*這里是CSS代碼*/ .news-container { width: 800px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .news-item { width: 300px; height: 400px; margin-bottom: 30px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; } .news-img { height: 220px; width: 100%; } .news-title { font-size: 18px; font-weight: bold; margin: 15px; } .news-content { height: 120px; padding: 0 15px; font-size: 16px; line-height: 24px; } /*HTML 代碼*/標題1內容1標題2內容2標題3內容3
通過以上 CSS 和 HTML 代碼的搭配,我們可以實現一個簡單的新聞發布頁面。其中,news-container 為新聞容器,使用 flex 屬性實現自適應布局。每一個新聞使用 news-item 類表示,其中包含圖片、標題和內容三個部分。通過細節處理,以達到更好的閱讀體驗。