CSS教你一招

我要留言 Jump to comments Posted in Web by Evan @ 2007-4-27 17:27

上面这张图,是今天为了把一些音乐专辑封面像CD盒一样展示出来而做的,这里,有一个小招数让你轻松实现这种小东西~
首先在你的模板样式中建立一个class(类),就像这样
img.cd{padding:1px 1px 1px 30px; background:url(http://blog.5d.cn/vip/evannan/upload/2007-04/20074271653551.jpg) no-repeat; border:1px solid #999; height:200px; width:200px; margin:0 0 5px 0}
然后,当你在写日志的时候加入图片需要使用这个类时,图片编辑下的[样式类名称]添上你的那个名称就可以了(找不到九进源代码模式在<img>里面写上class="类名称"就可以了),注意,此时的名称不是img.cd,而是cd。这种东西我就给他取名叫御用样式~哈哈,这里解释一下
  • img.cd是针对图像文件使用的样式,类似像这样的还可以写li.xxx
  • "padding"这个很重要,就是整个图像内部的白边
  • "border"就是指边线了,不要多,1px就够了
此外,我还要解释一些东西。由于CSS下一个模块的四边的顺序是:上、右、下、左,因此,在padding后面的就是这个意思,不知道padding的朋友可以去找找CSS的flash动态图形结构看看,同时margin也是这样的循环方式。而对于border部分的写法是缩减的,后面的内容是:大小、边线样式、边线颜色。

然后,你就知道我那些图片显示时有空白和边线的效果是怎么做出来的了吧~哈哈~大家尽情发挥吧~
关键字:TAGS:css web design

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}