站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Styling Lists with CSS
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
__TOC__ 当显示列表内容时,[[WordPress:WordPress|WordPress]]使用标准的[[WordPress:Glossary#XHTML|XHTML]]元素: * <nowiki><ol></nowiki> 为一个有序的列表 (每条的顺序很重要,所以通常用数字表示) * <nowiki><ul></nowiki> 为一个无序的列表(通常情况下显示bullets) * <nowiki><li></nowiki> 为一个列表中一条,可以有序也可以无序。 默认情况下,WordPress中多数列表(和一些列表条目)通过<tt>id</tt>或者<tt>class</tt>属性来识别,使样式列表变的简单。通过很小的<tt>style.css</tt>文件的改动,你可以[[WordPress:Creating_Horizontal_Menus|水平]]显示出列表而不是垂直显示,设置[[WordPress:Dynamic_Menu_Highlighting|动态高亮菜单]],[[WordPress:#Styling_the_Bullet|改变 bullet符号]]或者给样式编号,移除全部bullet符号,或者这些符号的组合。 == WordPress 1.5 嵌套列表设计 == 通过WordPress v1.5中的[[WordPress:Using Themes|主题]]创新,不同的主题格式列表有不同的方式。使用者通常想要修改的最多的列表就是边栏目录列表。因为很多边栏有'''嵌套'''列表,让我们更深入的研究一下 从检查你使用的主题文件夹中找到的<tt>style.css</tt>文件开始,多数WordPress主题把边栏菜单部分用''sidebar''或者''menu''标示,或者是两者的组合。这样,寻找边栏[[WordPress:Templates|模板]]文件,尤其是<tt>sidebar.php</tt>。以下是<tt>sidebar.php</tt>文件的样本,你的版本可能有所不同,但是思想概念是一样的。 <pre><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 href="http://www.examplesite.com/wordpress/?page_id=2" title="About Us">About Us</a></li> <li class="page_item"> <a href="http://www.examplesite.com/wordpress/?page_id=4" title="Contact">Contact</a></li> <li class="page_item"> <a href="http://www.examplesite.com/wordpress/?page_id=8" 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 href="http://www.examplesite.com/wordpress/?cat=47" title="Stories of our life">Stories</a></li> <li><a href="http://www.examplesite.com/wordpress/?cat=48" title="Computer Tips">Computer Tips</a></li> <li><a href="http://www.examplesite.com/wordpress/?cat=6" title="WordPress Tips">WordPress Tips</a></li> <li><a href="http://www.examplesite.com/wordpress/?cat=28" title="Web Page Design Advice">Web Page Design</a></li> </ul></li> </ul> </div></pre> 当你使用嵌套列表并想要每个列表都有自己的样式的时候,你必须在样式表(<tt>style.css</tt>)中重建"嵌套"。 <pre>#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}</pre> ;ul :第一个样式(<tt>#sidebar ul</tt>)设置整体列表的外观. 通常包含整个列表的页边空白和填充样式,也可能包含字体库,颜色和别的内容。 ;li : <tt>#sidebar li</tt> 分配样式给现有的列表项目. 这里你可以设置是否包含bullet 符号,你也可以改变字体,字号,或者颜色,你还可以加入边线. ;ul li :<tt>#sidebar ul li</tt>确定第一个嵌套类表的样式. 每个第一级嵌套列表都在这里制定,但是如果它们有详细的[[WordPress:Glossary#CSS|CSS]]ID的话,你可以设计每个嵌套的子列表。上述例子中,<tt>#search</tt> 部分之后, 第一级嵌套列表是<tt>#pagenav</tt>. 如果你使用[[WordPress:Pages|页面]],这里是[[WordPress:Pages|页面]]的列表生成的地方。因为 [[WordPress:Pages|页面]]工作在[[WordPress:The Loop|WordPress循环]]之外, 并且通常高亮显示特殊的信息比如"About Us", "Contact", and "Site Map", 你可能想通过把关于[[WordPress:Pages|页面]]外观特殊信息输入<tt>#pagenav</tt>来设计[[WordPress:Pages|页面]],使它的样式与列表的其他部分不同. ;ul ul li : <tt>#sidebar ul ul li</tt>在<tt>#sidebar ul ul</tt>中提供了连接的样式 以帮助定义列表的外观。另外,如果你已经定义了<tt>#pagenav</tt>列表,将会和你剩下的的嵌套列表不同。 ;ul ul ul li : <tt>#sidebar ul ul ul li</tt>是二级子表的样式。如果你有一个带有子类的[[WordPress:Glossary#Category|分类]]列表,[[WordPress:Glossary#Category|分类]] 标题将是列表的第一级,分类是第二级,而任何子类将是第三级,或者是子表,如下面的例子。一些设计者喜欢在第三级使用一些较小的字体,不同的符号,或者不同的颜色,高亮显示,以区别它们上一层的项目: :*Category Title :**Category One :**Category Two :***Sub-Category One :***Sub-Category Two :**Category Three == 设计特定列表项目 == 你想让你的[[WordPress:Glossary#Category|分类列表]]看起来与文档列表不同吗?打开<tt>index.php</tt>或者<tt>sidebar.php</tt>,仔细的加入如下样式参数来更改列表项目: <div style="border:1px dashed blue; width:50%; margin: 20px; padding:20px"><tt><li '''id="categories"'''><h2>Categories</h2>.....</tt><br /><br /> <tt><li '''id="archives"'''><h2>Archives</h2>....</tt></div> 要想自定义分类和文档列表,把下列代码加入样式表来单独定义: <pre>#categories {attributes} #categories ul {attributes} #categories ul li {attributes} #archives {attributes} #archives ul {attributes} #archives ul li {attributes}</pre> 检查列表的其它部分,给它们一个样式参数名,把它们加入到你的样式表。当你能识别出列表的哪一部分控制列表的哪一方面时,就是改变列表外观的时候了。 === 设计个人条目=== 如果你想使用图片替换技巧设计你的列表,那么每个<tt>LI</tt>标签需要它自己的类别或者ID,你可以试试[http://wordpress.org/extend/plugins/classy-wp-list-pages/ Classy wp_list_pages]插件。 == 设计列表 == 列表的一个重要部分就是着重号 – 一个吸引访问者眼球的点或者图片,告诉他们"这是个列表"。一个列表中的符号或者数字的样式由样式表中的'''list-style-type property'''决定。默认的值是<tt>disc</tt>。其它基本值是<tt>circle</tt>, <tt>square</tt>, <tt>decimal</tt>, <tt>decimal-leading-zero</tt>, <tt>lower-roman</tt>, <tt>upper-roman</tt>, and <tt>none</tt>。我们把默认值改成别的东西如方块。 <pre>#sidebar li { list-style: square; }</pre> 不用输入<tt>list-style-type</tt>,你可以使用速记形式<tt>list-style</tt>,而且代替了默认的<tt>disc</tt>,列表现在使用的是小方块了。 但是不是所有的列表都需要这种着重号,通过他们的整体规划,你只需要''知道''列表是一个列表就够了。要消除着重号,只需要把样式表修改成这样: <pre>#sidebar li { list-style: none; }</pre> 现在,任何带有<nowiki><li></nowiki>的标签,<tt>#sidebar</tt>内的ID的DIV标签内,都不会在有着重号了。你可以尝试其他不同的值来看看你可能得到什么样的结果。 '''提示:'''根据易用性,整齐的列表要比不整齐的列表更容易浏览。 === 使用图片代替着重号=== 厌倦了乏味的着重号吗?让我们用几个[[WordPress:Glossary#CSS|CSS]]技巧来处理这乏味的东西。在这里,使用'''list-style-image'''来指示浏览器使用你的图片代替乏味的默认着重号。 找一些有趣的着重图片然后把下面的代码加入你的样式表,来加入一些好看的着重号到你的列表中: <pre>#sidebar ul { list-style-image: url(/wp-images/image.gif); }</pre> 注意你也可以使用绝对连接而不是相关连接。简单的把<tt>url(/wp-images/image.gif )</tt>改为<tt><nowiki>url(http://example.com/wp-images/image.gif)</nowiki></tt>就可以了 ===Adding a Border to Your List=== To add a border, like an underline, after your title, you can simply add a border style to the top of the <tt>ul</tt> under the title, rather than on the title itself. <pre>#sidebar ul ul {...; border-top: solid 1px blue; ....}</pre> ===给你的列表添加边框=== 想添加边框,如标题之后的下划线,你可以简单的加入一个边框样式到<tt>ul</tt>的顶部,标题下边,而不是在标题本身上添加。 <pre>#sidebar ul ul {...; border-top: solid 1px blue; ....}</pre> Go a step further and add a whole box around your list with the title sitting atop it: <pre>#sidebar ul ul {...; border: solid 1px blue; ....}</pre> 更深一步的添加一个带有上方标题的整个围绕列表的方框: <pre>#sidebar ul ul {...; border: solid 1px blue; ....}</pre> Add a colored background to your list along with its new border: <pre>#sidebar ul ul {...; border-top: solid 1px blue; background:#CCFFFF; ....}</pre> 给你的列表连同新的边框一起添加彩色背景: <pre>#sidebar ul ul {...; border-top: solid 1px blue; background:#CCFFFF; ....}</pre> 你的最终结果可能显示如下: <div style="padding: 10px"><span style="font-size:115%; font-style: italic; font-weight:bold; color: navy">Category Title</span> <div style="width:30%; border: solid 1px blue; background:#CCFFFF; color: blue; padding: 5px">Category One Category Two Category Three</div></div> 或者也可能扩展成这样: <div style="width: 30%; border-top: 20px solid #CC6600; border-left: 30px solid #CC6600"><span style="font-size:130%; font-style: italic; font-weight:bold; color: #660000">Category Title</span> <div style="border-top: solid 5px black; border-left: solid 10px black; background:#FFFF00; color: navy; padding: 5px; font-size: 105%; font-weight: bold">Category One Category Two Category Three</div></div> 你可以从列表设计和着重号上找到很多乐趣。如果你有困难,查看下面列出的资源然后访问[http://wordpress.org/support/ WordPress 支持论坛]获得帮助。 ==发现并解决嵌套列表问题== 如果你对你的嵌套列表有疑问,下面的内容可能提供了一些解决方法。同样查看[[WordPress:CSS Troubleshooting|CSS问题解决]]以获得更多有关样式的帮助。 ===不合适的标签结构=== 导致嵌套列表中的错误或者是non-validation的首要原因就是缺少合适的列表结构。这里是一个很简单的正确的嵌套列表设计。注意当一个新的列表形成(嵌套)的时候,最后一个列表项结束的地方<tt></li></tt>'''不是闭合的'''。它是开放的,直到新的嵌套列表完成,然后闭合。 <pre><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</pre> ===模板标签列表=== 列表中使用的不同的[[WordPress:Template Tags|模板标签]]有不同的使用方法并且依赖于列表标签。一些标签自动包含<tt>UL</tt> 和 <tt>LI</tt>,这样你所需要做的就是把标签放进列表,它就会做好一切工作。一些标签需要通过模板标签把<tt>UL</tt>放在合适的,然后它会生成它自己的标签。一些标签要求指明,如果没有在标签参数中列出的话,哪种列表标签形式是需要的或者完全不需要的, 如果你在使用模板标签时,如[[WordPress:Template Tags/wp_list_cats|wp_list_cats]] or [[WordPress:Template Tags/wp_list_pages|wp_list_pages]],对你的嵌套列表产生了什么问题,查阅它们的参数,看看它们如何使用列表标签,与你的使用方法做做比较。 ===Parent/Child Relationships=== Discussed in [[WordPress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship|The CSS Parent and Child Relationship]], lists are one of the big culprits. Styles in the child list items are influenced by its "parents". If the parent's list style features the color "red" and you want the children to be in "blue", then you need to specify the color in the children's list styles to be "blue" so they will override the parent's style ===父/子关系=== 在 [[WordPress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship| CSS 父和子的关系]]中讨论过的,列表是很多故障出现的原因之一。子列表项的样式受它的"父"列表的影响。如果父级的列表样式使用了"红色",而你想让子列表使用"兰色",那么你需要在子列表样式中进行设置,这样它们才会不受父列表的影响。 WordPress边栏中的嵌套列表通常包括连接。这样,当你设计你想要的列表时,连接的样式将不受列表样式影响。你可以通过给出一个特定的样式,来控制列表中的连接的样式,包括它们的属性: <pre>#sidebar a {attributes} #sidebar a:hover {attributes} #categories a {attributes} #categories a:hover {attributes} #archives a {attributes} #archives a:hover {attributes}</pre> == 资源 == * [[WordPress:Creating Horizontal Menus|创建水平菜单]] * [[WordPress:Dynamic Menu Highlighting|动态菜单高亮]] * [[WordPress:Customizing Your Sidebar|定义边栏]] * [[WordPress:Site Architecture 1.5|站点结构 1.5]] * [[WordPress:Stepping Into Template Tags|走进模板标签]] * [http://www.alistapart.com/articles/taminglists/ 驯服列表] * [http://css.maxdesign.com.au/listamatic/ Listamatic] * [http://www.yourhtmlsource.com/stylesheets/csstext.html CSS 文本格式] * [http://www.w3.org/TR/REC-CSS2/generate.html W3.org's CSS-2 – 生成的内容, 自动计数, 和列表] * [http://www.davesite.com/webstation/css/chap07.shtml 初学者层叠样式表交互指南:列表 ] * [http://www.maxdesign.com.au/presentation/definition/index.cfm Max Design的定义列表 - 误用或误解?] * [http://www.cameraontheroad.com/?p=160 CSS Unleashed - 列表, 菜单, 表格和内容以及更多的使用经验] * [http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html Simplebits的嵌套列表设计]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)