WP主题制作-第13课：边栏样式-创之梦博客

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

同样，您今天不需要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％;
}

保存并刷新。结果如下：