设置补充工具栏样式后，本教程系列几乎结束。已经？是的，但是不用担心。我将继续进行案例研究（分解我创建主题的方式）。

同样，您今天不需要index.php文件。在记事本中打开Xampp，主题文件夹，Firefox，IE和style.css。

第1步

在  .sidebar {}下输入：

.sidebar ul { 
list-style-type：none; 
边距：0; 
填充：0 10px 0 10px; 
}

现在，您已经为补充工具栏设置了父级无序列表（UL）标记的样式，所有子UL或嵌套的UL将继承相同的样式。在这种情况下，它是  none， 零边距和  10像素的侧边距。

例如：

第二级（或嵌套）UL继承了第一级UL的样式。如果将边框应用于第一个UL，则第二个UL也将获得边框。

保存并刷新以查看列表项目（LI）不再出现​​项目符号。

注意如何在顶部和底部添加填充。

第2步

在  .sidebar ul {}下输入以下内容：

.sidebar ul li { 
padding：10px 0 10px 0; 
}

现在是填充：

为什么不首先将10像素填充添加到UL标签？ 您需要一种将一个LI与另一个LI分开的方法。在.sidebar ul li {}中添加填充之前，  搜索表单和日历之间没有空格，日历  和  页面之间也没有空格  。每个块之间的间距是.sidebar ul li {}的 10像素顶部和底部填充   的空间。如果UL标签的所有四个边都具有填充，而不是左右（0 10px 0 10px），则在填充UL之后尝试分离LI时，您将得到20px顶部填充或20px底部填充。明白我的意思吗？

如果不这样做，请继续为.sidebar ul {}添加顶部和底部填充  。

第三步

在  .sidebar ul li {}下输入以下内容：

.sidebar ul li h2 { 
font-family：Georgia，Sans-serif; 
font-size：14px; 
}

还记得在.post {}下设置子标题的样式没有关系，因为您仅在.post {}下定位了子标题吗？现在，您要在边栏中设置不受影响的子标题的样式。结果如下：

这就是我的  页面  链接列表的外观。您可能只有一个关于About的链接  。我在离线WordPress安装中添加了多个链接或页面级别，以测试并查看较低级别的链接的外观。请注意我圈出的底部不必要的多余填充。这是样式继承的完美示例。而不是10像素，而是20像素。

因为您在.sidebar ul li {}中添加了填充  ，所以较低级别的  LI继承了该填充。要修复它，请执行步骤4。

第四步

在.sidebar ul li h2 {}下输入以下内容：

.sidebar ul ul li { 
padding：0; 
}

连续  UL S IN  .sidebar UL UL李{}  表明您的目标水平较低  LI秒。同样，当所有值均为0时，则不需要px后缀。

结果如下：

行距太近，因此让行高等于24px。

添加  行高：24px； 到  .sidebar ul ul li {}。

顺便说一句，如果您在Internet Explorer的搜索表单下获得多余的空格。将表单添加到：

正文，h1，h2，h3，h4，h5，h6，地址，blockquote，dd，dl，hr，p { 
margin：0; 
填充：0; 
}

像这样：

正文，h1，h2，h3，h4，h5，h6，地址，blockquote，dd，dl，hr，p ，格式 { 
边距：0；
填充：0; 
}

步骤5（可选）

如果您希望日历日期延长并覆盖侧边栏的整个宽度，请执行此步骤。您的日历当前如下所示：

要设置日历的样式，请找出日历所在的标签以及该标签的名称或ID。为此，请转到“  查看”>“页面源”或“源”。您的侧边栏位于底部，因此请转到源代码的底部并查找日历。

现在，您知道日历位于  TABLE  标记中，且  wp-calendar  为  id。如何 在  style.css  文件中定位  wp-calendar表？

table＃wp-calendar {}  是答案。为什么？之前，您学习了如何在样式设置为ID  而不是  class的 DIV时使用井号  。在这种情况下，它是一个  表  而不是  DIV，其  ID 值为  wp-calendar。

＃wp-calendar {}可以使用，因为它是唯一的，并且WordPress不会将＃wp-calendar用于其他任何标记。但是，您应该尽可能地做到具体。如果您想更具体一点，请使用  .sidebar ul li table＃wp-calendar {}。更具体？很好，请使用  .sidebar ul li＃calendar table＃wp-calendar {}。这是因为包含Calendar子标题和Calendar TABLE的列表项（LI）具有一个 名为  calendar的  ID。

现在您知道该使用什么，如何使桌子伸展呢？使用  宽度：100％； 为表。

在.sidebar ul ul li {}下键入以下内容  ：

table＃wp-calendar { 
width：100％; 
}

保存并刷新。结果如下：

宽度：100％;  因为您希望日历表调整为补充工具栏的宽度，所以无论您也要更改补充工具栏多少像素。

它看起来不太好，但是您正在学习如何做，以备不时之需。此日历需要更多样式才能正确显示。 提示：再次查看源代码，找出表 中可以设置样式的标签  。