<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿6room图片链接效果--唐国辉</title> <style type="text/css"> <!-- *{ margin:0px; padding:0px; } body { margin:20px; font-size: 12px; line-height:18px; } .blueidea { background-color: #CCC; margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/ padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/ height: 96px;/*与图片等高*/ width: 128px; position: relative; float:left;/*让三个实例横向排列*/ } .blueidea a img { height: 96px; width: 128px; border:none; } .blueidea a span { margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/ margin-left:-9000px; position: absolute; } .blueidea a:hover { background-color: #FFF;/*IE7以下版本A状态伪类bug*/ } .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 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;/*重定位文字说明层回到正常位置*/ } .blueidea em { position:absolute; left:5px; bottom:5px; width:25px; height:25px; cursor:pointer; background:url(="http://www.aspxcs.net/UploadFiles/SYDM/2009/8/200908141741596621.gif) no-repeat; } .blueidea em:hover { background-image:url(="http://www.aspxcs.net/UploadFiles/SYDM/2009/8/200908141744068995.gif) ;/*"+"图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/ } --> </style> </head> <body> <div class="blueidea"><a href="#" _fcksavedurl="#"><img src="http://www.aspxcs.net/UploadFiles/SYDM/2009/8/200908141742100165.jpg" _fcksavedurl="http://www.aspxcs.net/UploadFiles/SYDM/2009/8/200908141742100165.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div> <div class="blueidea"><a href="#" _fcksavedurl="#"><img src="http://www.aspxcs.net/UploadFiles/SYDM/2009/8/200908141742179085.jpg" _fcksavedurl="http://www.aspxcs.net/UploadFiles/SYDM/2009/8/200908141742179085.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div> <div class="blueidea"><a href="#" _fcksavedurl="#"><img src="http://www.aspxcs.net/UploadFiles/SYDM/2009/8/200908141742248020.jpg" _fcksavedurl="http://www.aspxcs.net/UploadFiles/SYDM/2009/8/200908141742248020.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div> </body> </html>
