这篇主要讲解如何样式日志,这篇不需要 index.php
,
打开Xampp Control,theme 文件夹,Firefox,Internet Explorer 和 style.css 文件。
在 style.css 文件中的 body{} 上面输入以下代码来处理大部分页边空白和填充:
body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}
在 body{} 之后输入以下代码:
h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}
保存,刷新,结果如下:
在 #container{}下面输入以下代码:(可以在输入每块代码之后,保存并刷新去查看其中的变化。)
.post{
padding: 10px 0 10px 0;
}
(给每个 class 名字为 post 的 DIV 增加 10 像素的顶部和底部空白。)
.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}
(.post h2 不是一般的 CSS 规则。他是特别样式化在 class 名为 post 的 DIV 中的 H2 子标题。在侧边栏中的 H2 子标题就不受影响。)
.entry{
line-height: 18px;
}
(设置 entry DIV 中行距。)
在 a:hover{} 下输入以下代码:
p{
padding: 10px 0 0 0;
}
(给每个段落标签增加 10 像素的顶部填充。)
在 .entry{} 下面输入:
p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}
对于 postmetadata 这个段落便签,给它增加一个灰色的边框和10像素顶部空白。
border-top 意思是仅仅顶部边框 border-left 意思是仅仅左边边框,等等。 如果只是单独的 border,没有 -top,-right,-bottom 或者 -left 则意味着所有的边框。如border: 1px solid #ccc; 意思为所有的四边都有1像素的灰色的边框。
在 p.postmetadata{} 下输入:
.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}
对于 Next page 和 Previous page 链接外面的的 navigation DIV 标签,我们