站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Codex:Styles
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
==例子== Users of the Codex like to "see" what the end result will look like before they try it. When possible, here are some examples of "realistic" examples that may be used within the Codex. Codex的用户希望在尝试之前,"知道"最后结果是怎样的。可能的话,下面是Codex中可能使用的一些"现实的"例子。 ===Realistic Examples=== ===实例=== When a realistic example is required to show what the usage would look like in a post, I use the following as an example - modifying it as needed to change the padding, width, and colors. In general, I will modify the look of the font but will not use font-family references, relying on the default fonts with the Codex, in order to avoid font issues with various browsers and computer systems. 当需要实例显示文章中的用法的时候,我使用下面的内容作为例子—根据需要更改padding,宽度和颜色。一般而言,根据Codex默认字体,我会更改字体外观但是不会使用字体集参考,以避免不同浏览器和电脑系统之间的字体冲突问题。 <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">Box in which to provide demonstration of what a code looks like when used in the "real world". I can use <span style="color:red; font-weight:bold">spans to style sections</span> and other CSS inline styles to customize the look like for this list: <ul><li style="color:green; font-variant:small-caps">A List Item in Small Caps</li> <li style="color:blue; font-style:italic; font-weight: bold">List Item in Italic and Bold</li> <li style="color:maroon; font-weight:bold; font-size: 120%">Change Size and Color</li></ul> There are limits, like you can't recreate a hover, but for the most part, all inline CSS styles can be used on the Codex to recreate a realistic example of what the usage will generate. </div> <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">框用来显示代码在"现实世界"中的外观。我可以使用<span style="color:red; font-weight:bold">spans 设计部分</span>使用其它的CSS inline 样式自定义这个列表的外观: <ul><li style="color:green; font-variant:small-caps">用小型大写字母列出的列表内容</li> <li style="color:blue; font-style:italic; font-weight: bold">斜体和粗体列出的列表内容</li> <li style="color:maroon; font-weight:bold; font-size: 120%">更改大小和颜色</li></ul> 有一些限制,就如你不能够重新创建悬浮,但是极大程度上,可以在Codex上使用所有的inline CSS样式,重新创建产生用法的实例。</div> And the code is this: 代码是: <pre><div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> Box in which to provide demonstration of what a code looks like when used in the "real world". I can use <span style="color:red; font-weight:bold">spans to style sections</span> and other CSS inline styles to customize the look like for this list: <ul> <li style="color:green; font-variant:small-caps">A List Item in Small Caps</li> <li style="color:blue; font-style:italic; font-weight: bold">List Item in Italic and Bold</li> <li style="color:maroon; font-weight:bold; font-size: 120%">Change Size and Color</li></ul> There are limits, like you can't recreate a hover, but for the most part, all inline CSS styles can be used on the Codex to recreate a realistic example of what the usage will generate.</div></pre> <pre><div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> 用来显示代码在"现实世界"中的外观的框。我可以使用 <span style="color:red; font-weight:bold">spans设计 sections</span>使用其它的CSS inline样式自定义这个列表的外观: <ul> <li style="color:green; font-variant:small-caps">A List Item in Small Caps</li> <li style="color:blue; font-style:italic; font-weight: bold">斜体和粗体形式的列表</li> <li style="color:maroon; font-weight:bold; font-size: 120%">更改大小和颜色</li></ul> 有一些限制,就如你不能够重新创建一个悬浮,但是在极大程度上,可以在Codex上使用所有的inline CSS样式,重新创建用法产生的实例。</div></pre> ===Showing Links Without Links=== ===Showing Links Without Links=== To '''NOT''' show a link in an example like <tt><nowiki>http://example.com/index.php</nowiki></tt> which uses a link use <nowiki>: '''不要'''在例子中显示链接,如<tt><nowiki>http://example.com/index.php</nowiki></tt>,使用链接use <nowiki>: <a title="example" href="<nowiki><nowiki>http://example.com/</nowiki></nowiki>"> <a 标题="example" href="<nowiki><nowiki>http://example.com/</nowiki></nowiki>"> ===Making a Live Link Example=== ===Making a Live Link Example=== To create an example link, link to the heading in which that example is being used. If you are in an article called "Using WordPress" and showing an example under the heading "List Categories", then the example links to the categories would be: 创建例子链接,链接到这个使用这个例子的标头。如果你在一篇称为"使用 WordPress"的文章中而且在标题"列表类别"下面显示例子,那么链接到类别的例子链接将会是: <pre>* <nowiki>[[WordPress:#List_Categories|My Life Stories]]</nowiki> * <nowiki>[[WordPress:#List_Categories|My Family]]</nowiki> * <nowiki>[[WordPress:#List_Categories|Sharing]]</nowiki> * <nowiki>[[WordPress:#List_Categories|Facts and Fiction]]</nowiki></pre> <pre>* <nowiki>[[WordPress:#List_Categories|我的生活故事]]</nowiki> * <nowiki>[[WordPress:#List_Categories|我的家庭]]</nowiki> * <nowiki>[[WordPress:#List_Categories|分享]]</nowiki> * <nowiki>[[WordPress:#List_Categories|现实和虚幻]]</nowiki></pre> And the results would look like this, using the demonstration code from above: 使用上述的示范代码,结果看起来像: <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> * [[WordPress:#Making a Live Link Example|My Life Stories]] * [[WordPress:#Making a Live Link Example|My Family]] * [[WordPress:#Making a Live Link Example|Sharing]] * [[WordPress:#Making a Live Link Example|Facts and Fiction]] </div> <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> * [[WordPress:#Making a Live Link Example|我的生活故事]] * [[WordPress:#Making a Live Link Example|我的家庭]] * [[WordPress:#Making a Live Link Example|分享]] * [[WordPress:#Making a Live Link Example|现实和虚幻]] </div> ===Showing Links that Work Like Links=== ===显示像链接一样运行的链接=== To create the look of an example link, without having it actually behave like a link, you can use the <tt>span</tt> tag combined with underline to style a fake link: 要创建例子链接的外观,使其不像真正的链接那样运行,你可以将<tt>span</tt>标签与下划线一起使用,设计伪链接: <pre>See <span style="color:blue"><u>this article</u></span> for more information</pre> <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> See <span style="color:blue"><u>this article</u></span> for more information.</div> <pre>See <span style="color:blue"><u>this article</u></span> 更多的信息</pre> <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> 请看看 <span style="color:blue"><u>这篇文章</u></span>得到更多的信息。</div>
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)