亚洲精品一品区二品区三品区,在线视频精品一区,99re国产精品

利用錨點做純CSS的圖片展示效果

藍色理想 2009/8/24 8:15:51 深山行者字體:大中小瀏覽 17035

以下為詳細代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head profile="http://www.w3.org/2000/08/w3c-synd/#"> 
<meta http-equiv="content-language" content="zh-cn" /> 
<meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
<style> 
dl { 
position:absolute; 
width:240px; 
height:170px; 
border:10px solid #eee; 
} 
dd { 
margin:0; 
width:240px; 
height:170px; 
overflow:hidden; 
} 
img { 
border:1px solid black 
} 
dt { 
position:absolute; 
right:3px; 
top:50px; 
} 
a { 
display:block; 
margin:1px; 
width:20px; 
height:20px; 
text-align:center; 
font:700 12px/20px "宋體",sans-serif; 
color:#fff; 
text-decoration:none; 
background:#666; 
border:1px solid #fff; 
filter:alpha(opacity=40); 
opacity:.4; 
} 
a:hover { 
background:#000 
} 
</style> 
利用錨點做純CSS的圖片展示效果 
<dl> 
<dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt> 
<dd> 
<img src="http://farm1.static.flickr.com/80/251133988_e0b8174060_m.jpg" alt="" title="" id="a" /> 
<img src="http://farm1.static.flickr.com/6/76318014_e50414fe42_m.jpg" alt="" title="" id="b" /> 
<img src="http://farm1.static.flickr.com/48/172522117_410a1e87c1_m.jpg" alt="" title="" id="c" /> 
</dd> 
</dl>

以下為詳細代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head profile="http://www.w3.org/2000/08/w3c-synd/#"> 
<meta http-equiv="content-language" content="zh-cn" /> 
<meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
<style> 
dl { 
position:absolute; 
width:240px; 
height:170px; 
border:10px solid #eee; 
} 
dd { 
margin:0; 
width:240px; 
height:170px; 
overflow:hidden; 
} 
dt { 
position:absolute; 
right:1px; 
} 
ul { 
margin:0; 
padding:0; 
width:260px; 
height:170px; 
list-style:none; 
background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px; 
border:1px solid #ccc 
} 
#b { 
background-position:75% center 
} 
#c { 
background-position:75% 86% 
} 
li { 
width:205px; 
height:27px; 
font:12px/27px "宋體",sans-serif; 
white-space:nowrap; 
overflow:hidden; 
} 
dt a { 
display:block; 
margin:1px; 
width:30px; 
height:56px; 
text-align:center; 
font:700 12px/55px "宋體",sans-serif; 
color:#fff; 
text-decoration:none; 
background:#666; 
} 
dt a:hover { 
background:orange 
} 
</style> 
<dl> 
<dt><a href="#a" title="">新聞</a><a href="#b" title="">娛樂</a><a href="#c" title="">體育</a></dt> 
<dd> 
<ul id="a"> 
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li> 
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li> 
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li> 
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li> 
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li> 
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li> 
</ul> 
<ul id="b"> 
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li> 
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li> 
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li> 
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li> 
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li> 
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li> 
</ul> 
<ul id="c"> 
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li> 
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li> 
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li> 
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li> 
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li> 
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li> 
</ul> 
</dd> 
</dl>

前一頁:網站內容中某個關鍵字相關右鍵菜單

后一頁:QQ郵箱文件中轉站點擊下載效果