站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:CSS的样式目录
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
== WordPress 1.5 嵌套列表布局 == With the innovation of [[WordPress:Using Themes|Themes]] in WordPress v1.5, different themes format lists in different ways. The most common lists users often want to modify in WordPress are the sidebar menu lists. Since many sidebars feature '''nested''' lists, let's look at those in more depth. 随着WordPress1.5版本中[[WordPress:Using Themes|主题]]的创新,不同的主题格式以不同的方式列出。列表用户一般最想要更改的是WordPress中的工具条菜单列表。因此许多工具条特点是'''嵌套'''列表,让我们更深入地看看这些。 Begin by examining the <tt>style.css</tt> file found within the Theme's folder you are using. Most WordPress Themes label their sidebar menu section with the words ''sidebar'', ''menu'', or a combination of both. So, look for the sidebar [[WordPress:Templates|Template]] file, typically called <tt>sidebar.php</tt>. This is a sample <tt>sidebar.php</tt> layout; your version may be different, but the concept will be the same. 通过检查你使用的主题文件夹中的<tt>style.css</tt>文件开始。大多数WordPress主题用''工具条'', ''菜单'',或者两者的结合体来标记WordPress工具条菜单部分。查找工具条[[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> When you are working with nested lists and you want an individual style for each list, you have to recreate the "nest" in the stylesheet (<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> <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> When you are working with nested lists and you want an individual style for each list, you have to recreate the "nest" in the stylesheet (<tt>style.css</tt>). <pre>#sidebar ul {属性} #sidebar li {属性} #sidebar ul li {属性} #sidebar ul ul li {属性} #sidebar ul ul ul li {属性} #pagenav {属性} #pagenav ul {属性} #pagenav ul li {属性}</pre> ;ul :The first style (<tt>#sidebar ul</tt>) sets the look for the overall list. It usually contains the margins and padding styles and may contain the font-family, color, and other details for the overall list. ;ul:第一种样式(<tt>#s工具条 ul</tt>)设置整个列表的外观。通常包括页边空白和padding样式而且可能包含字体集,颜色,以及其它的有关整个列表的详细信息。 ;li :The <tt>#sidebar li</tt> assigns a style to the actual list item. Here you can set the format to include a bullet or not. You can also change the font, font-size, or color, and you can even add borders. ;li : <tt>#工具条 li</tt>给真正的列表item指定了一个样式。你可以在这儿设定格式,包含还是不包含bullet。你也可以更改字体,字体大小,或者颜色,而且你甚至可以添加边框。 ;ul li :The <tt>#sidebar ul li</tt> determines the style of the first nested list. Each first level nested list will be customized here, but you can style each of these sub-lists differently if they are contained within a specific [[WordPress:Glossary#CSS|CSS]] ID. In the above example, after the <tt>#search</tt> section, the first nested list is <tt>#pagenav</tt>. If you use [[WordPress:Pages]] this is where the list of [[WordPress:Pages]] would be generated. Since [[WordPress:Pages]] work outside of [[WordPress:The Loop|The WordPress Loop]], and often highlight specific information like "About Us", "Contact", and "Site Map", you may want to design the [[WordPress:Pages]] style differently than the rest of your lists by putting the specific information about the look of the [[WordPress:Pages]] in the <tt>#pagenav</tt>. ;ul li : <tt>#工具条 ul li</tt>决定了第一个嵌套的列表的样式。每个一级嵌套列表都是在这里定义的,但是如果这些子列表包含有一个特别的[[WordPress:Glossary#CSS|CSS]] ID,你可以将这些子列表设计为不同的样式。在上述的例子中,在<tt>#搜索</tt>部分的后面,一级嵌套列表是<tt>#pagenav</tt>。如果你使用[[WordPress:Pages|网页]],会产生[[WordPress:Pages|网页]]的列表。因为[[WordPress:Pages|网页]]是在[[WordPress:The Loop|The WordPress Loop]]外运行的,而且通过会突出特别的信息,像"关于我们", "联系",和"站点地图",你可能想要将[[WordPress:Pages|网页]]样式与列表上的其它内容设计地不同,只要将关于[[WordPress:Pages|网页]]外观的特别的信息放到<tt>#pagenav</tt>中,就可以了。 ;ul ul li :The <tt>#sidebar ul ul li</tt> applies style to the links within the <tt>#sidebar ul ul</tt> to help customize the look of this list. Again, if you have customized the <tt>#pagenav</tt> list, it will be different from the rest of your nested list items. ;ul ul li :The <tt>#sidebar ul ul li</tt>将样式应用到<tt>#sidebar ul ul</tt>中的链接中,帮助自定义这个列表的外观。如果你已经自定义了<tt>#pagenav</tt>列表,就会与你的嵌套列表的其它items不同。 ;ul ul ul li :The <tt>#sidebar ul ul ul li</tt> is the style for the sub-sub-list. If you have a list of [[WordPress:Glossary#Category|categories]] with subcategories, the [[WordPress:Glossary#Category|category]] title will be the first level of the list, the categories would be the second level of the list, and any subcategories would be the third level, or sub-sub-list, such as the example below. Some designers like having the third level list feature a smaller font, a different bullet, or even a different color to highlight them from the list items above them: ;ul ul ul li : <tt>#sidebar ul ul ul li</tt>是二级列表的样式。如果你有一个拥有子类别的[[WordPress:Glossary#Category|类别]]列表,[[WordPress:Glossary#Category|类别]]标题会是列表的第一级,类别是列表的第二级,或者子子列表,例如下面的例子。一些设计者喜欢将第三级列表的字体设计地小一点,一个不同的bullet或者不同的颜色,以突出第三级列表上的内容: :*Category Title :**Category One :**Category Two :***Sub-Category One :***Sub-Category Two :**Category Three :*类别标题 :**类别一 :**类别二 :***子类别一 :***子类别二 :**类别三
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)