現在我們添加一些CSS樣式來使帖子看起來更好看一些:
- 打開style.css並使用article.post,爲每個帖子的底部加一個邊框。該
邊框將是灰色,實心和1px。 另外,讓我們使用padding-bottom:20px和margin-bottom:30px爲底部添加一些填充
article.post{
border-bottom: #ccc solid 1px;
padding-bottom: 20px;
margin-bottom: 30px;
}
- 我們不希望最後一篇帖子有下邊界。 我們將補充
article.post並使用last-child來定位最後一個,我們將border-bottom設置爲none:
article.post:last-child{
border-bottom:none;
}
- 對於元數據,我們使用article.post .meta爲其添加一些樣式並給它一個
淺灰色的背景。 我們還將添加一個padding,8px和12px。 我們來添加一個
顏色; 我們將使用深灰色:
article.post .meta{
background-color: darkgray;
padding: 8px 12px;
}
刷新頁面:
在接下來幾篇文章中,我們將學習如何使用custom-walker類設置導航欄。