收藏下，方便管理的

上一篇 / 下一篇 2007-09-07 22:45:00

新版19楼增加了一个圈子功能，用户可以自行建立圈子。可系统默认的界面千篇一律，如果你想增强自己圈子的特色吸引人气改变界面风格，那就请看下面的分解。

进入自己博客的后台，进入［邻友圈］——>圈子风格

准备五张图作为此次装修的素材：
１题图　大小980x240px（注：系统默认高度是100px，在这里我们用代码覆盖的办法突破这一限制）
２头像　大小150x150px
３栏头左　大小160x32px
４栏头中　大小560x32px
５栏头右　大小240x32px

接下来我们上传题图和头像图片。

把剩下的图片上传到自己日志里，保存到私人箱

然后浏览刚才的博文，在图片上右键，把这些图片的链接拷贝出来待用。

接下来就是要增加一些代码，完成此次装修。

突破题图100px的限制：
#header {height: 240px;border:0;}

更改左栏头图片并且改变高度：
.block h3 {height:32px;line-height:32px;background:url(http://image.dukuai.com/x.attachments/2007/09/07/10111614_200709071335511.gif);}

更改中栏头图片并且改变高度：
.block_ri h3 {height:32px;line-height:32px;background:url(http://image.dukuai.com/x.attachments/2007/09/07/10111614_200709071335591.gif);}

更改中栏头图片并且改变高度：
.msglist h3 {height:32px;line-height:32px; background:url(http://image.dukuai.com/x.attachments/2007/09/07/10111614_200709071336031.gif);}

将题图区里的字缩小挪个地方：（改变padding-left:、padding-top:值可以控制文字上下左右移动）
#groupname { float: left; padding-left: 20px;}
h1 {padding-top:190px;font-size:12px}
h1 a:hover { text-decoration: none; }
#groupname p { float: left; margin: 0; }
#groupname a,#groupname a:hover{ color:#a1894e}