CSS样式列表

2018年11月2日02:15:38 发表评论

在呈现事物列表时,WordPress使用标准的XHTML元素:

<OL>一个有序列表(其中项目的顺序很重要,因此项目被编号)

<UL>一个无序列表(通常显示为带子弹的项目)

对于列表中的每个项目,排序或无序。

默认情况下,WordPress中的大多数列表(和一些列表项)由ID或类属性标识,使得样式列表变得容易。通过对..css文件进行相当简单的更改,您可以水平地而不是垂直地显示列表、特性动态菜单高亮显示、更改项目符号或编号样式、完全删除项目符号,或者这些内容的任何组合。

嵌套列表布局

不同的主题格式以不同的方式列出。在WordPress中,用户经常想要修改的最常见的列表是侧栏菜单列表。由于许多边栏都有嵌套列表,让我们更深入地看一下。

首先检查在您使用的主题文件夹中找到的样式。CSS文件。大多数WordPress主题用边栏、菜单或两者的组合来标记他们的侧栏菜单部分。因此,查找侧栏模板文件,通常称为SIDBAR.PHP。这是一个示例SIDBAR.PHP布局;您的版本可能不同,但概念将是相同的。

<div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li class="page_item">
       <a rel="external nofollow" target="_blank" href="https://www.lixiongzhao.com/wp-content/themes/begin/to.php?url=aHR0cDovL3d3dy5leGFtcGxlc2l0ZS5jb20vd29yZHByZXNzLz9wYWdlX2lkPTI="
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a rel="external nofollow" target="_blank" href="https://www.lixiongzhao.com/wp-content/themes/begin/to.php?url=aHR0cDovL3d3dy5leGFtcGxlc2l0ZS5jb20vd29yZHByZXNzLz9wYWdlX2lkPTQ="
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a rel="external nofollow" target="_blank" href="https://www.lixiongzhao.com/wp-content/themes/begin/to.php?url=aHR0cDovL3d3dy5leGFtcGxlc2l0ZS5jb20vd29yZHByZXNzLz9wYWdlX2lkPTg="
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a rel="external nofollow" target="_blank" href="https://www.lixiongzhao.com/wp-content/themes/begin/to.php?url=aHR0cDovL3d3dy5leGFtcGxlc2l0ZS5jb20vd29yZHByZXNzLz9jYXQ9NDc="
	 title="Stories of our life">Stories</a></li>
	<li><a rel="external nofollow" target="_blank" href="https://www.lixiongzhao.com/wp-content/themes/begin/to.php?url=aHR0cDovL3d3dy5leGFtcGxlc2l0ZS5jb20vd29yZHByZXNzLz9jYXQ9NDg="
	 title="Computer Tips">Computer Tips</a></li>
	<li><a rel="external nofollow" target="_blank" href="https://www.lixiongzhao.com/wp-content/themes/begin/to.php?url=aHR0cDovL3d3dy5leGFtcGxlc2l0ZS5jb20vd29yZHByZXNzLz9jYXQ9Ng=="
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a rel="external nofollow" target="_blank" href="https://www.lixiongzhao.com/wp-content/themes/begin/to.php?url=aHR0cDovL3d3dy5leGFtcGxlc2l0ZS5jb20vd29yZHByZXNzLz9jYXQ9Mjg="
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div>

当您使用嵌套列表时,并且希望每个列表具有单独的样式,您必须在样式表中重新创建“nest”(style.css).

#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}
ul 
第一style (#sidebar ul)设置整个列表的外观。它通常包含边距和填充样式,并且可以包含整个列表的字体族、颜色和其他细节。
li 
 #sidebar li侧边栏Li为实际的列表项分配样式。这里可以设置包含一个子弹的格式。您还可以更改字体、字体大小或颜色,甚至可以添加边框。
ul li 
#sidebar ul第一个嵌套列表的样式决定了。每个第一级嵌套列表将在这里进行定制,但是如果这些子列表包含在特定的CSS ID中,则可以对这些子列表进行不同的样式化。#search 第一个嵌套列表是如果使用页,则会生成页面列表。由于页面在WordPress Loop之外工作,并且经常突出显示诸如“关于我们”、“联系人”和“站点地图”之类的特定信息,所以您可能希望通过#pagenav.
ul ul li 
#sidebar ul ul li将样式应用到X侧边栏UL UL中的链接,以帮助定制该列表的外观。同样,如果您已经定制了“γ”PaGeNav列表,那么它将不同于您的嵌套列表项的其余部分。
ul ul ul li 
#sidebar ul ul ul li 是子列表的样式。如果您有一个包含子类别的类别列表,则类别标题将是列表的第一层,类别将是列表的第二层,并且任何子类别都将是第三层或子子列表,例如下面的示例。一些设计者喜欢让第三级列表具有更小的字体、不同的项目符号、甚至不同的颜色,以便从上面的列表项中突出显示它们:

分类标题

一类

两类

一子级

分两类

三类

风格特异的战略项目

你想让你的诡计,两类不同的面貌,从你的档案列表吗?然后打开“编辑或添加carefully sidebar.php和下面的两个风格适当的证明人:list item

<li id="categories"><h2>Categories</h2>.....

    <li id="archives"><h2>Archives</h2>....

要自定义类别和归档列表,请将下列内容添加到样式表中,以分别自定义:

#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}

通过列表中的其他部分,给他们一个样式引用名称,并将它们添加到样式表中。当您确定列表的哪一部分控制列表的哪一部分时,是开始更改列表外观的时候了。

个别项目造型

如果要使用图像替换技术对列表进行样式化,每个<li>标记将需要自己的类或ID。请尝试Classy wp_list_pages插件。

列出你的清单

列表中的一个重要部分是子弹——一个引人注目的点、点或图形,告诉观众“这是一个列表”。列表的弹出样式或编号是由list-style-type property在样式表中。默认值是磁盘。其他基本值是circlesquaredecimaldecimal-leading-zerolower-romanupper-roman, 和none让我们将默认值更改为其他的值。

#sidebar li {
   list-style: square;
}

代替打字list-style-type您可以看到列表样式的速写形式,而不是使用默认的光盘,列表现在具有小正方形。

但并不是所有的列表都需要子弹。通过他们的总体布局,你只知道列表是一个列表。若要删除弹头,请将样式表更改为:

#sidebar li {
   list-style: none;
}

现在,标记为<LI>的任何东西,都在没有标记的工具条的div中没有子弹。尝试用不同的值来查看你能达到的结果。

提示:在可访问性方面,有序列表比无序列表更易于浏览。

使用自定义图像而不是子弹

厌倦了无聊的子弹?让我们摆脱一些无聊的CSS技术。在这种情况下,使用列表样式图像来指示浏览器使用您的子弹图像,而不是旧的无聊默认子弹。

找到一些有趣的子弹图形,并在你的样式表中添加下面的代码,在你的列表中添加一些爵士乐的子弹:

#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }
注意,也可以使用绝对链接而不是相对链接。简单地将URL(/WP图像/ IIG.GIF)更改为URL(/wp-images/image.gif ) 更改为URLurl(http://example.com/wp-images/image.gif).

在列表中添加边框

要添加边框,比如下划线,可以在标题后面的<ul>顶部添加边框样式,而不是在标题本身上。

#sidebar ul ul {...; border-top: solid 1px blue; ....}
再往前走一步,在你的列表中加上一个完整的方框,标题就坐在上面:
#sidebar ul ul {...; border: solid 1px blue; ....}
在你的列表中添加一个彩色背景以及它的新边框:
#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}
你的结局会是这样的:
CSS样式列表或者真的扩大了这样的可能性:
CSS样式列表

可以有很多乐趣与你的名单子弹和列表布局。如果您的子弹和列表有问题,请查看下面列出的资源,然后访问WordPress支持论坛以获得更多的帮助。

嵌套列表的故障排除

如果在嵌套列表中遇到问题,下面的内容可能会提供解决方案。还检查CSS故障排除更多的造型帮助问题。

标签结构不当

嵌套列表中错误或不验证的第一个原因是缺少适当的列表结构。这里是一个非常简化和正确的嵌套列表布局。注意,当一个(新)嵌套列表开始时,当前列表项的<LI>标签还没有关闭。直到嵌套列表完成,然后关闭。

<ul>
   <li>Category One</li>
   <li>Category Two     <----Note: No Closing List Tag
      <ul>
          <li>Sub-Category One</li>
          <li>Sub-Category Two     <----Note: No Closing List Tag
              <ul>
                 <li>Sub-Sub-Category One</li>
                 <li>Sub-Sub-Category Two</li>     <----Note: Closing List Tag
              </ul></li>           <----Note: Nested List Closed
           <li>Sub-Category Three</li>
      </ul></li>       <----Note: Nested List Closed
    <li>Category Three</li>
</ul>      <----Note: End of entire list

模板标签列表

用于显示列表的不同模板标签具有不同的使用和依赖HTML列表标签的方式。一些模板标记自动包括<ul>和<li>标记,所以您只需要将标记本身包括在列表中,就可以完成所有工作。其他标签要求“UL>”放置在模板标签后面,并生成自己的<LI>标签。其他模板标记需要指定需要哪种类型的列表标记,或者如果不在标记的参数中列出,则根本不使用。

如果使用模板标记(如wp_list_cats或wp_list_pages)时嵌套列表有问题,请检查它们的参数,看看它们如何使用列表标记,并与您的使用进行比较。

亲子关系

在CSS父和子关系中讨论,列表是一个很大的罪魁祸首。子列表项中的样式受其“父母”的影响。如果父列表样式的特征是“红色”,并且希望子列表样式为“蓝色”,则需要将子列表样式中的颜色指定为“蓝色”,以便它们将覆盖父列表样式。

WordPress侧栏中的嵌套列表通常包含链接。因此,虽然您可以按照您想要的方式列出列表,但链接的样式将覆盖列表样式。您可以通过给列表中的链接提供它们自己的特定样式类(包括它们的悬停属性)来控制它们的工作方式:

#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}
weinxin
我的微信
这是我的微信扫一扫