“和讯博客相册模块”如果做得好，将给博客带来很高的访问量。问题是“和讯博客相册模块”系统默认的是显示六个专辑，每个像册专辑(包括专辑名称)的高度是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;}

本文来自: 玩转博客:http://wanblog.blogbus.com 原文地址：http://wanblog.blogbus.com/logs/54619328.html