加入博客改造小组,让你的博客变得更加赏心悦目。
你可以随时更换Skin,来适应对外观的要求,但是仅仅的更换数量有限的Skin是无法满足现在的个性化需求。不过不必担心,除了Skin更换功能之外,更为高级使用者提供了几乎完全控制外观的可能(前提,你要对CSS和HTML有相当的了解)。
首先需要说明的是.Text的Skin全部使用了无表格定位(Tableless Layout),也就是说整个页面内容的定位是不依靠Table完成的。而目前90%的网站的页面内容的定位(Content Layout)差不多都是使用表格的嵌套实现,这样将会导致很多问题,甚至成为设计人员的恶梦,而.Text的Skin中,取而代之的是div,它和table一样也是HTML元素中的一种。
接下来我们需要大概明白几个东西,他们是CSS、div。
CSS是CascadingStyle Sheets(层叠样式表单)的简称,用来控制字体、颜色、位置等等,被控制的对象可以是font、div、td、tr、p等等HTML里面的元素。
DIV你可以把它看做是1个容器,它用来装载文字、图片等等内容。
人靠衣装这句话想大家都听过,我们拿来做个形象的比喻,人就是内容,衣服是由布做出来的,布就是DIV,CSS算做制衣工厂。这样的话,同样的人(内容),同样的布(DIV),不同的制衣工厂(CSS)最后给我们的感觉是完全不同的。
默认情况下DIV在页面中是1个矩形的不可见区域,代码是
。而在实际使用中,你看到的是类似 的形式。注意出现两个参数id和class,它们的作用就是DIV找到相应的CSS,建立对应关系。CSS通常情况是一个后缀名为CSS的文件,通过类似的代码将CSS导入大量的页面,这样只需修改1个文件,就能控制成百上千的页面。
进入实战阶段,我将拿我的blog的首页做具体说明,我的blog使用的skin是LuxLight(可以在Options/Configure/Display Skin中找到你当前使用的Skin),请同时注意Options/Configure页面中有一个大的文本输入框名字是Custom CSS Selectors,它一会儿将要承担自定义Skin的核心工作。
下面是LuxLight首页源码,我简化了部分代码,这样可以更容易说明问题。
上面的代码就是我Blog的首页去掉内容后简化得到,可以看到这里出现了DIV的嵌套,即id为container的div包含其他全部的div,id为sidebar-a的div包含id为calendar的div。