天下家园

CSS栏目式布局效果（最终完美版全程图解）

关键词： CSS    分栏    图解                                          

作者：逍遥赵                                    

CSS栏目式布局（见上图）是一种十分清爽便捷的模板式个性化布局方式，和传统的日志罗列方式相比，CSS栏目式布局具有信息量大、主题排布清晰、界面清爽简洁、自动加载、更新文章标题等优点，一经推出便广受博友好评，一时间倍受推崇，许多博友纷纷效仿并各自推出了具有自己风格和特色的CSS栏目式布局。今天，我就来把CSS栏目式布局的制作方法详细告诉广大博友，本文采用全程图解的方式，代码中也有详细的注释，相信广大博友一定能够轻松上手。

CSS栏目式布局贡献及实践光荣榜：

在CSS栏目式布局的推出和制作中，以下博友做出了极大的贡献，特此表彰！他们是——

   邻居——CSS栏目式布局的创使人。

           个人博客： http://myok.blogchina.com/

      DOZB——为CSS栏目式布局添加了自动更新功能并进一步完善了CSS栏目式布局的功能，同时为CSS栏目式布局写了注释。个人博客：http://dozb.blogchina.com/

      逍遥赵——对CSS栏目式的宣传起了一定的推广作用，简化了邻居和DOZB的CSS栏目式布局制作代码，并对其进行了进一步的总结并写了注释。是第一个将CSS栏目式布局的标题栏由八个扩大到二十个的博友。个人博客：http://bimzcy.blogchina.com/

   黑老虎——对CSS栏目式标题栏的渐变色进行了研究。是第一个将CSS栏目式标题改为其它颜色的博友，也是第一个将CSS栏目式布局的图片改成其它图片的博友。个人博客：http://yanhao.blogchina.com/

      Hehe——是第一个使用CSS栏目式布局的女博友，对CSS栏目式布局的宣传起到了一定的作用，同时也对CSS栏目式布局的下沉问题进行了研究。个人博客：http://aheshake.blogchina.com/

操作步骤：

第一步——添加CSS渐变色标题栏：登陆个人博客后台，点击“模板设置” ，点击“模板DIY” ，在“CSS原码”的文本框

中输入以下内容：

.mydiv1 {

 BORDER-RIGHT: #94a6bd 1px solid; PADDING-RIGHT: 0px; BACKGROUND-POSITION: 10px 25px; PADDING-LEFT: 0px; FLOAT: left;  PADDING-BOTTOM: 0px; WIDTH: 257px; LINE-HEIGHT: 150%; PADDING-TOP: 0px; BORDER-BOTTOM: #94a6bd 1px solid; BACKGROUND-REPEAT: no-repeat

}

.mydiv2 {

 PADDING-RIGHT: 0px; BACKGROUND-POSITION: 10px 25px; PADDING-LEFT: 0px; FLOAT: left;  PADDING-BOTTOM: 0px; WIDTH: 257px; LINE-HEIGHT: 150%; PADDING-TOP: 0px; BORDER-BOTTOM: #94a6bd 1px solid; BACKGROUND-REPEAT: no-repeat

}

.myimg {

 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: right; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 38px; PADDING-TOP: 6px; HEIGHT: 7px; BORDER-RIGHT-WIDTH: 0px

}

.mybg_01 {

 PADDING-LEFT: 5px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorStr:#ffff0000,EndColorStr :#ffffff00,GradientType:1); COLOR: #ffffff; PADDING-TOP: 2px; HEIGHT: 20px; BACKGROUND-COLOR: #ffffff

}

然后点击“保存修改”，我们即完成了CSS渐变色标题栏的添加

（有关第一步CSS代码的分析讲解：

.mydiv1和.mydiv2分别是左、右两个CSS渐变色标题栏的生成代码，.myimg是安置和生成标题栏右侧“more”标志的代码，而.mybg_01则是生成渐变色的代码。下面具体讲解一下它们的主要属性参数：

.mydiv1和.mydiv2中，WIDTH:用来控制标题栏的宽度。由于不同的模板宽度不一样，可能会因为有的模板宽度过窄而导致CSS栏目下沉的情况。一旦出现这种情况，大家可以按实际需要来更改WIDTH后面的数值。

.mybg_01中，startColorStr和EndColorStr后面的颜色代码用来控制标题栏的渐变颜色【所谓渐变色，就是指定一个开始颜色，指定一个结束颜色，整个背景便从左到右由开始颜色向结束颜色逐渐变化，整个背景的颜色是动态连续的，越接近右边其颜色就越接近结束颜色，越远离开始颜色，是一种常用的网页艺术修饰特效】，其中startColorStr就是开始颜色，，其后面的颜色代码#ffff0000是红色的颜色代码，而EndColorStr则是结束颜色，其后面的颜色代码#ffffff00则是黄颜色的代码，这样设置后，整个标题栏便从左至右呈现由红色到黄色的渐变。如果你想将标题栏的渐变色设计成自己喜欢的颜色，那么只需将startColorStr和EndColorStr后面的颜色代码分别修改成自己喜欢的颜色代码即可。）

第二步——在记事本中改写以下代码(//旁边的文字是注释部分)：