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

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

在西西河个人主页中，最重要的，也是最能体现个人创意的页面元素，是块结构。在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; 来实现块内文字的颜色。

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

有时间的人不妨把这本书找来看看：

Head First HTML with CSS & XHTML

http://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X/sr=8-2/qid=1162435151/ref=pd_bbs_2/104-6953029-7491138?ie=UTF8&s=books

在同一个筐内，有些字居中，有些左对齐，有些右对齐能行吗？

我在其他地方看UBB功能时，看到了许多实用的功能，可惜西西河还不能用……

让人看得头晕！还是弄一些模版出来,这样懒人们就不用那么麻烦了!!

既然让大家自己发挥，那索性就多给点功能，要不就给出固定格式好了，现在这样实在不爽，连嵌套都不能实现。

如果有人能够提供简单的解决办法，则不胜感激也。特别是嵌套方面。

TABLE，主要是因为现在主流上已经非常不赞成使用，而是尽可能以DIV+CSS的方式来实现。除非万不得已的情况下。

http://asp.shumablog.com/dream/html/ASP/12144.html

http://www.ruianx.com/article/data/2006/0215/article_14684_1.htm

http://www.webjx.com/htmldata/2005-02-23/1109124980.html

意思应该是明白的，但无法操作，还请夏兄明示！如烟也想做个别致的小屋。

忽然觉得铁手的愿望可能有点落空

要知道，来这的大多数是看帖的

主页搞好要花很多精力的

主页权限开放大了危险也多了，开放小了花效也就少了

综合上述，可能最多也就点点你的模版而已了。

至于摸版样式，最简单的方法是看现在正装修小屋的那几个，然后想法用模块解决。比如爱把自己的主题要帖列表的，给个列表模块，再加个色彩css供大家点选，这样只要鼠标点点，小窝变新房，才能吸引快捷懒社会的人类啊

在您的名字处点下去，找到修改资料，然后个人主页栏里放入UBB形式的内容，可以先试验一下自己想用的效果，熟悉了之后再确定内容。有关资料请参考铁老大的UBB实用说明。

右上角的……左边

我已找到了，也操作了，还是不太会。一会再请教夏兄。

看来以后还得每贴必花！