在WordPress 1.5版本中新的主题介绍中，令人厌烦而平凡的网站布局已经成为了过去。只要点击几次，你就可以立刻更改你的网站布局。点击并且处理几次，你也能够立马将你的网站布局弄得一团糟。欢迎你来到当前的网页设计世界。
将网站布局弄得一团糟的时候，许多人会来到WordPress 论坛寻求帮助。虽然自愿的志愿者能够尽其所能地帮助你，你自己也可以采取一些步骤，来解决问题，或者至少能够知道问题处在哪里，然后再去访问论坛。
; 去论坛之前，需要了解：在你带着布局设计问题，去访问论坛之前，你需要了解一些相关内容，以及关于自己解决这个问题的小贴
; 检查你的HTML和CSS：仔细地比较你的HTML和CSS，并且确保所有的参考都能够相匹配。
; 隔离你的 CSS Challenges :下面我们会向你介绍几种方法，帮助确认产生问题的位置，这样来将问题限制到特别的区域和代码上。
; 常见的CSS 错误 :你并不是第一个碰到这个问题的人。我们有最常见的CSS错误的列表，帮助你解决一些，可能使你的布局混乱的问题。
; Pest 控制 – 提防浏览器程序缺陷 :虽然我们会帮助你识别一些CSS challenges，许多challenges是由于程序缺陷以及浏览器之间的冲突，因此我们会向你提供一些小贴士，关于怎样对付不同的浏览器程序缺陷。
这篇文章的目的在于帮助你解决CSS文件内部的布局设计问题，而不是HTML或者PHP文件内部的布局设计问题。关于更改这些的帮助，更多的信息，请查看使用主题。
在开始用一些小贴士或者方法解决任何问题之前，要确定备份了你的数据库以防万一。同时，在你尝试不同的方法的时候，备份你的文件，这样你可以随时返回。
如果你有方法，使用（例如）Jesse Ruderman的编辑样式 bookmarklet 或者关于Firefox的编辑CSS扩展，能够更快更加安全地测试并且解决你的CSS问题"on the fly"。当你做好了更改之后，将你的新的（编辑好的）代码复制到适当的WordPress主题文件中（备份后，再复制）。
网络开发员的Firefox扩展名也能够帮上忙。
如果你是CSS和网页设计的新手，先访问WordPress的CSS 的小贴士，方法和资源，找到一些关于CSS基本知识的信息，同时上面可能有一些你的问题的答案。至少，你会大致地了解CSS是什么，CSS对HTML或者你的网页结构的影响，同时学习一些行话，帮助你在论坛上问一些更深入的问题。
你也要知道一些基本的方法，帮助你向他人表述你的问题。这并不是一个怎样使用CSS的指南，而是一个" thingamahjig 称作什么的"指南。
CSS (层叠式样式表)是一些代码，会影响你的网页HTML编码的呈现或者外观。在WordPress中，通常能够在你使用的一个特别的主题文件夹的一个称为style.css文件中找到CSS样式。持有你的网页结构的HTML代码和CSS参考，通常可以在你的主题文件夹的index.php文件中找到。
PHP文件可以在你的主题文件夹中找到，包含有编码和参考，这些制作了你的HTML网页。在这里，这个最后一步，你可能更改特别的CSS选择器标签，而不是HTML标签。关于更改这些标签的更多的信息，请看看使用主题。
CSS 选择器 (名称)一般被分为三个特别的references: ID, CLASS,和 HTML标签。
ID是网页上一个特别的独特的区域的references。一般这个ID会出现在HTML网页上，作为一个附加的DIV（分开）区：
网页标题
#header { position: relative; margin:0; padding:0;
height:100px; width: 100%; background: red;
color: white;}
CLASS
CLASS是网页上任何元素的一个reference，当网页上某个原始需要以一种特别方式显示的时候，就要用到reference。例如，如果你想要频繁地突出文本中的一个或者两个词（在这个例子中，我们将红色作为突出的颜色），你可能在样式表中需要一个像这样的CLASS选择器：
.hilite { 颜色: 红色}
: 你的HTML 中的reference可能看起来像:
...这个文本是关于我想要的某个东西<span class="hilite">in red</span>. And
some more rambling here...
;如你所见到的那样，样式表中
ID 和 CLASS选择器的区别在于ID使用一个井号（#名称），而CLASS使用点号（.名称）。ID references在网页上必须是独特的，而且只能使用一次。CLASS references可以在同一个网页上多次使用。如果你想要"设计"一个特别的HTML标签reference，例如blockquote，网页内部的编码可能看起来像：
这是一个简练而又价值的引用，我想你会喜欢。
:在样式表中，blockquote的reference没有#或者点号，但是会列出HTML和设计元素。这个例子中，引用的两边都缩进了而且引用的左边有一个蓝行，同时引用文本也是斜体的。
blockquote { position: relative; margin: 10px 50px 10px 50px;
padding:5px; font-style:italic;
border-left:solid blue 4px; }
:你可以在任何特别的HTML标签上应用任何设计元素，如body, p, H1, H2, H3, ul, li,以及更多的。
关于更改
ID, CLASS, 和HTML的信息，请查看WordPress的CSS 小贴士，方法和资源。重要的注意事项！某些主题在多个地点有css样式表，Kubrick主题就是其中的一个。如果，在一个css文件中更改了css属性之后，你并没有看见你想要的结果，可能你的主题选择在一个php文件（通常是个标题文件）中有些嵌入的css，而且嵌入的css样式表覆盖了链接进的或者导入的css样式表。
为了要决定网页设计上哪些元素是合适的，哪些是不合适的，你需要返回到原始资料。这意味着你要深入地观看。
网页的美好外观，你在网络浏览器上看到的漂亮的布局下面，是一连串的编码，编码上有奇怪的听起来怪异的references。窄看一眼，这些编码就如汽车的引擎盖下面的东西。你知道正是引擎盖下面的东西，使得汽车能够开起来，但是那些乱起八糟的编码到底是什么呢？
查看 HTML;这个链接会载入到你附加的CSS样式表上。要查看CSS，双击文件名或者在你的网络浏览器文件上输入特别的链接，如：
在WordPress中，PHP是用来真正地产生HTML网页的，通常是复杂的，使人感到疑惑的编码。要查看HTML，请先查看一个网页，例如一篇文章样本。要更改HTML结构和CSS references，你需要更改适当的PHP文件。关于使用主题的Codex 网页有更多的信息，关于怎样查看你的主题模板，找出哪个模板与你的网页上的哪个部分相联系。
这里所列的解决问题的办法，描述了怎样更改CSS来影响网页的布局。要真正地改变主题，请查看主题发展。
你一旦深入，查看到了HTML和CSS，就要开始玩侦查的游戏了。开始，你要知道你在查看什么，以及可以在哪儿找到基本的元素，帮助你找到问题所在。
HTML网页拥有所有的结构编码，能够为你的站点所处的"位置"建立网格。将HTML网页看做是一张地图，地图上写满了注释。这些注释事实上是指示器，指向CSS文件中的一些方向。
向下滚动，浏览过许多信息，直到你看到了。这个的下面就是网页布局的"主体"。在这个部分中，每一点信息对于网页的结构和设计，都至关重要。
继续向下滚动，查看识别的ID和
CLASS声明。例如，你可能会看到：
My WordPress Site
by Me and Only Me
)，然后是"content"部分ID，也有一个CLASS，称为"widecolumn"，紧跟着另一个CLASS，称为"post"。"content" 和 "widecolumn"布局了特有你的r "post"那个部分。看起来，这个可能让人感到疑惑，但是这基本上设置了你的内容所在的部分。
它以一个称为"网页"，设置了整个网页的外观的模块开始。如果你在CSS文件中查找 #网页选择器，你会看到相关的外观样式。 这个样式在标头部分的后面，标题部分包含有一个标题 (H1) 和你的站点的标题。这个特殊的布局是以默认的 WordPress 1.5称作Kubrick的主题为基础的，这个主题的标头部分包含有一个图像，这个图像由 "headerimg" 部分设置。然后是一个带有 CLASS reference的部分，称为 "description" ，在这个部分中，你拥有一个子标题或者站点的描述。再一次地，查看你的CSS，找到.description 了解这个部分是如何设计的。
接着的两个标签关闭了header (
这是一个母/子关系的例子。同样，就如你在下一个部分中所见到的那样，这是开始产生CSS布局问题的主要部分之一。
CSS 母子关系
设计网页最大的问题之一是要了解问题是在哪里产生的，以及谁能够解决问题。这称为CSS的"母/子关系"。众所周知，父母的内心通常知道孩子们最真实的想法，孩子们通常惧怕父母们的这种想法，也会为此苦恼，因此，了解这样关系，会帮助你解决这个问题。
一个WordPress用户在论坛上发表一个问题，她想要自己的网页上的header在网页上完全地扩展，同时内容要出现在网页的中间，左边和右边都有非常大的空间。她一直尝试处理header周围的空白，但是一直没有效果，因此向我们求助。
Header Title
Post babble here...这个例子中，CSS页面空白的属性是：
#page { margin-top:5px; margin-right: 100px;
margin-bottom: 5px; margin-left:100px; }
#header { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 20px;
margin-bottom: 5px; margin-left:20px; }
.post { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px; }仔细观察这个编码，会发现更改header上的页面空白，不起作用，因为标头页面空白本来是由page空白控制的。这里正显示了母/子关系。母page告诉子header做什么，但是子header想要做其它的事情。
如果我们更改了page左边和右边的空白，便解决了header的问题，但是我们又由此产生了另一个问题。母page的影响继续存在，现在所有的内容都扩展在整个网页上。要更改content左边和右边的空白，这样又有很宽的页面空白了。要使得整个页面看起来合适，新的页面空白看起来像：
#page { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px; }
#header { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 100px;
margin-bottom: 5px; margin-left:100px; }
.post { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px; }隔离你的 CSS Challenges
识别母/子关系对于网页的布局的影响，能够帮助解决许多问题，但是有时候，母/子关系非常复杂，很难了解哪个部分是哪个部分，哪个部分影响了哪个部分。
要隔离和确认不同的CSS部分，divisions和classes，下面有几个简单的方法。开始之前，要确定给所有的主要文件包括CSS都做了备份，以确定当处理不当的时候，你还能够返回到原文件。
一旦确定了错误根源并且解决了问题，确定要移除这些测试特色，这样网页又会看起来"正常"。
给每个部分加边框
一旦确认了HTML网页不同的部分或者divisions，进入你的CSS文件，并且给不同的部分，添加以下的属性：
border:solid 1px color
在颜色的位置，为每个部分替换一个不同的颜色名称。
例如：#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; }保存CSS文件，并且网络浏览器上的网页（点击刷新按钮或者F5）。在每个部分的部分上，你会看到一个不同颜色的框。
这是红色的框中突出的另一个部分。
这是返回正常形式的文本的剩余部分。
如果在内容的周围，你没有看见一个带有颜色的框，核查你更改的选择器，有没有正确地拼写了，有没有在HTML中得到了识别。
如果问题源于蓝色的框，那么你知道可以从哪里开始解决问题。完成后，确定移除了测试属性。
如果你使用Firefox作为浏览器，有一个便利的插件能够帮助你解决问题，使得解决css问题变得非常简单。这个插件称为Aardvark，而且可以在http://www.karmatics.com/aardvark/免费得到。测试运行有一个演示程序。
突出某部分
除了在不同部分的周围加上边框，隔离有问题的CSS或者HTML外，你可以快速地更改文章的内容的颜色，使得问题一下子"出现在"你的眼前。通过更改字体的颜色和某个部分的背景色，当你查看网页的时候，你一眼就能发现问题所在。注:确定记录了原始的颜色，这样即使测试时更改了颜色，随后也可以返回原色。同时，要不断地做文件备份！
在CSS文件中，你可以通过向选择器的属性添加color:red，或者任何其它的颜色，来更改一个部分的字体颜色，如：
H1 { font-style:bold; font-size: 125%; color: red; }
H1标题呈现给你的是明亮的red而且看起来像：
要更改某个部分的背景色，你可以添加background:pink，使得整个背景呈现pink。
#header { margin:5px; padding: 10px; background:pink; }
结果可能看起来像：
This is some text that goes on babbling here and there.This is some text with the background color changed so you can see it.
这些文本更改了颜色，这样你能够看到这些文本。
这是返回正常形式的其余的文本
整个标头部分现在拥有一个粉红色背景。当你识别了问题所在，并且解决了问题后，要确定移除了所有的测试属性，以重建网页外观。
确认源代码
有时候，一个极小的错误会使得你的网页变得紊乱。一个拼写错误的标签(rhef 而不是 href)，一个忘记关闭的标签，一个丢掉的属性，或者甚至错误的属性，都会使你的网页陷入紊乱。
免费的在线确认器能够帮助你检查HTML，XML和CSS编码，帮助你处理丢掉的内容。当你浏览代码的时候，要跳过一些小错误非常简单。大多数在线确认器向你的站点输入URI（链接），开始确认，或者让你粘贴代码或者上传文件，让它确认。默认情况下，WordPress会确认默认的代码，但是如果你做了更改，一点小小的改动，都会使得网页变得一团糟。
不同的确认器检查不同的问题，因此如果你使用一个确认器不能够找到解决方法，你可以尝试使用另一个。许多validators甚至会推荐做一些其它的更改，但是先找到你的问题所在，再做更改。
要帮助你了解更多的关于确认的信息以及找到在线的确认器，我们在一篇称为确认一个网站的Codex文章上，提供了一系列确认资源。
Slash and Burn - The Last Resort
不适用于胆小的人
注: 有两个Slash and Burn方法。如果你胆子较小，请查看第二个。
如果你还没有缩小问题的范围，有一个方法可以使用，有时候称作"Slash 和 Burn"，这个方法会帮助你缩小问题的范围。这种方法使用时不能够被干扰，需要你集中精力，需要完整的文件备份，确保你不会破坏，甚至网页设计中已经紊乱的那个部分。' 我们同时建议你熟悉HTML和CSS。
1.备份所有的文件。
2.在网络浏览器中打开一篇文章并且浏览>源代码。
3．将这个源文件以一个文本文档保存，称为"junk.html"，保存到你的硬盘中的一个空的测试文件夹中。不要关闭这个文件。在这个过程中，这个文件都是打开的。
4.将你的CSS文件复制到同一个测试文件夹中。
5.如果你处理图形的时候，遇到了麻烦，将图形文件夹或者图形复制到测试文件夹中。
6.在junk.html源文件中，将类似：
的样式表reference更改为：
: 保存 junk.html 文本文件 (不要将它关闭)。
7.在测试文件夹中，双击junk.html浏览你的浏览器中的文件。如果合适的话，你会看到带有图形的整个页面的布局。如果不行的话，再次检查样式表的链接reference。8.在你的junk.html文本文件中，转到问题开始发生的位置。进入上述的部分（包括有开始的和结束的标签的部分，例如：
babble...
:或者
babble...
：并且从开始标签到结束标签，突出整个部分，并且剪贴这个部分(Cntrl+X)。
9.保存文件。
10.在网页浏览器上刷新网页（F5或者点击刷新-如果出现了问题，你没有看到什么变化，按住SHIFT 键然后安装 F5 或者（在FireFox中）同时按住Cntrl+Shift+R)。
11.你会发现移除的部分，不见了。继续检查看看，问题是不是解决了，或者问题是不是除掉了。如果是的，那个移除部分就是问题所在，如果问题仍然存在，那么继续下面的步骤。
12.如果问题仍然存在，返回到junk.html文件，如果指针已经移动了，将鼠标指针放到你删除某个部分的位置。粘贴返回剪贴的部分(Cntrl+V)。从这里开始向上或者向下移动，并且在第十二步中重复第八步的操作。在这个过程中的某个步骤中，你可能看到问题既没有解决，也没有消失。从一个大的部分开始，当你找到一个大的问题区域的时候，将这个区域切分为一些小的部分。最终，你会隔离产生问题的区域。注意确认有问题部分的CSS references并且开始更改CSS文件，解决问题。
温和 Slash and Burn
要使用slash和burn的温和版本，而不是如上所述的删除整个部分，将这些部分剪切并且粘贴到记事本或者其它的文本编辑器中，这样你处理剪切和粘贴过程有所失误的时候，这个部分仍然得到了保护。处理这些的时候，要经常地做文件备份，以防万一 (什么你意想不到的情况发生!)。
常见错误
我们都犯错。单词"typo"并不是毫无缘由地得到了发明。下面是CSS的一些最常见的问题。
;拼写错误：众所周知，leftt与left不同，而且这可能导致某个内容本应该出现在网页的右边，最后却出现在了左边。在一个页面空白上放上一个30ps可能得不到什么结果，但是30px会起作用。拼写中遗漏字母的错误非常常见而且也很容易遭到忽视。幸运地是，CSS确认器总能够为我们找到这些错误。
;遗漏的详细信息：虽然你能够发挥创造力处理CSS，你仍然需要遵循一些基本的规则。每个选择器必须被标示为一个ID或者CLASS，除非这个选择器是一个HTML标签。必须被设置为选择器{ property: value; property: value; }而且必须有括号，冒号和分号。缺少任何一样，什么结果都不会产生或者会出现奇怪的结果。CSS确认器经常会为你找到这些容易遗漏的详细信息。
;错误的选择器：如果所有优秀的设计本应该放在#context-text而你却将其放在#content，那么设计就不会对你的布局起作用。幸运地是，浏览网页的时候，你通常能够发现到这一点，因此你只需要将这些设计剪切并且粘贴到合适的标签上，就可以了…然后，要记住，你从#content上删除了什么内容。当然，你可以查阅文件备份，找到丢失的代码。Hint-Hint!
;错误的模板模块：虽然WordPress新的模块模板很有用，用户许多时候会更改comments.php 而不是comments-popup.php或者更改了其它名称类似的文件。仔细地检查，你应该一直处理模块部分。如果你偶然地将每个模块搞糟了，可靠的文件备份，能够使得处理重新开始。
;多个选择：CSS不能够读懂你的思想。如果同一个选择器有两个references，而且这两个references信息相冲突，CSS需要决定使用哪个reference。如果你将最初的样式表放到了一个新的样式表的上方，这种情况出现很平常。如果你使用一个选择器，来争取，如h1标题，但是什么内容也没有改变，搜索样式表看看，那个选择器是不是有另一个reference。
程序错误控制 –提防浏览器程序缺陷
不管我们怎么努力使我们的网页看起来更加地美观，在不同的浏览器上查看网页，会看到我们美丽的设计已经变得一团糟。
不同的浏览器阅读网页的方式不同。旧的浏览器不会识别新的CSS标准，然而新的浏览器与过去的浏览器"阅读"内容的方式是不同的。结果通常不尽人意，会产生内容的错位，移动，或者会丢失设计元素，更改布局，并且移动了位置。
你怎么知道是浏览器而不是你的设计，产生了问题？通常你不知道。如果你使用CSS有一段时间了，你就会了解一些征兆了。通常，有两个线索：
- 当你下滚网页的时候，文本开始跳动或者抖动。
- 当你将鼠标移向一个链接的时候，链接和文本开始跳动。
- 当你将鼠标移向链接列表的时候，链接列表会跳动。
- 布局看起来不同。浏览器之间的栏会更宽或者更窄。
- 图形覆盖了文本或者列表。
- 特别的效果，例如filters看起来不是一样的或者根本就没有。
要帮助解决你的浏览器缺陷，请查看CSS解决浏览器程序缺陷中的建议和资源。