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