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 {}下定位了子标题吗?现在,您要在边栏中设置不受影响的子标题的样式。结果如下:

H2和不必要的填充

这就是我的  页面  链接列表的外观。您可能只有一个关于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后缀。

结果如下:

ul-ul-li

行距太近,因此让行高等于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(可选)

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

calendar1

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

日历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%;  因为您希望日历表调整为补充工具栏的宽度,所以无论您也要更改补充工具栏多少像素。

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

未经允许不得转载:创之梦博客 » WP主题制作-第13课:边栏样式

赞 (0)
分享到:更多 ()

欢迎各位吐槽评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址