转载请保留：http://www.awflasher.com/blog/archives/995
我的校内首页：http://xiaonei.com/hustaw

引子：如果你想追求每一个“美化工程”的细节，例如：你非常喜爱某一个模板，但是却发现其中某一处的颜色稍有偏差又不知如何入手，那么我想我写这篇文章比我做N个模板给你去套用更“实惠”。当然，不排除以后也会考虑发布一些原创的校内涂鸦模板。

首先，我想看这篇文章的人，大多数都是对HTML甚至上网的普通知识没什么了解的同学。先给大家说一下基础的东西，至少是页面显示的原理吧。

我们都知道，计算机通信，只能传输“0、1、0、1”这样的数据，这些数据经过一层层封装（这些封装我们可以忽视），变成了“HTML代码”。我们所看到的网页，如此绚丽多彩，有图片，有动画，甚至还有声音，这一切的一切，都是HTML代码的功劳。

我不妨把中国互联网行业内的一句“俗话”润色一下：“你可以不懂ASP、PHP这些服务器端技术，你也可以不懂MySQL、SQLServer这些数据库技术，甚至，你可以不懂JavaScript、Flash这些客户端技术，但是你必须得懂HTML，而且，懂的越多越光荣”。因此，我相信今天的内容肯定不止校内网的用户感兴趣：）

没错，就是这万恶的HTML代码，让你痛苦不堪吧？然而，它却是我们在互联网上一切娱乐、体验的源泉。

我不想花太多的篇幅去讲“HTML是什么”之类的问题；即便，你要学习HTML是什么，我也不建议你抱着文档啃概念。人是感性的动物，理性的成果适用于归纳总结和知识的传递，但并不适用于对知识的理解。因此，我先讲讲“HTML如何产生作用”。

我建议大家以一种“搭积木”的过程来理解HTML的作用：打开页面，给你一段HTML。这一页面的HTML中每一段代码都是一块积木。你拿到这些积木，可以依次把他们摆放在一个“容器”里。一段一段的代码，对应着一块一块的积木，当代码结束时，这个容器就会有一个特定的“形体”了。

Okay，这就是HTML。那么，为了美化，仅仅有HTML是绝对不够的！也许你已经听说了，对，就是它 – “CSS”！CSS无论是英文原文还是流行的翻译（叠层样式表），实在是晦涩难懂。仍然用刚才那个“搭积木”的例子，这里，CSS就好比你摆放积木的方式；并且，CSS可以对你的积木进行“润色”，你可以把一块红色的积木变成蓝色，或者给它涂上你自己喜爱的图案。你也可以把你不喜欢的积木“干掉”：）

我不知道到这里，诸位是否明白HTML、CSS了？我对自己的比方还是非常有信心的，我想这比你花钱到那些骗钱的“电脑学校”学习“互联网开发”要实在得多：）

其实，HTML和CSS常常是“形影相随”的：比如我们在涂鸦板中的代码，往往就是又HTML、CSS混合构成的。

接着，我们就xiaonei.com的个人页面来说说。

首先，所有的美化和修饰，都是从涂鸦板开始的。我们很不幸地要接受这样一个事实：页面的信息，除了涂鸦板以外，我们都不可控；但我们也很幸运：感谢xiaonei团队为我们提供的这样一个平台，一个支持HTML、CSS的平台（最然暂不支持JavaScript，但这仍然是非常大的自由）。我们可以利用xiaonei提供的HTML“平台”，往页面上增加新的内容；我们可以利用xiaonei提供的CSS“平台”，修改页面上的所有内容，包括校内默认的一些信息、数据以及你人为添加的信息，例如我的校内页面（http://xiaonei.com/hustaw）左侧提供的一些订阅服务。

HTML是代码，它的组成看似复杂，其实很简单，例如我要给朋友加一个链接，那么我的HTML代码应该是

<a href="http://www.awflasher.com/blog/">aw's blog</a> 

这样，我点“aw’s blog”，就可以访问到www.awflasher.com/blog/了。

你会发现，所有的HTML，都是“<”+“>”构成的一个个“标签”，他们罗列有序，互相嵌套，形成了一种严密的逻辑结构。

当这样的代码被显示成页面的时候，我们往往也称之为“DOM”结构。DOM是什么，我觉得也大可不必深究。在这样的场合下，我建议把DOM理解为“一棵树” – “DOM树”：有根（root），有枝（说法统一一下：不用“branch”，而用“children”），枝连接的两端，我们叫做结点（node），枝上也许有叶子（属性，“property”）。理解DOM，对我们以后的教程非常有意义，我来画一张图，以校内个人页面中右侧的人气数值的DOM结构来举例说明问题。这种图形表示DOM的思想，借鉴《Head Rush Ajax》一书中的插图方式。

 

图中，“1”是大家在页面上看到的内容；“2”，代表对应的HTML代码；“3”，代表HTML代码所表示的DOM结构。

h3是这一个DOM树的“根”；其下有“郭启睿”这个文本结点，然后有两个span结点。而这两个span，又作为“根”，产生出了更多的结点。

注意，“DOM”、“DOM结构图”，与字体、颜色等样式无关。DOM本身只是决定一些简单的样式的，如DOM的顺序和包含关系，决定了布局中，谁在上，谁在下，谁在谁内部。

利用CSS，我们可以让这棵树显示到屏幕上的样子“面目全非”！

没错，既然我们无法改变校内网个人页面涂鸦板以外的DOM，那么我们就只能在涂鸦版中通过CSS的手段修改那些系统生成的DOM的样式（比如系统的导航栏、系统的底栏、系统的侧栏，等等），不仅是颜色，甚至包括布局、背景等等，甚至，你可以把校内网个人页中的一些不希望看到的信息隐掉，换上你自己的内容，包括我们看到的一些很“酷”的Flash导航，其原理都是如此。

到这里，聪明的你一定知道我是如何利用涂鸦板修改我的“2339”为大一点儿的黑体了：通过CSS，修改DOM的布局！例如我对我上一段布局的修改，就是通过如下代码完成的：

#vcount{font-weight:bold; font-size:16px;}

这段代码的作用就是让字体变粗，并且大小为16px（校内其他的字体都是12px）。今天我暂且不谈这些代码中“#”、“：”等符号的具体意义，大家知道这段代码的作用，就行了。

在我下面的内容重会深入、针对性地讲如何利用CSS修改校内网个人主页的布局。