2007年4月3日星期二

让链接上方有图片

CSS样式定义:

.样式名 {
display:block;
width:200px;
height:133px;
line-height:254px;
text-align:center;
background:url("图片地址") no-repeat center top;
overflow:hidden;}

在HTML页中只要在链接中加一个 class=''样式名" 即可调用。

解释:
display:block是把图片和文字作为一个块
width调整块的宽度,一般和文字同宽即可
height和line-height分别调整块的高度(太小则显示不全,太大则多出空白)和文字相对于图片的位置。
text-align:center让图片和文字中间对齐,链接上方出现图片一般采用中间对齐,也可以左对齐和右对齐。
background:url("图片地址") no-repeat center top 图片地址和样式。no-repeat表示不重复只显示一张;center和top分别定义上下对齐和左右对齐
overflow:hidden 如果显示的内容超出块的大小则不显示超出部分

1 条评论:

匿名 说...

Excuse, that I interfere, I too would like to express the opinion.