站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Styling Lists with CSS
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
== 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-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)