用X-Space打造自己的个性空间－如何制作个人空间的CSS

了解X-Space的模板机制bl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼* J; v0 ]9 | Y' _& J7 C* I% z
开通了自己的个人空间之后，就可以先到后台去熟悉一下X-Space的操作，针对本文来说，重点是了解X-Space的模板机制。
6 B: F' J" e8 L; S9 _||女性向游戏 耽美bl游戏 网王舞台剧 游戏汉化 漫画 同人志 小说
( t3 v; b8 K8 h8 T* ]bl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼X-Space内置了众多模板可供选择，我们可以仔细研究一下这些内置模板，从而了解到X-Space的模板机制。☆翼の夢★舞の城☆聯盟 Dream of Wings & 5C+ k" z, r0 {$ `) x. X
www.otomedream.com2 f9 O: s' v2 [5 q9 q% b
X-Space紧跟互联网发展趋势，页面采取XHTML+CSS的方式，实现表现与结构相分离。可能有些朋友一听到XHTML+CSS就感到有些无从下手，其实这大可不必。相反，一旦您充分了解到XHTML+CSS的奥妙，理清X-Space的模板结构之后，就会感到修改模板是如此得心应手，体会到Web Standard的强大魅力。
; t+ J! J5 e2 O) F# ^* F☆翼の夢★舞の城☆聯盟 Dream of Wings & 5C漫画,同人志,汉化补丁,汉化版,中文版,简体中文版8 k$ |! w% F% O0 Q1 T4 E
X-Space的每个页面由它自身的结构和控制它外观表现的样式表组成。这句话听上去不太好理解，打个比喻来说，它自身的结构就好比是它的身体，包括头、尾、导航、正文区等等。控制它外观表现的样式表就好比是它的衣服，用来美化它的头、尾、导航、正文区……。结构与表现结合起来，就呈现出现在网页的样子。
0 N- Y" t8 N# ?+ p1 d$ {% w, {0 L2 ybl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼
. H6 x/ v- M& W* qwww.otomedream.com现在回到X-Space的页面，每个页面有其自身的XHTML源代码，这就是它的结构，同时每个页面通过链接的外部样式表（space.css）和本身内嵌的样式表来共同控制外观。外部样式表Space.css是系统内置的，它控制着X-Space的基本显示模式，不能更改。每个模板之所以显示不同，正是由于内嵌了另外一个不同的样式表。我们修改模板的重点也就在于修改这个内嵌的样式表。
2 ~7 b1 ~% F k漫画,同人志,汉化补丁,汉化版,中文版,简体中文版漫画,同人志,汉化补丁,汉化版,中文版,简体中文版+ ]7 Q2 f! T5 N3 I2 w( t
举个例子来说，在默认模板（蓝色经典）中，我们看到空间名称是16px大小，白色的加粗字体，但是我们查看一下页面的源代码，却找不到控制字体颜色和大小的<font>标签。这是因为字体的颜色和大小等样式都属于它的表现，页面中只有一个<h1>和</h1>标签把空间名称括了起来，因为h1代表了空间名称的结构——标题。而这个标题的外观，再通过样式表来加以控制，打开页面中链接的默认样式表space.css，从第101行开始，就能看到所定义的页面标题的样式：只要弄明白了这一点，其他的所有问题都会触类旁通。几乎页面中所有的颜色、背景图片、文字大小等样式都是通过样式表来控制的。我们要自己修改模板，只需在自己的样式表中重新定义样式，以覆盖默认模板中的样式即可。例如我们希望页面的大标题再大一些，变成18px，只需在我们自己的模板中加一条：三、设计模板www.otomedream.com9 N! z3 K4 N: q, i$ i" }
了解了X-Space的模板机制之后，就可以开展实质性的工作了。首先需要把自己心目中的模板样式设计出来，这一步需借助Photoshop或者Fireworks之类的图像处理软件。如果您对于图像处理不太在行，可以借用一下网上的优秀Blog模板。现在网上各类的Blog模板何止万计，不过一旦启用了他人设计的模板，别忘记在您的网站上加一条版权署名。
& m; u0 J q+ V5 {6 E1 N9 h8 Wbl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼
2 l% i2 i# a8 x! Z: jbl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼本文在系统自带的“黄色成熟”模板的基础上，重新设计了页面头部的样式，使之变成一套简单的汽车风格的模板，旨在讲解X-Space的模板修改技巧，更复杂的模板制作还需大家深入学习。在前期的设计中不必将所有细节都通过Photoshop实现，只做出框架即可：
7 W, k/ ]& [. T& O; A% k
! n/ T& L- m$ M6 o; b, i1 l☆翼の夢★舞の城☆聯盟 Dream of Wings & 5C
0 j+ P* a$ a( E" j9 y9 @+ E漫画,同人志,汉化补丁,汉化版,中文版,简体中文版 bl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼& _* [. g( H/ Z) J, C6 P+ k6 D' @
www.otomedream.com2 @& ~% Q! F* P6 v# T* x
☆翼の夢★舞の城☆聯盟 Dream of Wings & 5C' |" e& i! E, b" t( j
图4 前期的模板框架www.otomedream.com5 j; K. ]8 c# \

: g& ?4 k+ ?* i* I3 Jwww.otomedream.com对自己的设计框架感到满意之后，就可以进行切图。针对这个模板，需要两张图片：
* K( o$ ?8 H& v r1、页面底纹：整个页面的灰色斜线底纹，按照重复的规律，截取面积尽可能小的一块放到页面中平铺即可。
) @* _6 t+ Y# S) m$ q. L$ E: k2、头部图片：完整截取顶部的汽车图片。
: i( o! t6 n3 @! ~1 O+ P||女性向游戏 耽美bl游戏 网王舞台剧 游戏汉化 漫画 同人志 小说其他图片由于与系统自带的“黄色成熟”模板相同，可以直接使用。
0 k. V+ d8 S' S漫画,同人志,汉化补丁,汉化版,中文版,简体中文版
, n) p9 \( C! s! k: V切割完的图片总不能只是存放在自己的电脑中，需要找一个空间传输上去，这对于X-Space来说不成问题，因为它内置了相册功能，把切割完的图片直接上传到自己的相册中即可，记住上传后的URL地址，以便在接下来的步骤中使用。
, v# @* W7 N8 O0 Y! Rwww.otomedream.combl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼" i S" n( E' H0 J: v
四、套用模板
V4 v5 A2 m5 l* B- p( Y' b; N||女性向游戏 耽美bl游戏 网王舞台剧 游戏汉化 漫画 同人志 小说图片切割完以后，开始通过CSS文件将图片应用到页面的外观中。由于我们这个模板的大部分样式跟“黄色成熟”模板类似，可以在“黄色成熟”模板的CSS基础上进行修改。☆翼の夢★舞の城☆聯盟 Dream of Wings & 5C7 K4 A. g/ K0 z8 H R$ `& B

8 k: L: C$ {* e1 T1 Abl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼1、页面背景的修改漫画,同人志,汉化补丁,汉化版,中文版,简体中文版) v: [5 I& m" ]8 D: i
默认的页面背景是带有渐变的浅蓝色，这是由于space.css中规定了：我们把body重新定义为：注意：请把background_url替换为您上传之后的页面背景图的URL地址。
. r0 \0 v ?* \, G, Tbl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼☆翼の夢★舞の城☆聯盟 Dream of Wings & 5C- z. g& \5 r' G8 {, t- [
2、页面头部样式的修改
$ s- U. E& ]" e1 b漫画,同人志,汉化补丁,汉化版,中文版,简体中文版页面的头部区域是放置在一个id为header的div中，修改头部样式，需要修改css中对#header的定义。就header这个层，包括这个层以内的结构，我们需要搞清除以下两点：
! l) f# X3 r6 j. v5 E漫画,同人志,汉化补丁,汉化版,中文版,简体中文版1.我们看到的空间名称、空间url以及设为首页与复制url的链接，统统都是放在一个id为spacename的div中的
/ |/ g% ~( \) n6 F: V( e8 w2.页面导航条是一个无序列表，同时又放置在一个id为menu的div中
* E7 h6 \' \+ K! Ubl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼☆翼の夢★舞の城☆聯盟 Dream of Wings & 5C# q- [% h8 z/ k2 }: d" G+ n
bl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼" Q( M, O3 H2 V2 ]2 o+ o- D
下面我对照修改好的样式表逐条讲解一下：现在，页面的头部样式已经完全改好了，与“黄色成熟”模板的CSS相结合，在细节上再修饰一下，一套新的汽车风格的模板便可以付诸使用了。当然，本文给出的只是一次简单的小修改，要充分体会到X-Space强大的模板定制功能，制作出更复杂精致的模板，还需要我们继续学习，不断探索。bl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼& H Q" a7 Q* U5 |& s2 x
www.otomedream.com" M6 G) Z4 F' H2 ^) [9 V8 G

- |! v+ \( v' `" L1 `! x||女性向游戏 耽美bl游戏 网王舞台剧 游戏汉化 漫画 同人志 小说
6 B/ ~2 F e0 g" y; U; p( j. y9 n. D5 z
* i; r) C5 m3 a' y通过以上的方法，大家可以得到一个新模板的CSS文件。然后登录个人空间后台-->模板-->编辑我的风格主题 bl小说,耽美小说,同人本,咎狗之血,花町物语,天使羽翼2 O2 `- I# J6 B+ U) n/ C
把新的CSS文件黏贴进去覆盖以前的就可以了 。。。
+ a- W2 Z3 t" ^( W& Y* U& q* B7 U. f||女性向游戏 耽美bl游戏 网王舞台剧 游戏汉化 漫画 同人志 小说最后要说的是，修改完后，有两个选项，一个是保存修改，一个是另存为。
3 |* D4 `% f' C I漫画,同人志,汉化补丁,汉化版,中文版,简体中文版保存修改，仅仅针对自己当前的模板生效。
4 ?9 V/ o. U6 y/ G" H/ Y# D☆翼の夢★舞の城☆聯盟 Dream of Wings & 5C我们一般建议大家选择后者，因为还可以选择把自己的新模板共享，方便其他人使用！