【教程】和讯博客相册模块字体、高度、排版css代码- 博客{tx}大全-博客 ...
【教程】和讯博客相册模块字体、高度、排版css代码 [原创 2010-03-13 12:05:19]   
“和讯博客相册模块”如果做得好,将给博客带来很高的访问量。问题是“和讯博客相册模块”系统默认的是显示六个专辑,每个像册专辑(包括专辑名称)的高度是170px左右;这样,如果将相册模块放在个人门户两边,将显示1020px高度的超级摩天大楼,如果放在中间的话,其高度也非常可怕,不利于个人门户的排版。本文就相册模块的专辑名称的字体字型、字体大小、单个相册专辑图片的大小、除去单个相册封面的上下间隙(减小相册模块的高度)、相册模块高度的限制(例如只显示一行等等,尤其是放在两边显示的时候)、单行全部显示六个相册专辑等等问题,通过修改自定义CSS来实现其相关效果,下面大家看看修改前和修改后的效果比较(本文代码适合相册模块放在左右或者中间,大家注意调整里面所说明的参数即可!):

修改前:(每个相册专辑,存在上下空隙;相册专辑名称字体大小、字体字型无变化、多行显示)

修改后效果1 (每个相册专辑封面图片大小缩小;一行显示全部六个专辑,通过修改参数,可做到一行显示1个、2个、3个、4个、5个专辑;)

修改后效果2(只显示一行,放在两边可以通过修改高度,显示一行、两行、三行、四行、五行、六行)

 修改改后效果3: (除去空隙以减小相册模块的高度、字体字型变化)

     那么如何实现和讯博客相册模块的这些个性化效果呢?具体步骤如下:

1.登陆你的个人门户--进入家园--门户设置--自定义css--找出以下关于相册专辑的相关代码:

#PhotoDivItem {
 text-align: center ;
}
#PhotoDivItem img {
 margin: 5px;
}

2.把以上代码替换为以下全部红色代码保存,即可。

#PhotoDivItem {
 text-align: center ;
 height:120px;   /*相册模块显示一行,见“修改后效果2”,如要“修改后效果3”,请删除“height:120px; ”或修改数字120为250*/
 font-weight: bold;  /*增加此行,本行解释:每个相册专辑名称的字体粗细,可把bold换成其他字体类型*/
 font-family: 宋体;  /*增加此行,本行解释:每个相册专辑名称的字体类型。可把黑体换成其他字体*/
 font-size: 12px;  /*增加此行,本行解释:每个相册专辑名称的字体大小。可把12换成其他字体*/     
}
#PhotoDivItem img {  
 margin: 0px;  /*原来5*/
 height: 100px; /*每个相册专辑的封面图片的高度,数字100可修改*/
 width: 150px; /*每个相册专辑的封面图片的宽度,数字150可修改*/
}
#PhotoDivItem #album li div{ height: 100px; width: 150px;}  /*“每个相册专辑”自己显示出来的高度和宽度*/
#PhotoDivItem #album li td{  width: 150px; height: 100px;padding: 0; } /*调整height: 100px;中的数字100与每个相册专辑的封面的图片高度数字100一致,可以保证每个相册专辑封面图片顶端和底无空隙*/
#PhotoDivItem #album li{ float: left; width: 150px; overflow: hidden; margin: 0 7px;} /*150为每一个相册专辑所占的宽度,调整width: 150px;中的数字大小可实现单行或者多行排版效果;margin: 0 7px;中的数字7为两个相册专辑之间的距离*/

使用说明:1.代码中bold为字体加粗和不加粗,您也可以替换为normal、bold、bolder、lighter 。 2.代码中为字体类型,您可替换为以下字体类型Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆等。

    下面附“修改后效果1”的代码:

#PhotoDivItem {
 text-align: center ;
}
#PhotoDivItem img {  
 margin: 0px;  /*原来5*/
 height: 75px; 
 width: 75px;
}
#PhotoDivItem #album li div{  height: 75px; width: 75px;} 
#PhotoDivItem #album li td{   width: 150px; height: 75px;padding: 0; } 
#PhotoDivItem #album li{ float: left; width: 75px; overflow: hidden; margin: 0 1px;}

下面可以不看,本博主备用另外附中间双栏其他效果:

#PhotoDivItem {
 text-align: center ;
           /* height:120px;  整个相册模块的高度,调整数字可让相册显示一行,也可显示两行等*/
           font-weight: normal;
           font-family: 宋体;
           font-size: 12px;  /*12*/        
}
#PhotoDivItem img {  /*相册模块*/
 margin: 0px;  /*原来5*/
           height: 80px; /*每个相册专辑的封面图片的高度*/
           width: 140px; /*每个相册专辑的封面图片的宽度*/
}
#PhotoDivItem #album li div{  height: 80px; width: 140px;}  /*每个相册专辑所占有的高度和宽度*/
#PhotoDivItem #album li td{   width: 140px; height: 80px;padding: 0; } /*调整height: 100px;中的数字100与图片高度一致,可以保证每个相册专辑封面图片顶端无空隙*/
#PhotoDivItem #album li{ float: left; width: 140px; overflow: hidden; margin: 0 7px;} /*每一个相册专辑所占的宽度,margin: 0 5px;中的数字2为两个相册专辑之间的距离;调整width: 150px;中的数字可实现单行或者多行排版效果*/

郑重声明:资讯 【【教程】和讯博客相册模块字体、高度、排版css代码- 博客{tx}大全-博客 ...】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——