侧边

WordPress侧边栏可以在每个网页上填充相同的信息，也可以根据它所在的页面进行自定义。无论哪种方式，它都是提高您网站上其他内容的知名度、鼓励社交分享甚至通过广告创收的好方法。 本文将向您展示如何创建WordPress侧边栏，讨论放置它们的最佳位置，并解释它们应该执行哪些功能。我们还将分享10个最佳WordPress侧边栏插件。 什么是WordPress侧边栏？ 使用站点编辑器创建WordPress侧边栏 使用小工具创建WordPress侧边栏 使用WordPress定制器创建WordPress侧边栏 WordPress侧边栏 – 左与右 最佳WordPress侧边栏插件 侧边栏区域的实际用途 什么是WordPress中的侧边栏？ WordPress侧边栏是WordPress网站上主要内容旁边的一个区域，它显示额外信息或导航菜单。它通常是页面两侧的垂直列，但也可以在其他位置找到，例如页脚下方。 使用站点编辑器创建WordPress侧边栏 添加WordPress侧边栏的最简单方法是通过站点编辑器。但是，这种方法只能使用WordPress 5.9和基于区块的主题。 使用最新的侧边编辑器添加侧边栏有两种可能的方法 – 使用预制区块样板或从头开始创建它们。 使用区块样板 WordPress区块样板本质上是一个布局模板，由预定义的块组成，您可以对其进行编辑以适合您的内容。 要将区块样板添加到您的 WordPress 站点，请导航至Appearance -> Site Editor打开站点编辑器。   在站点编辑器上，单击屏幕左上角的加号( + ) 图标并选择Patterns选项卡。 在搜索框中键入侧边栏以查找包含它的模式。或者，单击浏览以查看所有可用模式。 单击要添加到页面的样板。 要移动图案，请从屏幕左上角打开列表视图。 找到代表图案的组区块并将其拖放到正确的位置。 完成样板设置后，您可以通过在侧边栏中添加或删除区块来开始自定义它。 从头开始创建侧边栏 使用块编辑器添加侧边栏的另一种方法是手动设置所有单独的区块。此方法涉及创建一组由查询循环和侧边栏的列组成的区块。 打开站点编辑器并转到要添加查询循环和侧边栏的页面区域。单击将鼠标悬停在该区域上时将出现的加号( + ) 图标，然后选择组以添加组区块。 一个空的组区块将出现在该位置。单击区块内的加号( + ) 图标并选择列。 您必须选择其中一种列变体。对于侧边栏，我们建议为左侧边栏选择30/70或为右侧边栏选择70/30。 之后，您将看到两个空列。 您可以添加查询循环区块和侧边栏项目，例如站点标题、页面列表或标签云。 使用小工具创建WordPress侧边栏 使用小工具创建WordPress侧边栏对于非技术用户来说是一个方便的选择，因为您不必处理代码。 WordPress小工具提供了一种向小工具区域添加内容和功能的易于使用的方法，这些区域是您网站上小工具的指定位置。 小工具区域可能因一个WordPress主题而异。它们可以放置在页眉区域、页脚区域或侧边栏中。 要使用Widgets菜单创建WordPress侧边栏，请打开WordPress仪表盘，然后导航到外观-> 小工具。 您将在左侧面板上看到可用的WordPress小工具列表，而右侧面板包含小工具区域区块。 在这个例子中，我们使用了免费的Astra主题，它有六个小工具区域。将所需的小工具从左侧拖放到右侧的主侧边栏块中，然后排列顺序。 除了使用拖放方法外，还可以通过单击并展开位置选项将小工具添加到小工具区域。 选择Main Sidebar，然后单击Add […]

无论免费主题还是付费的专业主题，大部分默认布局都会有一个侧边栏。但侧边栏并非适合每一个站点，有时候我们可能需要移除它，该怎么做？ 可以使用多种方法从整个网站或仅从特定内容中删除WordPress侧边栏，本文我们将会详细探索这几种方法： 为什么删除WordPress网站侧边栏 侧边栏在WordPress设计中极为常见。通常位于主页面内容的右侧或左侧，少数主题还可能显示在页面底部。 WordPress侧边栏通常包含“小工具”，它们是出现在网站每个页面上的小内容区域。站长常常在侧边栏挂放CTA功能，例如电子邮件订阅和搜索栏： 侧栏小工具示例 有些网站甚至使用侧边栏展示导航菜单。这种做法对于用户体验来说是非常友好的，因为用户可以快速查找网站的所有内容： 侧边栏设置导航菜单示例 另外，侧边栏也是站长设置广告的热门位置。侧边栏广告能够保证广告本身高度可见，同时又不影响网站内容的可读性： 侧边栏广告示例 既然侧边栏为站长带来如此多的便利，似乎没有理由要将边栏移除。尽管可以将多种转换内容合并到侧边栏小工具中，但这样做也有其缺点。 其一，主要内容区域之外的所有内容都会分散网站用户的注意力。例如，如果博客上有一个侧边栏，侧边栏上一些引人注目的小工具，会分散访客对博客文章的注意力。 其二，在某些情况下，侧边栏可能影响到网站的整体视觉效果。将侧边栏添加到内容丰富的网站（例如新闻聚合和在线杂志）会让用户觉得杂乱无章，不知所措。另一方面，将其删除可让网站设计保持整洁且易于理解。 最后，边栏在移动网站上并不是特别有用。对于大多数响应主题，在移动设备上会将侧边栏移到页面底部。随着移动互联网的日益庞大，依赖于侧边栏的设计可能不再是理想的选择。 如何移除WordPress侧边栏 大多数主题默认布局中使用侧边栏功能，如果您更喜欢没有侧边栏的WordPress网站，您可以根据自己情况和偏好使用以下四种方法。 1. 完全移除WordPress网站侧边栏 如果您想完全删除网站的侧边栏，则需要编辑主题。在开始删除侧边栏之前，强烈建议您备份站点，以防万一出问题。还有更好的一种办法即考虑使用子主题，因为对子主题进行操作不会对主题本身作任何改变。 确保完全之后，即可开始对主题文件进行修改。可以使用FTP客户端（例如FileZilla ）来执行，或者，从WordPress仪表板中编辑文件。 直接在WordPress仪表盘操作，可以通过“外观>主题编辑器”，在开始编辑主题文件前一般会提醒您： 主题编辑器警告 单击“我了解”按钮，并记住进行更改时要非常小心。然后，您需要找到每个主题的模板文件。这些是您的主题存储有关如何显示某些类型的内容（例如文章，页面和产品）的信息的位置。 每个主题中可能有几个模板，文件名称可能包括 index.php，single.php，archive.php等，您需要逐个编辑。打开文件后，查找类似于以下代码的一行代码： <?php get_sidebar (‘sidebar-name’); ?> 只需删除括号中的代码（在本例中为“sidebar-name”），即可从该模板中删除侧边栏。然后，重复此过程，直到您删除了整个主题中的代码。 完成此步骤后，主题可能会在侧边栏的原处保出很大的空白，整个网站的外观变得非常别扭，如下所示： 移除侧边栏后WordPress网站示例 这是因为即使侧边栏消失了，但为侧边栏预留的样式依然是在的。需要使用自定义CSS来更改内容区域的定义宽度，并且因主题而异。修改主题样式文件可能需要专业的前端技术人员，建议您找懂这块技术的朋友或者付点钱请个技术帮忙。 2. 删除WordPress静态页面侧边栏 在某些情况下，您可能希望在网站的某些地方使用边栏，而在某些地方又不使用。要从单个静态页面（如“主页”，“关于”或“博客”页面）中删除侧边栏，首先需要检查主题是否包含Full Width模板。 为此，编辑需要删除侧栏的页面。在“页面属性” 部分中，在“模板” 下拉菜单中查找Full Width选项： 检查可用模板 如果有可用的Full Width模板，只需选择它并更新页面即可删除侧边栏。如果您的主题不包含此功能，则可以创建自己的模板。 首先在文本编辑器中创建一个新文件，并将其命名为fullwidth.php 或类似名称。 然后访问主题的page.php 文件。复制此文件中的所有代码，并将其粘贴到新的fullwidth.php 文件中。在PHP开始标签之后，添加如下文件名： <?php /* * Template Name: Fullwidth Template  */ get_header(); ?> 之后，找到并删除以下代码： <? […]

在WordPress网站中是否有侧边栏是一个百万美元的争论。随着Core Web Vitals、AMP和其他速度的改进，侧边栏正在失去与早期不同的名声。默认的WordPress主题（例如二〇二一和二〇二二）甚至没有附带侧边栏选项。但是，侧边栏小工具是用作号召性用语的最强大方式。 此外，将最后一个小工具设置为悬浮固定可以使您的点击率飙升。在本文中，我们将解释如何在WordPress中添加悬浮固定侧边栏小工具。 完整的站点编辑和小工具 在尝试完全依赖侧边栏小工具之前，请注意WordPress开发的最新趋势。完整的站点编辑已经在这里，它完全改变了您使用侧边栏和小工具的方式。目前，您可以在“外观”菜单下看到小工具部分，以使用类似于Gutenberg区块编辑器界面的区块。 基于区块的小工具编辑器 如果您尝试了WordPress主题二〇二二，将没有小工具区域。您所能做的就是从没有侧边栏的模板部分创建页面。如果您仍然坚持使用旧的经典编辑器或任何其他页面构建器插件，那么您应该切换到Gutenberg并为这一变化做好准备。但是，许多商业主题仍然提供侧边栏布局作为选项之一，您可以继续使用这些主题的侧边栏小工具。 固定小工具如何帮助您？ 当用户继续向下滚动页面时，固定小工具将显示为固定区域。由于固定小工具在大部分阅读时间都是可见的，因此您可以通过以下方式使用它： 在您的网站上展示热门内容以增加流量。 展示广告，让你赚更多的钱。请记住，某些广告程序（例如 Google AdSense）不允许您使用粘性小工具。如果您是AdSense发布商，您可以在移动和桌面设备上使用锚定广告，这是自动广告设置的一部分。 显示会员优惠券或交易，以便用户可以通过您的链接购买，您可以从会员佣金中赚钱。 从您自己的商店或亚马逊销售一本受欢迎的电子书，并尝试将点击转化为潜在收入。 显示倒数计时器以推动用户采取行动，例如限时购买产品。 可能性是无穷无尽的，与普通小工具相比，您将清楚地看到使用固定小工具时的影响。 在WordPress中添加悬浮固定侧边栏小工具 有多种方法可以将悬浮固定小工具添加到WordPress侧边栏。如果您是超级极客，您可以尝试自己的CSS，并为侧边栏上的最后一个小工具设置固定位置。但是，让我们专注于普通用户正在寻找的现成解决方案。 1. WordPress的固定小工具和固定元素 这是WordPress博主最常用的选项，因为它非常容易实现。早些时候，它被称为Q2W3 Fixed Widget，随后被Advanced Ads接管并在插件存储库中积极维护。转到WordPress管理面板中的“插件 > 安装插件”部分，然后搜索“fixed widget”。您可以找到“Fixed Widgets and Sticky Elements for WordPress”插件并将其安装在您的网站上。 WordPress插件Fixed Widget 激活插件后，转到“外观 > Fixed Widget Options”部分。在这里，您可以通过提供Stop ID来调整插件的设置，例如边距以及要在哪里停止浮动。通常，您不需要在此处进行任何更改，并保持设置不变。如果您发现小工具在滚动时碰到屏幕的顶部或底部，则增加边距顶部/底部大小以提供足够的间隙。 Q2W3 Fixed Widget插件设置 现在，转到“外观 > 小工具”部分，您可以在每个小工具下方看到一个额外的复选框选项。如果您使用的是经典小工具区域，您可以为要显示为粘性浮动的项目启用“固定小工具”复选框。 Fixed Widget选项 保存小工具并检查您的实时站点在滚动内容时小工具是否具有粘性。例如，我们将搜索小工具添加为第一项并将其设置为固定小工具。当您在已发布的网站上滚动页面内容时，它会如下所示（选中侧边栏顶部的搜索框）。 悬浮固定小工具示例 我们建议对侧边栏中的最后一项使用悬浮固定小工具，这样它就不会通过避免元素重叠而影响用户体验。如果您使用的是Gutenberg小工具区块，则小工具区域中所有添加的区块都将具有如下所示的“Fixed Widget”选项。 […]

无论免费主题还是付费的专业主题，大部分默认布局都会有一个侧边栏。但侧边栏并非适合每一个站点，有时候我们可能需要移除它，该怎么做？ 可以使用多种方法从整个网站或仅从特定内容中删除WordPress侧边栏，本文我们将会详细探索这几种方法： 为什么删除WordPress网站侧边栏 侧边栏在WordPress设计中极为常见。通常位于主页面内容的右侧或左侧，少数主题还可能显示在页面底部。 WordPress侧边栏通常包含“小工具”，它们是出现在网站每个页面上的小内容区域。站长常常在侧边栏挂放CTA功能，例如电子邮件订阅和搜索栏： 侧栏小工具示例 有些网站甚至使用侧边栏展示导航菜单。这种做法对于用户体验来说是非常友好的，因为用户可以快速查找网站的所有内容： 侧边栏设置导航菜单示例 另外，侧边栏也是站长设置广告的热门位置。侧边栏广告能够保证广告本身高度可见，同时又不影响网站内容的可读性： 侧边栏广告示例 既然侧边栏为站长带来如此多的便利，似乎没有理由要将边栏移除。尽管可以将多种转换内容合并到侧边栏小工具中，但这样做也有其缺点。 其一，主要内容区域之外的所有内容都会分散网站用户的注意力。例如，如果博客上有一个侧边栏，侧边栏上一些引人注目的小工具，会分散访客对博客文章的注意力。 其二，在某些情况下，侧边栏可能影响到网站的整体视觉效果。将侧边栏添加到内容丰富的网站（例如新闻聚合和在线杂志）会让用户觉得杂乱无章，不知所措。另一方面，将其删除可让网站设计保持整洁且易于理解。 最后，边栏在移动网站上并不是特别有用。对于大多数响应主题，在移动设备上会将侧边栏移到页面底部。随着移动互联网的日益庞大，依赖于侧边栏的设计可能不再是理想的选择。 如何移除WordPress侧边栏 大多数主题默认布局中使用侧边栏功能，如果您更喜欢没有侧边栏的WordPress网站，您可以根据自己情况和偏好使用以下四种方法。 1. 完全移除WordPress网站侧边栏 如果您想完全删除网站的侧边栏，则需要编辑主题。在开始删除侧边栏之前，强烈建议您备份站点，以防万一出问题。还有更好的一种办法即考虑使用子主题，因为对子主题进行操作不会对主题本身作任何改变。 确保完全之后，即可开始对主题文件进行修改。可以使用FTP客户端（例如FileZilla ）来执行，或者，从WordPress仪表板中编辑文件。 直接在WordPress仪表盘操作，可以通过“外观>主题编辑器”，在开始编辑主题文件前一般会提醒您： 主题编辑器警告 单击“我了解”按钮，并记住进行更改时要非常小心。然后，您需要找到每个主题的模板文件。这些是您的主题存储有关如何显示某些类型的内容（例如文章，页面和产品）的信息的位置。 每个主题中可能有几个模板，文件名称可能包括 index.php，single.php，archive.php等，您需要逐个编辑。打开文件后，查找类似于以下代码的一行代码： <?php get_sidebar (‘sidebar-name’); ?> 只需删除括号中的代码（在本例中为“sidebar-name”），即可从该模板中删除侧边栏。然后，重复此过程，直到您删除了整个主题中的代码。 完成此步骤后，主题可能会在侧边栏的原处保出很大的空白，整个网站的外观变得非常别扭，如下所示： 移除侧边栏后WordPress网站示例 这是因为即使侧边栏消失了，但为侧边栏预留的样式依然是在的。需要使用自定义CSS来更改内容区域的定义宽度，并且因主题而异。修改主题样式文件可能需要专业的前端技术人员，建议您找懂这块技术的朋友或者付点钱请个技术帮忙。 2. 删除WordPress静态页面侧边栏 在某些情况下，您可能希望在网站的某些地方使用边栏，而在某些地方又不使用。要从单个静态页面（如“主页”，“关于”或“博客”页面）中删除侧边栏，首先需要检查主题是否包含Full Width模板。 为此，编辑需要删除侧栏的页面。在“页面属性” 部分中，在“模板” 下拉菜单中查找Full Width选项： 检查可用模板 如果有可用的Full Width模板，只需选择它并更新页面即可删除侧边栏。如果您的主题不包含此功能，则可以创建自己的模板。 首先在文本编辑器中创建一个新文件，并将其命名为fullwidth.php 或类似名称。 然后访问主题的page.php 文件。复制此文件中的所有代码，并将其粘贴到新的fullwidth.php 文件中。在PHP开始标签之后，添加如下文件名： <?php /* * Template Name: Fullwidth Template  */ get_header(); ?> 之后，找到并删除以下代码： <? […]

完善WordPress网站的布局可能需要做很多工作，但这对于用户体验（UX），参与度和转化率也是必不可少的。因此，当看似随机的错误导致站点显示错位时，例如侧边栏突然出现在内容下方而不是侧面时，这是件让站长和访客都烦心的事情。 一般WordPress侧边栏移位错位主要归结为超文本标记语言（HTML）或级联样式表（CSS）的问题。幸运的是，这些问题相对容易解决，一般可以快速让站点恢复原来的样子。 在本教程中，我们将介绍导致此错误的常见原因，及如何通过三个简单步骤解决该错误。 WordPress侧栏错位至页面下方的常见原因 WordPress的侧边栏应显示在页面主要部分的左侧或右侧（或有时同时显示在这两个区域）。它们通常包含小部件，注册表单，指向相关文章的链接或您想要包含在整个网站中的类似内容。 由于各种错误，侧边栏有时可能会显示在页面底部，而不是左侧或右侧。 主要原因一般为网站上的HTML或CSS问题。通常，这是您对网站代码（例如主题或插件文件）进行了直接更改的结果。 例如，页面上可能有一个额外的或未闭合<div>标签。该问题甚至可能归因于CSS中不正确的宽度和浮动设置。幸运的是，解决此错误很容易。 如何修复WordPress侧栏错位问题 现在我们知道造成这种混乱错误的潜在原因，如何修正？我们建议按顺序执行以下三个步骤，仅在前一个步骤不起作用时才继续执行下一个步骤。在开始之前，务必先备份您的站点 ，以防万一。 步骤1：撤消最近的更改 第一步也是最简单的。如果在更改站点后侧边栏发生了错位（无论是安装新插件，添加自定义代码还是其他操作），只需将其撤消即可。撤消操作既可以将布局恢复为原始，又可以帮助找出问题的原因。 因此，您可以先撤消更改并刷新网站，以查看侧边栏是否又回到了正确的位置。如果是这样，那么您可以尝试进行任何更改来寻找潜在的问题。例如，如果您安装了新插件，请检查替代方法。如果您更改或添加了网站代码，请检查是否有任何拼写错误或语法错误。 步骤2：修复未封闭的<div>标签或删除多余的<div>标签 通常，网站代码中未封闭或多余的<div>标记是WordPress侧边栏错误的原因。这些HTML标记 定义了您网站上各个部分的边界。如果放置不正确，浏览器将无法正确渲染网站。 这是一个格式正确的页面的示例： 以下是带有未闭合的<div>标签的同一页面： 您可以看到结束的<div>标记应该缺少正斜杠。结果，浏览器不知道它是要关闭的，并且应该位于元素外部的内容现在位于内部。 要解决此问题，请梳理您修改过的所有模板文件，并寻找缺失或多余的标签。通常，这些错误可以在WordPress主题的“模板部分”文件中找到。进入WordPress仪表盘，然后导航到“外观>主题编辑器”。   从顶部的下拉菜单中选择正确的主题，然后在侧栏中找到模板部分。 生成页面和文章的模板通常在内容部分下。从列表中找到所需的一个，进行检查，然后进行任何更正。然后，您可以单击更新文件以保存您的更改。 如果您知道编辑了哪个文件，则可以直接跳到那里。否则，您需要检查它们是否存在不一致之处。 WordPress教程：优化WordPress网站以提高速度 步骤3：更正CSS问题 导致此错误的另一个常见原因是网站的CSS样式。WordPress定制程序的“其他CSS”部分使您可以将自定义CSS添加到您的网站。   如果您使用了此功能或通过其他方式编辑了CSS，则可能是错误地格式化了代码。在移动侧栏的情况下，最常见的罪魁祸首是“宽度”属性。 您应该仔细检查Content和Sidebar元素的宽度总和不超过Wrap元素的宽度。如果是这样，较小的元素将被向下推以使其适合。 WordPress教程：如何在WordPress网站上实施缓存 简化侧边栏问题疑难解答的工具 您也可以自行解决问题，而无需使用代码。有几种在线在线工具可以验证您的代码并检查其错误。 您可以使用W3C标记验证服务 来检查HTML代码，使用W3C CSS验证服务检查CSS样式文件，Online Web Check则可以同时校验HTML和CSS。 如果您只想再看一遍代码，而不论其技术水平如何，这些在线服务也是很棒的。 其他WordPress资源 除了本教程！我们整理了不少文章，以帮助您解决各种WordPress问题： 如何修复WordPress网站403错误 如何修复WordPress中的HTTP服务不可用503错误 如何解决WordPress内存限制错误 如何修复WordPress死亡白屏(WSoD)故障问题 如何修复WordPress无法上传图片&文件错误 如果您正在寻找更多的WordPress技巧，请查看我们的WordPress教程。 小结 在玩WordPress的过程中可能遇到无数的错误，侧边栏错位只是其中的一个。幸运的是，如果问题只是侧边栏跑到页面下方，则修复相对简单！ 要解决出现在页面下方的侧边栏错误，您可以按照以下三个步骤操作： 撤消出现错误之前对网站所做的任何更改。 检查并修复代码中未闭合或多余的<div>标记。 验证网站的CSS是否正确。

侧边栏是从零开始创建 WordPress 主题系列教程的第六篇，这一篇我们主要讲解 WordPress 主题的侧边栏，让你很快掌握它的结构，并能编码和样式化它。 在开始侧边栏之前，这是现在 index.php 文件的样子。 第1步：创建 id 为 “sidebar” 的 DIV 首先让我们创建一个名字为 sidebar 的 DIV，这样可以把侧边栏中的所有东西都放入其中。在 container 的后面和 </body> 标签的前面输入以下代码： <div class=”sidebar”> </div> 第2步：给侧边栏的 DIV 添加无序列表 在新的 sidebar 的 DIV 标签中创建一个新的无序列表。 <ul> – 开始无序列表 </ul> – 结束无序列表 第3步：给这个无序列表添加原属 增加一个列表元素（LI）到无序列表（UL）的中间并把一个子标题添加到这个列表中。 <li><h2><?php _e(’Categories’); ?></h2> </li> 注意添加制表符到<li> 和 </li> 标签之前为了代码缩进。 <li> – 开始列表元素 <h2> – 开始子标题 […]

窗体化侧边栏是从零开始创建 WordPress 主题系列教程的第六篇的第五部分，一个支持 Widget 的侧边栏或者说是窗体化（widgetized）的侧边栏几乎是 WordPress 主题的标准。 首先，什么是窗体化（widgetizing）呢？简单的说，窗体化就是能够通过拖拉就能够整理侧边栏的模块。比如我们需要更改分类和存档的位置，只需要简单把分类和存档列表拖到它们的位置即可，根本不用去修改侧边栏的代码。 第1步：创建 functions.php 文件 打开记事本，然后把空白文件保存为 functions.php。把 functions.txt 文件中所有的内容拷贝到 functions.php 中。 回顾一下，现在在“tutorial”主题文件夹下应该有4个文件。 第2步：窗体化侧边栏 直接在侧边栏的第一个 <ul> 标签输入以下代码： <?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?> 直接在 </ul> 标签之前输入以下代码： <?php endif; ?> 保存 index.php 文件，然后我们到 WordPress 后台 => 外观 => Widget 就可以把 Widget 拖到侧边栏了。 原文：link 标签：WordPress 主题 WordPress […]

样式化侧边栏是从零开始创建 WordPress 主题系列教程的第十三篇，这篇主要讲解如何样式化侧边栏里面的所有元素，在对侧边栏样式化之后，这系列教程就将差不多结束了。 打开 XAMPP，主题文件夹，Firefox，IE 和 style.css 文件。 第1步：样式化侧边栏的无序列表 在 .sidebar{} 下输入： .sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; } 现在已经为侧边栏样式化父级无序列表（UL）标签。所有的子 UL 或者内嵌的 UL 将会击继承同样的样式。在这里，它是无列表样式，零空白和10像素的填充。 如下所示： 第二级的（或内嵌的） UL 继承了第一级 UL 的样式。如果你给了第一级 UL 应用了边框，第二级的 UL 同样也会有个边框。 保存并刷新就可以看到列表条目现在已经没有前面的圆点了。 注意下你是如何增加顶部和底部填充的。 第2步：给 LI 添加填充 在 .sidebar ul{} 下输入： .sidebar ul li{ padding: 10px 0 10px […]