您今天不需要index.php。打开  Xampp Control，  主题文件夹，  Firefox，  Internet Explorer和  style.css。

在开始之前，请忘记我显示给您的昨天的屏幕截图。截屏时我打开了小部件插件，这解释了为什么我的侧边栏看上去与您的侧边栏有所不同。另外，在style.css文件中，将所有Sans-serif更改为  Sans-serif。我又犯了一个错误，我倾向于在S​​ans-serif中添加一个额外的“ F”。

第1步

通过在  style.css的body {}上方键入以下代码来消除大部分边距和填充  ：

正文，h1，h2，h3，h4，h5，h6，blockquote，p { 
margin：0; 
填充：0; 
}

• 注意它的  边距：0;  而不是  余量：0 0 0 0; 。当所有值都相同时，请使用一个数字。填充也一样。
• 保存文件。刷新Firefox和Internet Explorer。不用担心，现在您将在页边距和填充中添加您实际希望它们出现的位置，而不是默认情况下浏览器所需的位置。

顺便说一句，我是要告诉您将此内容放在该内容的下方或上方，但要知道它是可选的。您可以在任何地方键入/放置代码。我做事的方式就是组织方式。

第2步

设置H1标题的样式，在正文下键入以下内容  {}：

h1 { 
font-family：Georgia，Sans-serif; 
font-size：24px; 
填充：0 0 10px 0; 
}

• 字体家族：佐治亚州，Sans-seriff； 将H1头衔从Arial更改为Georgia。如果没有格鲁吉亚，则该网页将查找Sans-serif。
• font-size：24px;  是不言自明的。但是，请注意，当您 在  body {}中将字体大小设置为  12px时，  H1  和  H2  标签不遵循该规则。这是因为标题标签遵循其自己的规则。要控制它们，您需要专门为它们设置样式。
• 填充：0 0 10px 0;  表示10像素底部填充。用于在博客标题和描述之间添加空格。

保存，刷新，结果如下：

第三步

在#container {}下键入以下代码  ：（在每个代码块之后保存并刷新，以查看所做的更改。）

.post { 
padding：10px 0 10px 0; 
}

（您为每个DIV添加了10像素的顶部和底部填充，并带有一个名为post的类  。）

.post h2 { 
font-family：Georgia，Sans-serif; 
font-size：18px; 
}

（.post h2不是一般规则。它专门针对post DIV中的H2子标题。补充工具栏中的H2子标题不受影响。）

.entry { 
行高：18px; 
}

（增加了条目DIV中每行之间的间距。）

第四步

在a：hover {}下输入以下代码  ：

p { 
padding：10px 0 0 0; 
}

（每个段落标签的10像素顶部填充。）

第5步

在  .entry {}下输入：

p.postmetadata { 
border-top：1px solid #ccc; 
边距：10px 0 0 0; 
}

还记得您给名为postmetadata的类提供的pargraph标记  吗？特定段落标签的样式和DIV的样式几乎相同。您可以将边框，边距，填充和背景都应用到这两者。

对于  postmetadata  段落标记，您为其添加了灰色边框和10像素的上边距。

border-top  表示仅顶部边界。 border-left  表示仅左边界。单独的等  border，不带  -top，  -right，  -bottom或  -left  表示所有边界。例如，  border：1px solid #ccc;  表示所有四个边都有1px的灰色边框。

第6步

在p.postmetadata {}下  输入：

.navigation { 
padding：10px 0 0 0; 
font-size：14px; 
font-weight：粗体; 
行高：18px; 
}

对于 包装下一页  和  上一页  链接的  导航 DIV  ，您只需：

• 添加了10像素的顶部填充
• 将其字体大小更改为14px
• 将其字体粗细更改为粗体。
• 将其线高增加到18px。

今天的课程到此结束。