电脑技术学习

巧用表格美化Z-blog博客友情链接侧边栏

dn001

   不知你是否对你的博客外观要求比较完美,你是否曾花费一个晚上的时间来修改优化你站上一个微笑的细节问题,我是如此。博客的完美外观可以让来访者在第一次打开页面时就会感到很舒服,没有别扭的感受。颜色协调、排版合理、界面活泼中带着缜密,那是一种怎样视觉的享受。如果你的博客颜色配比极不协调,侧栏歪曲甚至错位,没有一点视觉美感而言,我想即使来访者复制到本地文本中观看你的文章都不愿停留在你的站上,那你都没理由怪人家。

  我比较关注的还是我Zblog的侧边栏,因为Zblog不像wordpress那样有很多插件和完美的主题,不是说Zblog不好,相反我觉得Zblog的代码简单容易上手,更适合喜欢动手的朋友。
;


我要说什么

;本文以Zblog为例主要介绍使用表格来美化侧栏,其他博客类似。大家肯定注意过,友情链接多了之后会高度增加,会变的很长,使侧栏界面空间利用极不合理,又高又窄的友情链接、文章存档、分类目录看起来很碍眼。如果把一列友情链接变为两列横排或者三列横排的话,问题就解决了。适合的文本宽度会让你的侧栏会很漂亮。

表格代码介绍

表格式代码实现两列横排是最简单的了,为了便于大家查看,我将表格的宽度设为1,在实际应用的时候可以设置为0。如果你的博客有表格,且想工整排版,也可以显示1,代码如下:

<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>第一列链接</td>
<td>第二列链接</td>
</tr>
</table>

请根据自己的需要修改表格的宽度和间距。

以上是最简洁没有定义属性的表格代码。

下面介绍一下表格的属性定义

<TD>标记的属性

说明

ALIGN="left|center|right"

单元格文字的对齐

VALIGN="top|middle|bottom|baseline"

单元格文字的垂直对齐

WIDTH="value_or_percent"

单元格的宽度,可以用点数或百分比表示

HEIGHT="value_or_percent"

单元格的高度,可以用点数或百分比表示

BACKGROUND="image_file"

单元格的背景图案

BGCOLOR=#????

单元格的背景颜色

BORDERCOLOR=#????

单元格框线的暗面颜色

BORDERCOLORDARK=#????

单元格框线的暗面颜色

BORDERCOLORLIGHT=#????

单元格框线的亮面颜色

NOWARP

单元格不因单元格宽度,而进行文字的换行。

修改友情链接代码

用表格定义友情链接使一列变两列横排也可以用到分类目录和其他地方。比如我就用在我的博客订阅栏和自我介绍栏,整体看起来整体感立刻加强。可以用下面的代码定义你的友链,根据以上属性修改成适合你博客的样式。

<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td valign="left" align="middle" width="79">
第一列链接</td>
<td valign="left" align="middle" width="79">
第二列链接</td>
</tr>
</table>


我的友情链接代码请参考下面,新增定义了宽度属性,而左右侧友情链接代码你可以直接使用zblog/include里link.asp的代码。然后整个如下代码亦整个复制到zblog/include里link.asp里保存。;

<table width="200" border="0" cellspacing="1" cellpadding="1">
<tr>
<td align="left" width="100" "valign="top">
左侧友链代码
</td>
<td align="left" width="100" "valign="top">
右侧友链代码
</td>
</tr>
</table>


标签: