萬盛學電腦網 >> 網絡編程 >> 安卓開發 >> 仿6room網站圖片鏈接效果實現的方法
仿6room網站圖片鏈接效果實現的方法
下面我們給大家介紹一下仿6room網站圖片鏈接吧!希望大家可以在這裡學習!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "-transitional.dtd">
<html xmlns="">
<head>
<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 url(_8014/200704/20070409144720718.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;/*重定位文字說明層回到正常位置*/
}
.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url(_8014/200704/20070409144721377.gif) no-repeat;
}
.blueidea em:hover {
background-image:url(_8014/200704/20070409144722584.gif) ;/*"+"圖片鼠標滑過背景變換,只有標准浏覽器起作用,IE7以下版本BUG*/
}
-->
</style>
</head>
<body>
<div class="blueidea"><a #"><img src=/uploadfile/2015/0805/20150805023812315.jpg" alt="" /><span> 80萬網民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a #"><img src=/uploadfile/2015/0805/20150805023827713.jpg" alt="" /><span>根據韓寒作品改編電視劇《三重門》</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a #"><img src=/uploadfile/2015/0805/20150805023842156.jpg" alt="" /><span>CG少女（3維立體,比真人還漂亮）</span></a><em title="我要收藏"></em></div>
</body>
</html>
以上就是我們給大家介紹的仿6room網站圖片鏈接了。希望大家繼續關注我們的網站!
