站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:CSS的样式目录
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
== Styling Your Lists == An important part of a list is the bullet - an eye catching dot, spot, or graphic that tells viewers "this is a list". The style of bullet or numbering for a list is determined by a '''list-style-type property''' in the style sheet. The default value is <tt>disc</tt>. Other basic values are <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>. Let's change the default value to something else, like a square. 列表的一个重要的部分是bullet-一个吸引眼球的点,点号或者图形,暗示读者"这是个列表"。Bullet的样式或者列表的编号方式取决于样式表中的'''list-style-type 属性'''。默认参数值是<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>, 和 <tt>none</tt>。让我们把默认的参数值更改为其它的内容,像一个正方形。 <pre>#sidebar li { list-style: square; }</pre> <pre>#sidebar li { list-style: square; }</pre> Instead of typing <tt>list-style-type</tt>, you see a shorthand form of <tt>list-style</tt>, and instead of using the default <tt>disc</tt>, the list now features small squares. 不用输入<tt>list-style-type</tt>,你会看到一种速记形式<tt>list-style</tt>,也不用使用默认的<tt>disc</tt>,列表现在有小的squares。 But not all lists need bullets. By their overall layout, you just ''know'' a list is a list. To eliminate the bullet, change the stylesheet to this: 但是并不是所有的列表需要bullets。从整体布局上看,你只会''知道''一个列表是一个列表。要删除bullet,你要将样式表改为: <pre>#sidebar li { list-style: none; }</pre> <pre>#sidebar li { list-style: none; }</pre> Now, anything tagged with <nowiki><li></nowiki>, within the DIV of the ID of <tt>#sidebar</tt>, would have no bullet. Experiment with different values to see the results you can achieve. 现在<tt>#工具条</tt>ID的DIV内部的任何带有<nowiki><li></nowiki>的标记都没有了bullet。试试不同的参数值,看看你能够得到什么样的结果。 '''HINT:''' In terms of accessibility, an ordered list is easier to navigate than an unordered list. '''提示:'''对于可访问性方面,一个有序的列表比一个无序的列表更容易访问。 === Using a Custom Image Instead of a Bullet === === 使用一个自定义图像而不是Bullet === Tired of boring bullets? Let's get rid of the boring with a few [[WordPress:Glossary#CSS|CSS]] techniques. In this case, use '''list-style-image''' to instruct the browser to use your bullet image instead of the old boring default bullets. 厌烦了bullets?使用一些[[WordPress:Glossary#CSS|CSS]]方法,去除这些恼人的bullet。在这个例子中,使用'''list-style-image'''指示浏览器使用bullet图像而不是旧的恼人的默认bullets。 Find some interesting bullet graphics and add the following code in your style sheet to add some jazzy bullets to your lists: 找一些有趣的bullet图形并且将下面的代码添加到你的样式表上,给你的列表添加一些有趣的bullets。 <pre>#sidebar ul { list-style-image: url(/wp-images/image.gif); }</pre> <pre>#sidebar ul { list-style-image: url(/wp-images/image.gif); }</pre> Note that you could also use an absolute link rather than a relative link. Simply change the <tt>url(/wp-images/image.gif )</tt> to <tt><nowiki>url(http://example.com/wp-images/image.gif)</nowiki></tt>. 注意你可以使用一个绝对的链接而不是一个相对的链接。只要将<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. 要在你的标题后面添加一个边框,像一个下划线,你只要在标题的下面而不是标题的上面的<tt>ul</tt>上,添加一个边框样式,就可以了。 <pre>#sidebar ul ul {...; border-top: solid 1px blue; ....}</pre> <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> And your end result would look like this: 你最后的结果可能看起来像: <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="padding: 10px"><span style="font-size:115%; font-style: italic; font-weight:bold; color: navy">类别 标题</span> <div style="width:30%; border: solid 1px blue; background:#CCFFFF; color: blue; padding: 5px">类别 一 类别 二 类别 三</div></div> Or really expand the possiblities to something like this: 或者增加可能性: <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> <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">类别 一 类别 二 类别 三</div></div> You can have a lot of fun with your list bullets and list layouts. If you are having trouble with your bullets and lists, check out the resources listed below and then visit the [http://wordpress.org/support/ WordPress support forums] to get more help. 你会发现列表bullets和列表布局中有许多乐趣。如果你处理bullets和列表的时候,遇到了麻烦,查看下面列出的资源,然后访问[http://wordpress.org/support/ WordPress s支持论坛]得到更多的帮助。
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)