最近玩校内玩的比较火，也认真的研究了下校内的涂鸦板代码，可今天一上线，突然发现页面怎么变了样子，寻找原因，发现提示：
各位同学：
本着自由开放的原则，我们一直尽可能的减少对涂鸦板的限制，让同学们对个人页面能够进行最大限度的美化。但是随着用户的增加，在涂鸦板添加恶意代码散布广告、投放病毒的现象日益增多。校内环境日益恶化。为了给大多数同学营造一个纯净的交流环境，我们不得不选择关闭涂鸦板的html代码添加功能，但是依然可以通过涂鸦板修改CSS达到美化页面的目的。由此带来的不便我们感到非常的抱歉，感谢同学们对我们工作的支持和谅解。
原来是校内网限制了HTML代码的添加，这样我们以前的一些代码就 有可能有很多失效的，所以导致我们原来的页面千疮百孔。在一阵阵的痛骂声之后，我觉得我们也应该理解，毕竟他们的初衷只是想给我们一个纯净的环境。
校内网的发展很快，从2006年10月至今，已经有了很大的用户群，可以说国内的所有大学生几乎没有不知道校内的，如果不知道那你肯定被认为是老土了。而在这个追求个性的年代，给自己的页面做个有个性，符合自己特点的模板是我们大家的一个愿望。但毕竟这不是每个人都能轻松做到的，这需要我们有一定的基础才可以修改。但骂过之后，我们也该冷静的思考思考，似乎我们已经不可能因为这小小的变动就再也不来校内了。且不管它属不属于霸王规定。呵呵~ 下面我将从零说起，大概是这样的一个过程：准备工作→Skin的构思→编写CSS→预览→调试兼容性→美化细节，预览和编写是个循环过程。我想通过本教程能够使大家了解Skin制作，不需要再用别人做的Skin，靠自己的努力把自己的校内网装饰的漂亮有个性。很振奋吧，那我们往下看……
一、 准备工作
1.1 必需的一些基础
你要有学习知识的欲望，这个是一切的前提。但如果你还不知道什么是涂鸦板，建议你不要往下看，呵呵，开玩笑了。在修改涂鸦板的时候要细心，严格要求自己，有一定的审美观。最好熟悉一些制图软件（Potoshop、Fireworks之类）。对CSS方面要掌握一定的基本知识。CSS方面苏昱做过很不错的教程
2.2 涉及的工具
首先你要有台电脑，制图软件Adobe Potoshop、Fireworks之类。CSS编写工具， Dreamweaver8最好不过，当然用记事本也可以，这样更容易记住代码的含义。色彩调配软件，屏幕截图软件等。
软件下载地址：
苏昱式样表中文手册2.0
Dreamweaver8 官方简体中文正式版
Fireworks
二、 构思你的Skin
2.1配色
你的Blog给人的第一印象就是视觉上的，所以说色很重要。这里主要只链接的颜色，主体背景的颜色，还有标题框的颜色等。
这里我们用的是白、灰、红。一般灰色是通用的，就像血型里的O型血一样。
2.2布局 在你继续学习之前，请确定你已经具有了一定的HTML和CSS基础。之所以写这个帖，是因为看到很多人都不会修改涂鸦板，用的基本都是别人重复的，看的我已不胜其烦，我想那是因为大家基本上是对css不了解的，而做这些改变是要求对css有一定程度了解的，否则以下的问题你是无法解决的，上次别人帮你解决了，这次改版了你又要去求人，那又何必。其实如果认认真真的研究下教程，我们完全可以自己修改涂鸦板。 首先我们要了解，校内是用的DIV+CSS布局，下面我们来分析一下校内的布局形式。在这里要说的是CSS（Cascading Style Sheets层叠样式表单）这里的重点就是层叠。如果说模板设计是平面设计，那我认为就错了。从欣赏的角度看这是个平面作品，但从设计的角度看那就是三维的。要不怎么有z-index这样的属性呢。再者我们可以这样做个比较，CSS是说的层类似于PS或FW里面的图层，不一样的地方仅仅在于：层交换顺序－－PS可以而DIV＋CSS不可以；Alpha通道－－PS可以而CSS不可以（一些浏览器可以）。我们先不玩花哨的，Blog的布局一般都就这样。先来看看我们页面都有什么内容
这里的header就是头部，里面包含了LOGO；sidebar是侧栏内容；content是中部内容，里面包含着主内容（userRelations是我们的个人照片及好友信息，userupdates就是我们的主内容区）；
footer是底部，里面包含网站的一些版权信息
我们说了这么多都是说的校内网的结构，也就是说是Box和Box之间的关系。而Box是怎么组成的呢？这里已经有高人Douglas做个个Flash模型，里面很明白的说明了margin，background-color，background-image，padding ，border 以及他们之间的关系。 Flash动画
在线播放
当然这些是整个页面的主体部分，每个部分里面还包含一些其他DIV，而这些细节（像横向菜单、侧栏内容面板、主内容模块等等）也是美化我们页面的要点，其实校内网已经为我们设置好了布局内容，我们只是用CSS来调整他们的属性而已，但这个我们慢慢来。先看主体这样先可以在你的脑海里有个大概的样子，为我们下面的制作做好充分的准备。 下面自己做了个Pjblog的结构模型
如上图所示，我们可以看到整个页面的结构和DIV的前后顺序，前面的覆盖后面的（当然也可以是透明的）。
结构如下：
#container 页面全部元素
-#header 顶部导航栏
-#sidebar 左侧导航栏
--#my-search
--#mymenu
-#widebar
--#utility
--#navigation
--#content
---#userRelations
----#userStatus
----#userinfo
----#uservisito
----#userfriendspecial
----#userfrinde
----#uershare
----#userfrienduniv
---#userupdates
----#userprofile
----#useralbum
----#userblog
----#classmate
----#usergroup
----#usertalk
---#reportlink
---#permalink
-#adbar
-#footer 底部导航栏
这里只列出了我们要用到的id，具体位置见上图，至于更详细的，请查看页面源文件
三、制作
3.1了解常用的CSS代码的含义
font:12px Tahoma；
这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；
margin:0px；
也使用了缩写，完整的应该是：
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px 0px 0px 0px
顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，
另外还有以下几种写法：
margin:0px auto；
说明上下边距为0px，左右为自动调整；
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
text-align:center
文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。
background:#FFF
设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：
background:#ccc url('bg.gif') top left no-repeat；
表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
top left
表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center
用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用
background:url('bg.gif') 20px 100px;
表示X座标为20像素，Y座标为100像素的精确定位；
repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
详细说下背景
为什么要特设一节说背景呢？因为在CSS里所用的图片都是以背景的形式存在的。在我们制图、切图的过程中始终不能忘记这点，要做到尽可能的减少图片的体积（现在好多简洁的Skin都实现了不用图片或少用图片），为的是减少下载量，提高页面浏览的速度。
那我们来看看background :
他的属性包括了
background-color 颜色
background-image 图像
background-repeat 重复方式
background-attachment 是否滚动
background-position 位置
而我们制图的时候要注意的是那些呢？首先我们看color和image的关系，始终是color显示在下面image在上面。这个的作用就是某些大块单色的地方我们就不需要用image而是采用color；再个就是repeat，他可以让图片以X或Y重复或不重复的方式显示。这个的作用就是某背景有这样的重复的我们切图的时候宽（长）只要切1px就可以了；我们要结合页面的结构对这些特性综合运用，要培养自己的3D思维。
这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。
我们准备好了网站素材就进行下一步骤，也是最最重要的环节
四、编写代码
4.1全局式样
终于进入了核心部分，我们将用CSS＋DIV美化我们的Blog。有好多朋友总是问这样一个问题，我怎样做Skin。我这里想说的是你先要了解CSS和DIV的关系。DIV就像房子的骨架（砖墙等等），而CSS就是室内外装潢，你不了解骨架是怎么构成的你怎么去装潢呢？还有要说的重要的一点是CSS的特点之一，后面定义的取代前面定义的。比如说我在全局式样里定义了字体颜色是红的，而在后面主体里面定义了颜色是蓝的，那我们看到的就是蓝的。
我们进入正题，先说全局式样（在Pjblog里面是Skin文件夹下面的global.css文件）。这里我们可以对整个页面的特定标签定义外观。特定标签比如body、img、select、th等等这些是内置标签。这里的式样对里面的内容和DIV有效。看代码（里面为CSS代码，看作是DIV布局，以后都是用这种可运行代码表示，不在重复）
通过预览我们可以看到一个背景式样了，那其他的说怎么没提现呢。那是没有内容在里面，你可以试着在之间添加代码或文字看看。你也可以改变式样里的属性看看起了些什么变化（如果你不知道属性是什么，建议你看看上面的《苏昱式样表中文手册2.0》）。你可以在涂鸦板里添加#profilePage {background-color:#000}代码看看，背景是不是成黑色的了。是不是感觉有点成就感呢（我当时就感觉到了!）。千万不要拘束于这几个标签。
接下来我觉得整个页面有很多多余的部分，比如广告，很影响美观，应该隐藏，就用到display:none属性。例如添加#permalink,#adbar,#logo{display:none;}隐藏底部的链接和侧栏广告，继续根据ID标签隐藏不必要的部分。
再接下来该修改基本链接的样式了，例如：
a:link {
color: #fff;
text-decoration: none;
}
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #cc3300;
text-decoration: underline;
}
a:active {
color: #fff;
text-decoration: none; }
4.2主体式样
我们把全局式样看作是body的话，那就把主体式样看作是#container。说到这里我们可能有点明白了CSS的编写其实是一个细化的过程。为什么这么说呢？你看#container其实是包含在body里的，而我们以后说的都是包含在#container里的。
通过上面的模型可以看出，#container里包含了#header、#widebar、#footer等标签，通过这几个的定义我们就能做出自己想要的效果了。
继续添加代码： #container{width:880px}这样主体宽度980px； #header{height:80px;background:url(
) no-repeat center} 这样设置头部图像BANNER；移动sidebar位置#sidebar{position: absolute;top: 500px;left:280px}
；加宽#widebar{width:760px;float:none;margin:auto}主体上我们大概就是这个样子吧，根据自己的想象任意发挥吧。
4.3内容式样
内容样式里的内容比较多，仅举几例来说明一下
1.修改状态： #userStatus{
background-color:transparent;border-bottom-color:#000;} background-color:transparent的意思是背景色透明
2.修改标题背景.box h3{background-image: url(http://fm231.img.xiaonei.com/pic001/20071026/05/20/large_105e170.jpg);
background-repeat: no-repeat;background-color:transparent;height:40px;color:red}这里主要说明一下.box h3意思是h3继承属性，意思是只有在.box类标签内才有作用。
CSS关键就是要领略“叠层”二字，并且有子父关系，他们之间有继承性，就是说你的定义了span{color:"blue";}后，那以后的span元素就全部显示蓝色了，这样就不需要一个个的元素来定义了。比如标题模块一样，先定义一个全局的类元素（box），这样大大减少了代码的冗余。那如果说我在这一批元素里面的某一个或几个是需要特别显示的呢？那就再使用侧栏的模块ID来特别定义一下，这就是CSS的解决冲突的规则，了解了这两点就可以写出比较明朗的CSS代码了。刚开始接触的时候，总会有那么一些些不理解，常常找不到要修改的标签，经过反复调试，领略了这些，相信你想修改页面上的任何内容都能得心应手了吧。
说到这里我想大家都觉得有些累了吧，我想再讲下去也没什么太大作用了。毕竟有些人还是喜欢拿来主义，喜欢用别人做好的成品，如果你是个用心努力的人，希望本文对你有帮助，本人水平有限，再加准备仓促，突来灵感就写了这个教程。感觉讲解有些不到为，但我想如果你想成为真正的高手，那只有通过自己的不段努力，不段摸索，才能制作出优秀的作品。本教程也主要是为了针对那些不太明白的人而写，第一次做教程难免遗漏错误。望大家还能多多批评指正。
为了作为补充，搜集了一些关于校内的经典教程，我也是靠着这些入门的。
