車底裝甲

终于写完了：）回头发现篇幅好像有点长……难怪有人叫我“叔叔”

针对不同层次的圈友，我划分一下颜色，刚来圈圈完全没有接触过的朋友可以看没有底色的部分，对圈圈有一点了解，会自己改版面及一定设计能力的看黄底标题部分，已经熟练掌握圈圈装修流程的看蓝底标题部分，红色字体为重点及代码。OK：）

~~~~~~~~~~~~~~~~~~~~我是分界线~~~~~~~~~~~~~~~~~~~

10月17日 晴 郁闷地忍受着便秘似的网速将素材上传完毕。

准备写一篇关于我第四个模版的制作详解，素材已经做好，先放这。

文字和注释都会慢慢写起来：）触类旁通手把手教会你mop圈圈的首页。

10月18日 晴 就着良辰吉月开始第一讲：）

前言

咳咳~

今天天气不错，隔壁学校的新朋友Amy同学的第一个个人主页终于基本完工，肥月（我的web日记本里的学设计的客串讲师）说我做这个叶面的动机是“不怀好意”……痛斥我用圈圈的资源借花敬佛，我无语地痛心疾首……

我承认……我的确是不怀好意……

不过，我不怀好意之余还惦记着广大的圈友啊，她能知道么，我做这个叶面是为了更熟悉圈圈的叶面设置，好跟大家更好的交流啊！上次写的CSS教程，看懂的人没几个……后来自己看了看……发现自己都一头雾水，毕竟闻道有先后，术业有专攻啊！但懒惰不能成为无知的借口，所以我决定今天在此改过自身，非常罗索详细手把手地写下此傻瓜式教程，谁再说看不懂我跟谁急！

废话少说，北京的大街小巷已经慢慢开始铺满落叶，圈友催得挺凶，抓住秋天的尾巴，以这个新鲜热辣的Amy同学的首叶作为例子，开讲。

注：本人只是网络设计菜鸟，小小mopCSS设置里仍然有不甚明了的地方，不当之处请高手们多多见笑海涵包容，本日记教程也只针对mop主页，如有雷同，实属抄袭。

总论

我这次的版面是以photo style的默认模版做的，朋友圈共设有6个模版，其中default是我一直用的版面，忧点是编辑条比较多，版面为二分栏式，叶面较长形式多变，缺点是风格不好把握，单用css修饰不容易出效果；然后fangle、friends、music、photo分别对应于以新鲜事、朋友留言、音乐、相册为主的版面，分别只在第二栏第三项近黄金视点处的栏目侧重点不同，所以他们的CSS设置是大同小异的，优点是CSS设置方便，版面紧凑，不用编辑就已经颇有看头，缺点是版式变化小，剩下一个是old，圈圈测试版一直使用的版面，由于用的人已经比较少，所以它也顺应地被置于高阁，每一个默认的CSS的最后半段语句都可以对它进行设置，怀旧复古的朋友可以研究研究，暂时喜新厌旧的我不在此讨论……在此我编辑的尺寸及图片完全只针对photo style版本。

要编辑CSS，首先要有编辑的工具，正常的网络制作软件（例如Dreamweaver、放屁猪<frontpage>)都可以打开，但很不方便，有杀鸡用牛刀之感，故普通圈友用windows自带的记事本或者写字板就足已，有条件的在网上下载一个editplus，挺便利的，对自己的眼睛也好些，视感也比较舒服，推荐。在此用editplus编辑。

其次要准备绘图软件，推荐Photoshop，firework也不错，做切图和透明gif很方便，如果要求不高，用其他的也行，最基本的需要一个取色工具，我用的是“取色精灵”（点击下载），绿色软件，傻瓜用法，想要网页里的什么颜色一共点三次鼠标就能把相应色码复制到粘贴板，推荐。在此用photoshop和取色精灵编辑。

要编辑圈圈的CSS，首先要了解圈圈默认版本CSS的基本结构，大家下载CSS文件以后用相应软件打开，向下挪一点，可以看到圈圈程序员很体贴地标上了相应的注释，例如： /*banner*/   就是指其下面的语句是控制圈圈banner的样式的，如此类推。

大家从photo style的叶面可以看到，叶面在banner下分成三列，每一列的每一个位置的图片、背景、边框、颜色都可以在CSS中进行相应的修改，CSS中也按从上到下，从左到右地作了相应的标注，而如果有朋友想完全打乱圈圈的结构，虽然有实现的方法，但由于过于繁琐，故在此不做讨论和描述。

好，总论到此结束，喝口水，抽口烟……

banner、背景及素材

打开圈圈的个人主页，首先映入眼帘的就是大家的banner，在我看来，banner是首叶的灵魂，是决定你的个性首叶外观上成败与否的关键，就像女子身材无论多么矫健挺拔，却没有一张对得起广大moppers的脸蛋，怎么也不能称其为美女吧？所以，大家应该注重banner的设计与选取，设计好了，往后的版面设计可以事半功倍。

首先，我确定了首叶的主题颜色为神秘瑰丽的紫色，以配合该女士神秘瑰丽的性格……

例如这个模版，我制作的banner如下：

虽然看似复杂，其实只是在photoshop中于紫色底上合成了两张相片，然后添上了名字和MSN，再胡乱用不同的笔刷涂了几笔。

如果还是觉得复杂，圈友们记住将自己喜欢的图片长度在PS或一些制图软件中以ctrl+t自由转换为长是1004px的图片就能适用，有条件的朋友上传前记得要压缩一下图片大小，否则影响叶子的下载速度。

一个赏心悦目配色合理的banner可以为你以后的工作省却许多的思考工作量。因为要做到版式的一致，最简便的方法就是上传banner后直接从banner上提取你需要的颜色然后应用于网页主体中，自然就能形成“浑然天成”的形果。

至于不想思考网页如何配色的朋友，可以点击这里，这是个网上的配色软件，非常好用：）（本链接由妍姐大大友情提供）

*注意：banner（包括其他素材）制作完成后上传到新鲜事，引用地址时需在新鲜事中点击改banner，然后在新窗口中打开的地址才是引用地址，在更换banner窗口直接上传的则没有这个问题，切记切记。

*偏方：如果大家不喜欢banner而钟情于简约，也有办法将banner隐去，方法为：用一个1像素宽，1像素高的透明gif图片作为banner上传（ps制作），然后在css定义banner的高度（原#banner标签为空，可在{}中输入height:0px;）。（本方法也由伟大的妍姐提供，呵呵）

~~~~~~~~~~~~~~~~~~~~我是分界线~~~~~~~~~~~~~~~~~~~

下面讲解背景，CSS中的第一行就是设置背景的，打开CSS，在body的大括号里添加：

background-image:url(‘图片地址‘);

图片地址为你喜欢的图片在网上的可用地址。然后如果是一整幅大图，在后边加上：

background-repeat:repeat;/*背景重复铺置，不重复为：no-repeat*/

background-attachment:scroll;/*背景随滚轴滚动，不滚动为:fixed*/

background-position:center top;/*背景图片位置，此设置为x轴置中，y轴置顶*/

width:XX;length:XX;/*制定图片尺寸*/

如果不喜欢用背景，可以直接设置背景的颜色，也能起到烘托效果，代码为：

background-color:#xxxxxx/*xxxxxx为颜色代码*/

对于背景图，虽然大幅的背景图比较好看，而且能够突出主题，但并不推荐，因为大幅图片延长了叶面的下载速度，同时太华丽的背景也会喧宾夺主，我的首页就是最好的反面教材……自从我换了新的版面以后基本上来我这的朋友就只关心网页的制作问题，从来不关心我本人……可悲……所以有个性，有实力，有文采，有想法，有内涵的圈友们，请尽量别选用过于华丽的背景，不然得不偿失……

附：妍姐提供的无缝背景制作方法，非常实用。我的背景就是以此方法制作的，如下：

肥月说我做的这个首叶唯一败笔就是这个背景，说太土……我承认土……但我就是爱返璞归真的土……“野菊花呀野菊花，哪儿才是你的家……”，将就着用吧：）

*偏方：是不是看主页最上面mop的那条默认导航栏很不顺眼？在default模版中，还可以在CSS添加一下指令将其透明，但使用其他版式的圈友们就吃亏点了，我查了老半天源代码都没找到相应的id或者class，所以其他版本的只能继续不顺眼……

#topFuncNavi{
 background:transparent;
 Filter:alpha(opacity=20);}

数字为透明度，数字越小越透明，不推荐设置成0……不然找不着自己的编辑按钮别怪我……

*延伸：其实从叶面的源代码可以看到还有一些在html中标注的id和class在css中并没有作相应设置，大家有兴趣的都可以研究一下，发展更为个性的设置元素。

10月20日 阴 头昏脑胀第二讲：）

今天一早爬起来上课，走在路上被冻得咬牙切齿，北京的冬天说时迟那时快一下就登陆了，还有一堆忘洗的衣服哀怨地候在墙角，赶紧写完今天的然后洗衣服去……

要做出特色，如果你有足够的时间，除了banner和背景可以做出个性以外，其实每一个编辑框都可以个性化，在众多的圈圈教材里已经知道把叶面透明的方法了吧？换个思路，只要能透明的框框就能添加属于自己的背景，这次我小试了一下，模仿爱戴的个人说明栏做了一个紫色的框框和配套的按钮（其实还做了一些栏目条，但最后觉得不好看，被我抛弃了）嵌入方法将在第三讲说明。这里供大家了解这种思路，抛砖引玉创作更为个性的叶面。

首页配色

初级应用：

为首叶配色，我之前已经阐述过相应的办法，这次再详细说一次，这是我的配色方法，简单直接。首先已经确定了叶子的基本配色，banner也已经放上去了，而且banner的色相各方面都挺满意的，于是出动我的小软件：“取色精灵”（总论有提供下载）轻松地把整个首叶的主体颜色革命掉，以下以我的叶子为例详解：

1、首先当然先打开自己的主页，点自己的头像，弹开新叶面后找“自定义模版”按钮，然后下载photo的默认css文件，然后用写字板打开；

2、回到自己的首叶，看哪块颜色不顺眼，打开取色精灵，然后点击该颜色，右下方出现该颜色及色码，核对无误后双击鼠标，色码就已经复制到粘贴板了；

3、回到已经打开的css，电击编辑—>替换，然后在查找内容中按ctrl+v，之前选定的色码就复制到查找内容中了，然后回到首叶，在banner上用相同的方法吸取你需要转换的目标颜色，粘贴到替换为中，然后选择全部替换；

4、在css编辑中点击文件，保存；

5、在主页自定义模版窗口中点浏览，然后随便取一个名字，上传，应用，就可以发现自己主页上原来看不顺眼的颜色已经换成了自己喜欢的颜色；

6、如此类推，可以轻易换掉大部分颜色，只要手稳些，甚至边框和文字等一些细微的颜色都能如法炮制。熟练以后更可以将全部颜色一次性替换完毕后再进行第4、5步。

扩展：用此全体替换的办法当然不只应用到配色方面，例如还可以用在更换圈圈的边框属性方面，圈圈默认的边框属性为solid（实线），我希望换成dotted（点虚线），只要在查找内容中输入solid，然后在替换为输入dotted，保存,上传，应用，就可以发现所有边框已经变成了可爱的点虚线。除这两种线性以外，还有7种线性供选择，分别为：none（无边框线）、 dashed（由短线组成的虚线）、double（双线）、groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、inset（3D内嵌边框，颜色较深）、outset（3D外嵌边框，颜色较浅）。萝卜青菜各有所好：）

~~~~~~~~~~~~~~~~~~~~我是分界线~~~~~~~~~~~~~~~~~~~

高级：

若要进行个别栏目的颜色编辑，就得稍微知道各个栏目在CSS中的相应位置，而其实默认的css中提供者已经标明了各部分控制代码分别控制哪个部分，例如在css中标注的/*左列第一块儿*/下边的代码就负责控制头像所在的那个框框，如下：

此标注项下分别有三个ID：#myCP；#photoM；#photoM img

要给个别部分栏目配色，就首先要知道浏览器如何通过CSS进行各层的位置控制，方法为：浏览器根据CSS中的叙述顺序由里往外对层进行显示，就是说，如果没有特别属性标注，在同一个母层中后面标示的层会遮盖前面标示的层，因此，在这个例子中，就可以知道：#myCP为深紫色底层；#photoM为头像边框层；#photoM img为头像层。

依此类推，别的栏目的每个层的层叠顺序就可以基本确定，只要细心观察，认真对照，你终有一天会明白工夫不负有心人的道理，发现主页上的每个层都可以与CSS中的每个ID标注(带“#”的条目）或class标注（带“. ”的条目）都能很自然地对应上。

讲到这里，你基本上已经明白了吧？如果想修改某层的色彩，只要在其后的大括号里修改或加入以下代码：background:#xxxxxx;即可，其他的框框也一样，如果修改字体颜色则为：color:#xxxxxx，边框的话就在boder属性后加上颜色代码就行，例如：border:1px dotted #864C89 搞定。

以此方法，大家就可以配置赋有自己个性主体颜色的缤纷主页。

扩展：圈圈现在都流行透明化主叶，让自己的背景显露无遗，在置顶的圈友们的教材中就有许多提到的，故我不再累述，仅提供给大家一个偷懒的方法，在CSS最后输入以下代码即可达到全透明效果：

#myCP,#flinks,#M-PersonalInc,#msgList,#msgList .msg,#frList,#grList,#activities{background:transparent;}

一、当你的首叶颜色编辑完成后，会发现留言版中会有几处非常顽固的蓝色块苟且偷生，圈友们也有几个解决的办法，要解决的朋友可以到邵宇“远去”前的补充教程觅得详细的赶尽杀绝之法：）我用的是图片替代法，在/*留言*/中的#msgList .msg项添入以下代码：

background:url("替代图片的地址") -8px repeat-y #fff;

我的图片为：  

以此图片做y轴重复平铺，get it？

二、制作完成有一个部分是朋友可以看到而自己看不到的，如下：

该区域的ID为：#act div 记得其颜色也得考虑到。

应建议，本新鲜事分做两条，若想进一步了解，请点击小甲“首叶革命”（高级篇）