仿6room网站图片链接效果(二)

　2009-05-30 10:50:20　来源：WEB开发网　闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹

闂傚倷绀侀幉锟犲垂閻㈠灚宕查柟鎵閸庡秵銇勯幒鎴濃偓鐢稿磻閹炬枼妲堟繛鍡楃С濞岊亞绱撻崒姘扁枌闁瑰嚖鎷�

婵犵數濮幏鍐川椤撴繄鎹曢梻渚€娼уú銈吤洪妸鈺佺劦妞ゆ帊鑳堕埊鏇㈡煏閸モ晛浠х紒杈╁仱閺佹捇鏁撻敓锟�闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹　　闂傚倷鑳舵灙缂佺粯顨呴埢宥夊即閵忕姵鐎梺缁樺姇閹碱偆鐥閺屾洘绻濊箛鏇犵獥闂佺厧澹婃禍婊堚€旈崘顏佸亾閿濆骸澧ù鐘欏嫮绠鹃柛顐ゅ枎閻忋儲銇勯弴妯哄姦妞ゃ垺鐟╅幃鈩冩償閵囧府鎷�

核心提示： .blueidea {background-color: #CCC;margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/height: 96px;/*与图

.blueidea { background-color: #CCC; margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/ padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/ height: 96px;/*与图片等高*/ width: 128px; position: relative; float:left;/*让三个实例横向排列*/ }

2．限定图片大小，并不显示边框，用到下面样式：

.blueidea a img { height: 96px; width: 128px; border:none; }

3．组织文字说明图层，让其大小比下层稍小（因为我安排了1px的边框），在这个盒子内，让其上边有一定填充（不要用边界，因为我们等一下要用到半透明效果，这个效果是覆盖下面整个区域的），让文字说明不会靠着上边，再让文字缩进一段距离，主要是为了方便等一下对LOGO做背景精确定位到文字说明前，文字不会与LOGO重叠在一起。（在做的时候可以多次精细调节，直至达到满意为止）。接着为这一图层加上个半透明滤镜效果，并重新给出一个margin值，等一下我们要用这种方法来初始化说明图层移出可视区域。用到下面样式：

.blueidea a:hover span { height: 88px; width: 128px; position: absolute; left: 0px; top: 0px; border:1px solid #F90; padding: 10px 2px 2px 2px;/*让说明文字不要太靠上边界*/ background:#FFF url(http://www.hsptc.com/cssImg/blueidea.gif) no-repeat 5px 10px;/*LOGO图片定位*/ text-indent: 28px;/*文本缩进28px,避免与背景LOGO叠加*/ filter:alpha(opacity=90);/*CSS透明度滤镜*/ opacity:0.9;/*针对Mozilla浏览器CSS透明度滤镜*/ display: block; text-decoration: none;/*去除说明文字链接下划线*/ cursor:pointer; /*让光标显示手形*/ margin:0px;/*重定位文字说明层回到正常位置*/ }