返回列表 回复 发帖

2.0版本的CSS样式表修改,但是对于现在的也有用

x-paces模版修改教程-超详细版

这里修改的模版范例是比较容易入手的黄色金秋,如果你想修改其它的模板,其实都是大同小异,可以把本教程作为一个参考。不过之前给你提个醒,如果你对CSS一无所知,那么改起来肯定有难度,建议你先到我的博客或者网站建设版块下载我制作的CSS教程,下载地址等下奉上。如果你都懒得学这些,觉得不值得,那也可以,那么下面就跟我一起来改:

第一步:前期准备

1.打开两个浏览器窗口,第一个打开博客首页页面,第二个打开后台登录个人空间管理平台后选择“模版”->“选择新模版”->选中“黄色金秋”确定。在浏览模版中编辑当前使用的模版,然后选中样式表。这是我们就能看到CSS的内容了,这就是我们要修改的部分。你或许会问打开博客首页页面有什么用?因为CSS编辑需要一步一步的刷新来看看自己的效果,如果发现错误所在,以便调整。

2.打开记事本,将CSS中的内容复制进去。这样的目的很简单,给CSS做个备份,如果刷新发现有什么问题,就可以用记事本中的内容去恢复。

3.下载这个色系图:方便后面配色用
  

4.收集你想用来作为背景或者其它图标的图片文件,当然也可以到后面需要用的时候再收集或者临时制作。

第二步:正式修改

1.修改DIV标签

因为这个官方模版是不带背景的DIV设置的,因此,我们需要对DIV部分进行部分的修改。在“我的模版”编辑中,选择“主页面”,然后找到左下角的“显示源代码”,选中前面的方框,这时候我们就能看到一长串的DIV代码了。找到“<DIV id=mainarea>”(不含引号)这行代码,然后在这行代码前面加入下面两行代码:


<DIV class=oncebg>
<DIV id=main>

然后再在所有代码的最后加入“</DIV></DIV>”(不含引号),然后选择提交。

注意:记得每次修改要切换到其它页面的时候都要点一次提交,电脑是不会帮你自动保存这个设置的。

2.重复上面步骤,修改“索引页面”和“内容页面”的代码。

3.下面开始根据CSS代码逐段说明了(其中颜色凡是为绿色的都是注释,图片因为被缩小,有些看不清,请单击在新窗口查看):


后记:每一个CSS的使用说明书在前面提供的《CSS2中文手册》里都有详细说明,希望你有时间能够研究一下。配色的过程其实也相当花时间的,其它的设置,希望大家能举一反三,也可以对照着修改其它的模版。修改的过程还是比较枯燥、也比较花时间(1-5个小时),甚至还会让人感到烦躁,但是学习的过程本来就是寂寞的,只有赖得住寂寞的人才能够学有所成。我希望我做这个教程所花的时间没有白费,所以请你亲自一步一步地去修改,在这个过程中,你才会体会到一种成就感和愉悦的心情。
你瞳孔中的我是什么颜色的呢?
返回列表