主题开发教程XXI:杂志样式和其他杂项(主题开发文档)

在这个教程中，我们将学习如何美化你的日志样式，无需使用index.php。首先，启动Xampp控制台，打开你的主题文件夹，并同时在Firefox和Internet Explorer中预览。主要工作将在style.CSS文件中进行。

1. **CSS重置**
在`style.css`的`body{}`规则之上，添加以下代码，消除默认的边距和填充：
“`css
body, h1, h2, h3, h4, h5, h6, blockquote, p {
margin: 0;
padding: 0;
}
“`
这一步简化了样式并确保一致的布局。

2. **设计H1标题**
在`body{}`之后，添加以下代码来改变H1标题的样式：
“`css
h1 {
font-family: Georgia, sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}
“`
这将标题字体更改为Georgia，并在标题和描述之间创建间距。

3. **日志样式**
在`#contAIner{}`下，为`.post`类定义样式，比如：
“`css
.post {
padding: 10px 0 10px 0;
}

.post h2 {
font-family: Georgia, sans-serif;
font-size: 18px;
}

.entry {
line-height: 18px;
}
“`
这将调整日志条目的布局和标题。

4. **日志段落填充**
在`a:hover{}`下方，为段落(`p`)添加顶部填充：
“`css
p {
padding: 10px 0 0;
}
“`

5. **日志杂项样式化**
在`.postmetaData{}`中，为注释添加边框和上边距：
“`css
p.postmetadata {
border-top: 1px solid #ccc;
margin: 10px 0 0;
}
“`

6. **导航条样式**
最后，在`.postmetadata{}`下，定义`navigation`的样式：
“`css
.navigation {
padding: 10px 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}
“`
这将改善导航链接的视觉效果。

每次修改代码后，记得保存并刷新浏览器查看效果。这样，你就能逐步定制你的日志样式了。