伴随着越来越多的Blog出现，新的问题随之而来：我的Blog经常与别人的“撞衫”——使用了相同的模板。对此您一定很苦恼，希望通过更具有个性的网上空间来展示自我。这就遇到了如何修改模板这个问题，又感到有些无从下手。下面以X-Space的官方网站（x-space.discuz.net/space）
为自己的个人空间设计个性模板(4)
四、套用模板
图片切割完以后，开始通过CSS文件将图片应用到页面的外观中。由于我们这个模板的大部分样式跟"黄色成熟"模板类似，可以在"黄色成熟"模板的CSS基础上进行修改。
1、页面背景的修改
默认的页面背景是带有渐变的浅蓝色，这是由于space.css中规定了：
body {
background: #F5F9FC url(../images/default/background_top.gif) repeat-x top;
……
}
把body重新定义为：
body {
background: #717171 url(background_url);
}
(注意：请把background_url替换为您上传之后的页面背景图的URL地址。)
2、页面头部样式的修改
页面的头部区域是放置在一个id为header的div中，修改头部样式，需要修改CSS中对#header的定义。就header这个层，包括这个层以内的结构，我们需要清楚以下两点：
我们看到的空间名称、空间URL以及设为首页与复制URL的链接，统统都是放在一个id为spacename的div中的
页面导航条是一个无序列表，同时又放置在一个id为menu的div中
下面对照修改好的样式表逐条讲解一下：
#header {
background: url(headerimage_url) no-repeat left top;
/*重新定义header的背景图片，换为我们上一步得到的汽车图片*/
height: 310px;
/*重新定义header的高度，我们这个模板的头部比默认的要高一些*/
position: relative;
/*这句是为了使header内部的某些元素需要相对于header层绝对定位*/
}
/*标题*/
#spacename {
position: absolute;
left: 150px;
top: 80px;
/*将spacename层相对于header绝对定位，使之显示在汽车左侧的空旷的天空中*/
}
#spacename * {
color: #000;
/*spacename中所有文字显示为黑色，这样看起来醒目一些*/
}
/*导航*/
#menu {
background: #000;
/*导航条的颜色为黑色*/
height: 35px;
width: 750px;
/*重新定义导航条的宽度与高度*/
position: absolute;
left: 0;
top: 275px;
/*将导航条相对于header绝对定位，使之显示在header的底部*/
}
#menu ul {
margin: 0;
/*去除导航ul的边距，因为在默认模板中是有边距的*/
}
#menu li a {
padding: 0;
height: 35px;
line-height: 35px;
background-image: none !important;
/*以上这几句是对导航链接的重新定义，去处了原有的背景图片，重新定义了宽度和高度*/
}
#menu a:hover {
background: #EDF1D7;
color: #D0824C;
/*当鼠标滑过导航链接时的样式*/
}
现在，页面的头部样式已经完全改好了，与"黄色成熟"模板的CSS相结合，在细节上再修饰一下，一套新的汽车风格的模板便可以付诸使用了。当然，本文给出的只是一次简单的小修改，要充分体会到X-Space强大的模板定制功能，制作出更复杂精致的模板，还需要我们继续学习，不断探索。
网友评论