主题：【原创】西西河个人主页设计的知识及技巧。加编辑工具 -- 铁手

注：请大家参考 编辑工具 和 用户模板

在西西河个人主页中，最重要的，也是最能体现个人创意的页面元素，是块结构。在HTML语言中，对应于 <div>。div 有很多特性可以供大家利用，来进行页面的排版和块结构的视觉效果定制。

在这篇短文里，大致按照页面排版，块结构控制和视觉效果几个大部分来写。希望给大家定制自己的个人主页时提供一些方便。

页面的排版：（涉及到的属性包括：float, width, height, overflow, clear)

比如你想实现下面这样的结构：

可以用如下代码：

如果想让某块结构居中，因为IE的问题，目前只能通过[align=center}[div@text-align:left;]内容[/div][/align] 的方式来实现（注意：把}用]替换）。

所有属性，在西西河的格式中，是在上面的

里，把属性内容放在 @ 后面，] 前面。每个属性，以 ; 结尾。

float的属性可以取值 left, right

决定了这个块结构在它的容器里是靠左边还是右边。在这里，容器是缺省的空白页面，暂时不能嵌套。

width 的属性可以用 % 也可以用具体的pix。推荐使用 %。在这个例子中，建议 左右相加的宽度总值不要超过 100%，否则很容易出问题。

clear 的属性，可以取值 both

这个属性的目的，是为了保证在 甲、乙两个块结构有不同高度的时候，保证 丙 这块贴在更高的那块。在本例中，丙 贴在 乙 下面，和甲之间有空白。

height 的属性可以限制块结构的高度，比如 height:200px

px 代表象素。200px 的意思是 200 象素高。

overflow 属性，建议取值 auto ，和 height 属性相结合，可以限制大块内容在一个小的区域中，通过滚动条来实现内容的浏览。比如 height:200px;overflow:auto 就会在内容超过一定数量后，产生竖向滚动条。

每个块结构缺省为 100% 的宽度。

单个块结构 调整：(padding, text-align, line-height, text-indent, font-size

缺省情况下，块内的内容是紧贴块结构的边框。你可以在内容和边框间增加一些空隙：padding:4px;

缺省情况下，块内的文字是左对齐的。你可以调整对齐方式：text-align:right 右对齐。还有: center, justfy

如果需要调整行间距：line-height:150% （字高的1.5倍，即间隔半个字大小。建议使用），或者 line-height:30px;。

text-indent:30px 可用来实现段落中的第一行缩进大小为 30 象素。一般情况下打两个空格就好了。

font-size:150% 用来实现文字大小的控制。本例为原来字体的 150%。参照 line-height。

视觉效果：border, border-width, border-color, border-style, background, color

border-width:5px; 可以使用 象素值来确定边的宽度。

border-color:#RRGGBB; 可以使用各种颜色值。其中RR,GG,BB的值分别从 00－－》FF，值越大，相应颜色的分量越重。

border-style，共有8个值可用，分列如下：solid (实线），dashed （虚线），dotted（点线），double（双线），inset（凹陷），outset（突起），ridge（隆起），groove（凹槽），后四种需要边界有一定的宽度值。

也可以使用 border 来同时实现上述三种属性的设定。border:5px double #006600; 显示为粗边双线绿色。

缺省情况下，border 没有视觉效果，而且是对四边有效。如果想单独控制某个边的显示效果，可以使用 border-top, border-left, border-bottom, border-right。

background:#009900; 来实现整个块的背景颜色，类似的，color:#000099; 来实现块内文字的颜色。

• 试答“未完”在“家园博客”的问题
• 测试