5.3 UBB编辑器以及内容
这应该是全部模块讲述里面的最后一个部分了。有的时候我们使用UBB编辑器写的内容里包含一些代码块，说代码块可能不是很好理解。举例子就像插入Flash、视频、代码、可运行代码等等。这些我们可以在定义完内容面板式样后定义这些内容。这些内容就是包含在一个大的元素（.UBBPanel）里面的，同样是类选择符。
从上图中可以看出这个结构很容易理解，同样我们只要分别把里面的每个元素看成是一个BOX，然后对他们进行定义。而其中的.UBBContent TEXTAREA为文本框多数在可运行代码里可以看到，里面的字体不要设置的过小哦，看代码太小很累的。
说完内容部分接下来就说说UBB编辑器的式样。UBB式样是包含在模版主目录里的UBB文件夹里面，里面分别有一个editor.css的式样文件、bar.gif的栏目分割图片、和一个Icons的图标文件夹。我们可以替换这些图片但不能改文件名（有的时候为了和模版协调，需要更换UBB图标）。这里重点看editor.css这个式样文件。我们先开看看UBB编辑器的结构
我们从图中的结构可以看出，.editorContent部分的内容相对比较简单就是一个大的里面包含了一个文本框。主要是在#editorHead里的内容首先是包含了一个纵向排列的.editorTools我们可以看做是一个个工具栏。在工具栏里面又包含了一个个.Toolsbar工具条。工具条里是一个有Ul、Li构成的列表列表里是一个个的.Toolsbutton按钮，当然有的时候也有选择框.ToolsUL Li select。在一般情况下默认式样文件里的UBB式样可以通用不需要自己写，当然如果你的模版要求UBB编辑器协调的话可以在默认的基础上修改比如边框色、背景色之类的。当然如果你要在鼠标移到图标的时候当前图标稍微变大点，那你就可以.Toolsbutton:hover的式样，在里面定义一下尺寸。每个按钮除了有一个统一的Toolsbutton类之外他们各自还有一个唯一的ID，比如粗体就是A_bold。
说到这里似乎要完了，但还有很重要的一个元素，那就是.UBBSmiliesPanel。这个是就是表情面板，就是点击插入表情的那个按钮时跳出给你选择表情的面板。因为这个元素默认是隐藏的，一般不会很注意他。这个面板除了自身的一个元素.UBBSmiliesPanel外，里面包含的就是一个表格，表格里面是一个个图像链接每个链接都有一个名为Smilie的类。我们定义的时候就定义.Smilie{}。这里要注意的是.UBBSmiliesPanel这个面板的定义，因为一些有些朋友用visibility:hidden来定义这个面板的隐藏。这里要注意，隐藏一个元素有两种方法visibility:hidden和display:none，这两个不同的是display:none不为被隐藏的对象保留其物理空间。也就是说display:none这个隐藏了就不占地方了，如果有的时候你做了一个800px的模版，但是有时遇到有横向滚动条的情况，但找不到那里出了问题，那你就试试这里有问题没有。
六、兼容调试
兼容问题一直是设计制作模版最头疼的问题。这里我们就目前主要流行的浏览器Firefox和IE6/7做为主要浏览器。在我们编写CSS过程中我们要经常的预览观看书写的效果，这个预览的过程最好使用一种浏览器或Firefox或IE，这里推荐使用Firefox。这里我就主要会出现的问题来进行说明。
居中的问题。我们在要使一个DIV居中的时候，首先要对这个DIV的父元素（就使这个BOX的外面一层）设置text-align为center，然后设置目标DIV的margin为auto；
尺寸问题。Firefox在设置padding后会加上这个BOX的高度和宽度，而IE就不加。由于Firefox和IE中的BOX模型解释不一致导致margin相差2px，就是说Firefox下设置margin:30px，那IE下就显示的尺寸为28px。margin还有个问题就是解决办法在IE7没出来前是用!important来解决的，IE出来了对!important认识了那就要另外解决了，解决方法看这里。另外在计算BOX宽度的时候一定要记得算上边框border的宽度。比如
<div>
<div><div>
</div>
这样的结构在Pjblog里随处可见。看式样