站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:CSS Troubleshooting
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
==隔离你的 CSS Challenges== 识别母/子关系对于网页的布局的影响,能够帮助解决许多问题,但是有时候,母/子关系非常复杂,很难了解哪个部分是哪个部分,哪个部分影响了哪个部分。 要隔离和确认不同的CSS部分,divisions和classes,下面有几个简单的方法。开始之前,要确定给所有的主要文件包括CSS都'''做了备份''',以确定当处理不当的时候,你还能够返回到原文件。 一旦确定了错误根源并且解决了问题,确定要移除这些测试特色,这样网页又会看起来"正常"。 ===给每个部分加边框=== 一旦确认了HTML网页不同的部分或者divisions,进入你的CSS文件,并且给不同的部分,添加以下的属性: border:solid 1px ''color'' 在''颜色''的位置,为每个部分替换一个不同的颜色名称。 例如: <pre>#page { margin:5px; padding:0; border: solid 1px red; } #header { margin: 10px; padding: 5px; border: solid 1px blue; } #content { margin:5px 100px 5px100px; padding:10px; border: solid 1px green; } .post { margin:5px; padding:10px; border: solid 1px yellow; }</pre> 保存CSS文件,并且网络浏览器上的网页(点击刷新按钮或者F5)。在每个部分的部分上,你会看到一个不同颜色的框。 <span style="padding:5px; border:solid 1px red">这是红色的框中突出的另一个部分。</span> 这是返回正常形式的文本的剩余部分。</div> 如果在内容的周围,你没有看见一个带有颜色的框,核查你更改的选择器,有没有正确地拼写了,有没有在HTML中得到了识别。 如果问题源于蓝色的框,那么你知道可以从哪里开始解决问题。完成后,确定移除了测试属性。 如果你使用Firefox作为浏览器,有一个便利的插件能够帮助你解决问题,使得解决css问题变得非常简单。这个插件称为Aardvark,而且可以在[http://www.karmatics.com/aardvark/ http://www.karmatics.com/aardvark/]免费得到。测试运行有一个演示程序。 ===突出某部分=== 除了在不同部分的周围加上边框,隔离有问题的CSS或者HTML外,你可以快速地更改文章的内容的颜色,使得问题一下子"出现在"你的眼前。通过更改字体的颜色和某个部分的背景色,当你查看网页的时候,你一眼就能发现问题所在。<i>'''注:'''确定记录了原始的颜色,这样即使测试时更改了颜色,随后也可以返回原色。同时,要不断地做文件备份! </i> 在CSS文件中,你可以通过向选择器的属性添加<tt>color:red</tt>,或者任何其它的颜色,来更改一个部分的字体颜色,如: H1 { font-style:bold; font-size: 125%; color: red; } H1标题呈现给你的是明亮的<span style="color:red">red</span>而且看起来像: 要更改某个部分的背景色,你可以添加<tt>background:pink</tt>,使得整个背景呈现<span style="color:pink">'''pink'''</span>。 #header { margin:5px; padding: 10px; background:pink; } 结果可能看起来像: <div style="position:relative; padding:5px; border:dashed 1px blue; background:white;color:black">This is some text that goes on babbling here and there. <span style="background:pink">This is some text with the background color changed so you can see it.</span> <span style="background:pink">这些文本更改了颜色,这样你能够看到这些文本。</span> 这是返回正常形式的其余的文本</div> 整个标头部分现在拥有一个<span style="color:pink">'''粉红色'''</span>背景。当你识别了问题所在,并且解决了问题后,要确定移除了所有的测试属性,以重建网页外观。 ===确认源代码=== 有时候,一个极小的错误会使得你的网页变得紊乱。一个拼写错误的标签(<tt>rhef</tt> 而不是 <tt>href</tt>),一个忘记关闭的标签,一个丢掉的属性,或者甚至错误的属性,都会使你的网页陷入紊乱。 免费的在线确认器能够帮助你检查HTML,XML和CSS编码,帮助你处理丢掉的内容。当你浏览代码的时候,要跳过一些小错误非常简单。大多数在线确认器向你的站点输入URI(链接),开始确认,或者让你粘贴代码或者上传文件,让它确认。默认情况下,WordPress会确认默认的代码,但是如果你做了更改,一点小小的改动,都会使得网页变得一团糟。 不同的确认器检查不同的问题,因此如果你使用一个确认器不能够找到解决方法,你可以尝试使用另一个。许多validators甚至会推荐做一些其它的更改,但是先找到你的问题所在,再做更改。 要帮助你了解更多的关于确认的信息以及找到在线的确认器,我们在一篇称为[[WordPress:Validating a Website|确认一个网站]]的Codex文章上,提供了一系列确认资源。 ===Slash and Burn - The Last Resort=== <span style="color:red">'''不适用于胆小的人'''</span> ''注: 有两个Slash and Burn方法。如果你胆子较小,请查看[[#WordPress:Gentle Slash and Burn|第二个]]。'' 如果你还没有缩小问题的范围,有一个方法可以使用,有时候称作"Slash 和 Burn",这个方法会帮助你缩小问题的范围。'''这种方法使用时不能够被干扰,需要你集中精力,需要完整的文件备份,确保你不会破坏,甚至网页设计中已经紊乱的那个部分。''' 我们同时建议你熟悉HTML和CSS。 1.备份所有的文件。 2.在网络浏览器中打开一篇文章并且浏览>源代码。 3.将这个源文件以一个文本文档保存,称为"junk.html",保存到你的硬盘中的一个空的测试文件夹中。不要关闭这个文件。在这个过程中,这个文件都是打开的。 4.将你的CSS文件复制到同一个测试文件夹中。 5.如果你处理图形的时候,遇到了麻烦,将图形文件夹或者图形复制到测试文件夹中。 6.在junk.html源文件中,将类似: <link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css"> 的样式表reference更改为: <link rel="style sheet" type="text/css" href="style.css"> : 保存 junk.html 文本文件 (不要将它关闭)。 7.在测试文件夹中,双击<tt>junk.html</tt>浏览你的浏览器中的文件。如果合适的话,你会看到带有图形的整个页面的布局。如果不行的话,再次检查样式表的链接reference。 8.在你的<tt>junk.html</tt>文本文件中,转到问题开始发生的位置。进入上述的部分(包括有开始的和结束的标签的部分,例如: <pre><p>babble...</p></pre> :或者 <pre><div class="post">babble...</div></pre> :并且从开始标签到结束标签,突出整个部分,并且剪贴这个部分(Cntrl+X)。 9.保存文件。 10.在网页浏览器上刷新网页(F5或者点击刷新-如果出现了问题,你没有看到什么变化,按住SHIFT 键然后安装 F5 或者(在FireFox中)同时按住Cntrl+Shift+R)。 11.你会发现移除的部分,不见了。继续检查看看,问题是不是解决了,或者问题是不是除掉了。如果是的,那个移除部分就是问题所在,如果问题仍然存在,那么继续下面的步骤。 12.如果问题仍然存在,返回到<tt>junk.html</tt>文件,如果指针已经移动了,将鼠标指针放到你删除某个部分的位置。粘贴返回剪贴的部分(Cntrl+V)。从这里开始向上或者向下移动,并且在第十二步中重复第八步的操作。 在这个过程中的某个步骤中,你可能看到问题既没有解决,也没有消失。从一个大的部分开始,当你找到一个大的问题区域的时候,将这个区域切分为一些小的部分。最终,你会隔离产生问题的区域。注意确认有问题部分的CSS references并且开始更改CSS文件,解决问题。 ====温和 Slash and Burn==== 要使用slash和burn的''温和''版本,而不是如上所述的删除整个部分,将这些部分剪切并且粘贴到记事本或者其它的文本编辑器中,这样你处理剪切和粘贴过程有所失误的时候,这个部分仍然得到了保护。处理这些的时候,要经常地做文件备份,''以防万一'' (什么你意想不到的情况发生!)。
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)