终于忍受不了首页的枯燥，决定加个图片幻灯变化一下。安装幻灯插件“Bcastr幻灯片”，然后在divMain中新加一个模块divtop2，把幻灯代码和热文排行的代码加进去，具体怎么引用就不说了，看插件的说明就行，之所以要再加个文章列表插件的热文排行，主要是为了塞满空间，不留太多空白。
Bcastr的设置到网上自己找找，插件上的附带的参数说明链接已经失效了，不过这个插件中没有设置修改幻灯显示大小的地方，只有手动到文件中修改，在include文件夹中的bcastr.asp里修改，原始大小是200X170，可根据需要调整。
在修改过程中，顺便学习一些CSS的知识。边框属性(border)用来设定一个元素的边线；边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离；间隙属性(padding)是用来设置元素内容到元素边界的距离；margin和padding都有4个值，顺序为上、右、下、左边距；width和height是元素内容宽与高；border-bottom下边框的样式。
今天调了一上午，只整了首页，下午一鼓作气搞完分类页，先记下来，省得忘了。
在default.css中增加：
在default.html的<div id="divMain">后面插入：
#divtop2{
width:738px;
margin:15px 0 10px 0;
padding: 0;
text-align:left;
float:left;
background:#ffffff;
height:250px;
border-bottom:1px solid #e0e0e0;
}
在default.html的<div id="divMain">后面插入：
<div id="divtop2">
<div style="float: left;margin-right:40px;margin-bottom:10px;margin-left:20px"><#CACHE_INCLUDE_BCASTR#></div>
<h5>热文推荐</h5>
<ul>
<#CACHE_INCLUDE_RANDOMSORTTOPHOT#>
</ul>
</div>
z-blog中<#articlelist/category/id#>代表分类编号，这个只能catalog.html及其相关模板中引用，也就是列表页，在文章列表插件的分类热文代码中将会用到它；<#article/category/id#>也是分类编号，不过它是在文章模板页中使用，如b_article-istop.html，b_article-multi.html，b_article-single.html。一开始我把这两个搞混，文章列表一直不出来，只出现代码。更多zblog模板标签参考：http://wiki.rainbowsoft.org/doku.php?id=themes:template
在catalog.html的<div id="divMain">后面插入：
<div id="divtop2">
<div style="float: left;margin-right:40px;margin-bottom:10px;margin-left:20px"><#CACHE_INCLUDE_BCASTR#></div>
<h5><#BlogTitle#>热文推荐</h5>
<ul>
<#CACHE_INCLUDE_BF_TOPHOT_CATEGORY_<#articlelist/category/id#>#>
</ul>
</div>
附参数设置：
影片信息
channel.item 图片信息，可以设置多张图片
channel.itme.image 图片地址参数，此参数是唯一必须要有的参数，其他参数都有默认参数
channel.itme.link 对应图片的连接
channel.itme.tilte 对应图片的标题
设置
config.roundCorner 图片的圆角
config.autoPlayTime 图片切换时间，默认值是8，单位秒
config.isHeightQuality 图片缩小是否采用高质量的方法，默认值false
config.normal 图片的混合模式
config.transDuration 图片在切换过程中的时间，默认值1，单位秒
config.windowOpen 图片连接的打开方式，默认值”_blank”,在新窗口打开，也可以使用”_self”,使用本窗口打开
config.btnSetMargin 按钮的位置，文字的位置，用了css的margin概念，默认值”auto 5 5 auto”，四个数值代表 上 右 下 左 相对于播放器的距离，四个数值用空格分开，不需具体数值用”auto”填写 ，比如左上对齐并都有10像素的距离可以写 “10 auto auto 10″, 右下角对齐是”auto 10 10 auto”
config.btnDistance 每个按钮的距离，默认值20
config.titleBgColor 标题背景的颜色，默认0xff6600
config.titleTextColor 标题文字的颜色，默认0xffffff
config.titleBgAlpha 标题背景的透明度，默认0.75
config.titleFont 标题文字的字体，默认值”微软雅黑”
config.titleMoveDuration 标题背景动画的时间，默认值1，单位秒
config.btnAlpha 按钮的透明度，默认值0.7
config.btnTextColor 按钮文字的颜色，默认值0xffffff
config.btnDefaultColor 按钮的默认颜色，默认值0×1B3433
config.btnHoverColor 按钮的默认颜色，默认值0xff9900
config.btnFocusColor 按钮当前颜色，默认值0xff6600
config.changImageMode 切换图片的方法，默认值”click”,点击切换图片，还可以使用”hover”,鼠标悬停就切换图片
config.isShowBtn 是否显示按钮，默认值”true”
config.isShowTitle 是否显示标题，默认值”true”
config.scaleMode 图片放缩模式: 默认值是”noBorder”
“showAll”: 可以看到全部图片,保持比例,可能上下或者左右
“exactFil”: 放缩图片到舞台的尺寸,可能比例失调
“noScale”: 图片的原始尺寸,无放缩
“noBorder”: 图片充满播放器,保持比例,可能会被裁剪
config.transform 图片放缩模式: 默认值是”alpha”
“alpha”: 透明度淡入淡出
“blur”: 模糊淡入淡出
“left”: 左方图片滚动
“right”: 右方图片滚动
“top”: 上方图片滚动
“bottom”: 下方图片滚动
“breathe”: 有一点点地放缩的淡入淡出
“breatheBlur”: 有一点点地放缩的模糊淡入淡出，本页的例子就是这个
config.isShowAbout 是否显示关于信息，默认值”true”
>> 除非说明均为原创，如转载请注明来源于http://www.stormcn.cn/post/549.html
