|
在本人上一篇教程《徹底弄懂CSS盒子模式五(定位強(qiáng)化練習(xí)) 》有講到一個很酷的鏈接面板提示的實例制作，那時主要是用到display方法來實現(xiàn)對象的顯示和隱藏的，但是后來了解到那種方法對搜索引擎不友好，一些特別的閱讀設(shè)備會讀不到信息，比如盲人閱讀器等等，所以今天又寫了一個類似的教程，這次是用margin來實現(xiàn)，本實例實現(xiàn)方法簡單但卻很實用，實例做的是仿6room(著名web2.0視頻網(wǎng)站)圖片鏈接效果，下面請先運行代碼看看最終實現(xiàn)的效果。
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
一、實例實現(xiàn)功能介紹
默認(rèn)情況下，一個帶有一定邊框的圖片鏈接放置在網(wǎng)頁中，圖片鏈接左下角還有一個“+”圖形，意為添加到收藏夾或者視頻播放列表吧（我這里沒有加入腳本，只講界面的實現(xiàn)），當(dāng)鼠標(biāo)移到鏈接圖片區(qū)域上面時，會出現(xiàn)一個半透明鏈接簡要說明層蓋在圖片上面，說明層的文字前邊還有一個小的網(wǎng)站LOGO，說明層周圍還會跟著出現(xiàn)一條黃色的邊框，同時鼠標(biāo)移到左下角“+”圖形上，它的顏色會發(fā)生變化，而且像這樣的結(jié)構(gòu)一旦做好了，就可以隨意在網(wǎng)頁上任意地方安排它們位置，效果不會發(fā)生改變。下面是實例效果截圖。
實例效果截圖
二、結(jié)構(gòu)和樣式代碼
1．結(jié)構(gòu)
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic1.jpg" alt="" /><span> 80萬網(wǎng)民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根據(jù)韓寒作品改編電視劇《三重門》</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3維立體,比真人還漂亮）</span></a><em title="我要收藏"></em></div>
2．樣式
*{
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狀態(tài)偽類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(http://www.hsptc.com/cssImg/blueidea.gif) no-repeat 5px 10px;/*LOGO圖片定位*/
text-indent: 28px;/*文本縮進(jìn)28px,避免與背景LOGO疊加*/
filter:alpha(opacity=90);/*CSS透明度濾鏡*/
opacity:0.9;/*針對Mozilla瀏覽器CSS透明度濾鏡*/
display: block;
text-decoration: none;/*去除說明文字鏈接下劃線*/
cursor:pointer; /*讓光標(biāo)顯示手形*/
margin:0px;/*重定位文字說明層回到正常位置*/
}
.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url(http://www.hsptc.com/cssImg/blueidea1.gif) no-repeat;
}
.blueidea em:hover {
background-image:url(http://www.hsptc.com/cssImg/blueidea2.gif) ;/*"+"圖片鼠標(biāo)滑過背景變換,只有標(biāo)準(zhǔn)瀏覽器起作用,IE7以下版本BUG*/
}
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 下一頁 仿6room網(wǎng)站圖片鏈接效果 [2]
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 仿6room網(wǎng)站圖片鏈接效果 [1]
第 2 頁 
