简单说说我是如何把友情链接改成双列显示的

林继 WordPress 3,035 共写了738个字 (2010-08-24 15:06:08) 没有评论 打印 扫描二维码 百度已收录

友情链接是我们博客不可缺少的一部分,互联网的世界本身就是链接的世界,如果你的博客没有一个外链,那么你就是一座孤岛。没有人能找到你的。
看朋友们的博客的时候,发现有的童鞋的链接是双列显示的,能节省不少的空间浪费。于是我也把我的改成双列显示了。本来只是一个很简单的Css的修改,但是昨天在QQ上有童鞋问我,我想,肯定还有另外一些朋友不太懂css的,于是写出来,供需要的童鞋借鉴。

简单地说,我是在主题的css文件中加入了下面的代码:

  1. .sidebar .block.links li{ background:url(img/links.gif) 21px 6px no-repeat;padding-left:42px;float:left;width:20%;overflow:hidden;}

图标下载:

下载文件
点击这里下载文件

因为主题不一样,所以这不是通用的,简单介绍一下这段代码:

.sidebar .block.links li
这是控制你的友情链接的标签,你可以通过查看源文件的方式找到你的主题中控制你的友情链接的标签

background:url(images/links.gif) 2px 6px no-repeat;
设置了友情链接的背景图片,也就是链接左侧的链接图片。
2px 6px 指定了图片相对位置,no-repeat 规定图片不重复。

float:left;width:40%
这是最关键的代码,有童鞋可能会问为什么是40%,而不是其它的比例。理论上我们可以指定为50%,但是因为有一定的边距,我们指定为40%为这些边距提供了一些空间。不然会照成错位。40%是微调的结果。你可以改动一下,哪个数值合适就用哪个。
写得比较简单,没有一点css基础的童鞋可能不太懂,高手则会觉得我里面有些地方说得不准确。都没关系啦。
css其实非常简单,推荐大家去这里了解一下,以后你要改变你博客的样式就方便多了.

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >