|
【教程】喜欢的图书模块双栏/多栏排版代码
来源: 博客特效大全 收藏整理：博客特效大全 hexun.com/yayb
有些朋友喜欢看图书，把自己喜欢的图书名称放在“喜欢的电影”模块，但是随着喜欢的图书的增多，喜欢的图书模块变得越来越高、越来越长，不论放在个人门户的两边还是中间都非常占用空间，而且很不美观。为此以前给出了以《各模块添加滚动条》的方法来缩短“喜欢的图书”模块的高度，但是每次都用滚动条来找喜欢的图书很不方便。本文给出了一种通过修改自定义css代码的方法，把“喜欢的图书模块”进行双栏/多栏排版，非常实用、美观、方便，具体为：当喜欢的图书模块放在左右边两边时，显示成为双栏排版效果；当喜欢的图书模块放在中间时，显示成为多栏排版效果。大家首先看看修改前后的效果比较图：
那该如何实现“喜欢的图书模块双栏/多栏排版”呢？步骤如下：
1.登陆你的个人门户--进入家园--门户设置--自定义css。
2.在自定义css最后面添加上以下红色代码,保存即可：
/*以下是喜欢的图书模块分为两列多列开始*/
/*左侧喜欢的图书分两列修改开始*/
#left_side #BookDivItem div,
/*右侧喜欢的图书块分两列修改开始*/
#right_side #BookDivItem div {
float: left;
width: 90px;/*喜欢的图书两列中的单列宽度*/
line-height: 22px;
background-image: url(http://photo6.hexun.com/p/2007/0721/114195/b_32D8CE9190734CD46C16EFA0B5E5952C.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 11px;
}
/*中间喜欢的图书分多列修改开始*/
#main #BookDivItem div {
float: left;
width: 90px;/*喜欢的电影两列中的单列宽度*/
line-height: 22px;
background-image: url(http://photo6.hexun.com/p/2007/0721/114195/b_32D8CE9190734CD46C16EFA0B5E5952C.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 11px;
}
/*左侧喜欢的图书块内容框修改开始*/
#left_side #BookDivItem,
/*右侧喜欢的图书内容框修改开始*/
#right_side #BookDivItem {
width: 200px;/*200为自定义模块里面内容宽度*/
}
/*以上是喜欢的图书分为两列多列结束*/
|
