![[雨爸杂谈]关于圈标添加的技巧](//simg.sinajs.cn/blog7style/images/common/sg_trans.gif "[雨爸杂谈]关于圈标添加的技巧")
关于圈标添加的技巧
文/雨滴爸爸
今天，小雨滴可能在白天有些累了，所以早早的就睡着了。正好给我一个时间，呵呵，所以今天就是我来和大家聊聊啦。
今天的话题是在自己的博客里面添加圈标。我加了很多圈子，有不少圈子设计了自己漂亮的圈标，把圈标加在博客首页中，用作分割是很不错的。圈标通常是一幅图片，常见的有正方形和长方形两种。如果圈标挨在一起加到首页，就会有一个大小问题。以小雨滴的博客为例，先后添加了快乐红枫林圈、奥运宝宝圈、PK小人精圈、和凌风一起飞翔圈、当代小学生圈等圈标，其中前两个圈标是正方形的，由于不在一起，所以大小可以不用调整；后三个就不行了，这三个圈标的大小是不一样的，如图1所示：
图1
原始圈标（圈徽）
很显然，这样放在博客首页上是很难看的，这主要是由于各个圈子圈标制作的时候没有一个统一的规范，所以就有了这些大大小小的圈标。现在要做的首要工作就是把他们变成一样宽度。为此，点击“显示源代码”，然后看到各个源代码是：
<P
align=center><A href="http://q.blog.sina.com.cn/pkxiaoreij"
target=_blank><FONT color=#0080ff><IMG class=img01
style="WIDTH: auto; star: auto"
src="http://cache.orion.sina.com.cn/circleblog_d/group_photo//49/33/54933/54933.jpeg"></FONT></A></P>
<P align=center><A
href="http://q.blog.sina.com.cn/gylf2000" target=_blank><IMG
class=img01 style="WIDTH: auto;
HEIGHT: 121px; star:
auto"
src="http://s10.album.sina.com.cn/pic/4b56931a020016c9"></A> </P>
<DIV align=center><A
href="http://q.blog.sina.com.cn/ddxxs/" target=_blank><IMG
style="BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px
solid; BORDER-center: #cccccc 1px solid" height=139
src="http://s1.album.sina.com.cn/pic/4dc1fec702000x4o" width=180
border=0></A></DIV>
注意上述代码中的红色部分，它表示的是图片宽度自动，即原来多大就是多大；蓝色部分表示图片宽度定义为180像素单位；紫色部分表示的是图像的高度，单位也是像素；因此，可以将源代码中红色部分的“auto”改成“160px”，表示将宽度统一调整为160像素。对于蓝色部分，也将“180”改成“160”，结果如图2所示：
图2 初次修改宽度后效果
此时发现最后一张图片比例有些失调，而且好像宽度不够（假如自已觉得宽度已经够了的话就只修改高度就可以了）。研究其代码发现，图片上下左右侧各设置了1px的边距，所以考虑此种情况，将蓝色的“160”调整为“162”，同时将紫色的“height=139”修改为“height=123
”（与凌风圈标高度相同，也考虑边框，则为121+2，也可以先用160*121看一看效果），结果如图3所示：
图3
修正图片高度后效果
这样，几个圈标就修改好了，最终形式如图4所示：
图4
最终效果
怎么样，是不是好看多了呢？^_^ 快动手试一下吧o(∩_∩)o...
本博正在新浪城市对弈频道参赛，需要您的支持，直接点击“投票”就可以啦，谢谢您先，^_^
小雨滴讲故事：粉红鸭
雨滴爸爸的朗读：你听寂寞在唱歌
加载中，请稍候......
加载中…