WordPress主题开发教程XXII:样式侧边栏

文章快速目录

第一步:样式化侧边栏的无序列表第二步:向LI添加填充第三步:样式化侧边栏下的副标题第四步:清除子下LI的填充第五步(可选):将日历宽度扩展到整个侧边栏本文主要解释如何样式化侧边栏中的所有元素。侧边栏样式化之后，这一系列教程也就差不多结束了。

打开XAMPP、主题文件夹、Firefox、IE和style.css文件。

步骤1:样式化侧边栏的无序列表

在下面。侧栏{}，输入:

。侧边栏ul { list -style -type:none；边距:0；填充:0 10px 0 10px}

父无序列表(UL)标签现在已经为侧边栏设计好了样式。所有子ul或嵌入ul将继承相同的样式。这里，它是一个无列表样式，零空白和10像素填充。

如下所示:

第二级(或嵌入式)UL继承了第一级UL的风格。如果您将边界应用到第一级UL，第二级UL也将有一个边界。

保存并刷新，您可以看到列表条目现在没有前面的点。

注意如何增加顶部和底部的填充。

第2步:添加填充到李

在下面。侧栏ul{}，输入:

。侧边栏ul Li { padding:10px 0 10px 0；}

这是现在的填充物:

在此步骤之前，搜索框和日历之间以及日历和页面之间没有空格。这些模块之间怎么加空间？我们需要填满顶部和底部。10像素侧栏ul li{}。为什么不首先给UL标签添加10个像素的填充呢？在这种情况下，将有20个像素的顶部填充和20个像素的底部填充。如果你仍然不明白，然后去添加顶部和底部填充。侧边栏ul{}就能看出问题。

第三步:设计侧边栏下的副标题。

在下面。侧栏ul li{}，输入:

。侧边栏ul li h2{font-family: Georgia，sans -serif；font -size:14px；}

请记住，我们已经在。post{}，但是这个不能用于侧边栏的副标题，因为我们只在。早点贴{}？现在我们是风格化侧边栏下的小标题，结果如下:

这是我的页面链接的样子。可能默认安装的WordPrss只有一个链接:关于。我在我的离线WordPress中添加了多个页面链接来测试最底层的链接看起来如何。我注意到我在底部圈出了不必要的填充，这是一个非常好的样式继承的例子。这里不是10像素，而是20。

因为你添加了填充。侧栏ul li{}，要解决这个问题，直接进入步骤4。

第四步:清除下的李填充

在下面。侧栏ul li h2{}，输入:

。侧栏ul ul Li { padding:0；}

连续的UL。侧栏ul li {}表示我们正在定义二级LIs。同样，当所有值都为0时，不需要后缀px。

结果如下:

行距太近，我们把行高改成了24px。

加line -高度:24px转到。侧栏ul li {}。

1另外，如果你在IE下，搜索框下有多余的空格，在下面添加表格:

body，h1，h2，h3，h4，h5，h6，address，blockquote，dd，dl，hr，p { margin:0；填充:0；}

更改为:

正文，h1，h2，h3，h4，h5，h6，地址，块引号，dd，dl，hr，p，form { margin:0；填充:0；}

步骤5(可选):将日历宽度扩展到整个侧边栏

如果您希望日历数据扩展并覆盖整个侧边栏的宽度，请执行此步骤。您当前的日历应该是这样的:

1要设置日历的样式，请找到日历内的标签以及便笺的名称或id。查看>页面或源代码，侧边栏在底部，所以在源代码底部找日历。

1现在我们知道日历在一个表标签中，id为wp-calendar。那么如何在style.css文件中锁定wp-日历表呢？

答案是表# wp-日历{}。为什么？在前面，您学习了使用#符号作为按id而不是类命名的DIV的样式。这里是table而不是DIV，后面是id的值，wp-calendar。

如果只有# wp-日历{}是可能的，因为它是唯一的，WordPress不会将# wp-日历用于其他标签。但是你应该尽可能具体一些。如果你想用。侧边栏ul li表# wp-日历{}更具体，想更具体？好，用。侧栏ul LI # Calendar table # WP-日历{}。因为列表条目(li)包含一个日历子标题和一个日历表，其id名为calendar。

现在你知道你可以使用什么，如何扩展表格，并增加宽度:100%的表格；。

在下面。侧栏ul li {}，输入:

表# wp-日历{宽度:100%；}

结果如下:

1宽度:100%；因为您希望日历表格适合侧边栏的宽度，无论您将侧边栏更改为多少像素。

这可能看起来不太好，但是我相信你已经知道如何改进它了。日历需要更多的样式才能看起来更好。提示:再次检查源代码，找出表格下的哪个选项卡可以设置样式。

这几篇文章你可能也喜欢：

• 双十一WPCOM主题特惠，买一送一，每消费1599元立减200元
• 如何清除WordPress缓存？（WordPress消耗内存）
• Rank Math 周年纪念促销 Pro 版本每月仅需 4.92 美元 代理版本低至 49 美元
• 5个主流WordPress多语言插件对比（wordpress多语言）
• WP Optimize 插件黑色星期五活动，所有商品 20% 折扣，低至 39.20 美元/年

本文由主机参考刊发，转载请注明：WordPress主题开发教程XXII:样式侧边栏 https://zhujicankao.com/87066.html