精品欧美一区二区三区久久久,国精产品一区二区三区,国产日韩欧美二区

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

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

以下為詳細代碼

<!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郵箱文件中轉站點擊下載效果

相關閱讀: 網站完成各個瀏覽器兼容測試; div+css標準化在新窗口打開鏈接; 深山網吧留言板系統v4.0; 利用javascript讓PNG透明圖片支持支持(IE6、IE7、firefox下測試通過); window7簡稱win7下可以運行ASP文件，但是不能訪問access數據庫的解決辦法; 新敦煌國際旅行社; 超級實用且不花哨的js代碼大全( 2 ); facebook廣告推廣設定像素標準事件的值和幣種等說明

共有0條關于《利用錨點做純CSS的圖片展示效果》的評論: 發表評論

正在加載評論......

返回頂部發表評論

呢稱:
表情:
內容:	評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼:

網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇: 百度小程序開發; 微信小程序開發; 微信公眾號開發; uni-app; asp函數庫; ASP; DIV+CSS; HTML; python

更多>>同類信息: a標簽的javascript鏈接; 網站內容中某個關鍵字相關右鍵菜單; 利用錨點做純CSS的圖片展示效果; QQ郵箱文件中轉站點擊下載效果; Div+CSS+JS樹型菜單，可刷新; 淘寶產品首字母類別效果

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動端自動化測試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來做投票; 火狐Mozilla Firefox出現：無法載入您的Firefox配置文件它可能已經丟失或是無法訪問問題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過代碼修改pip下載源讓下載庫飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機抽取信息: python+appium自動化測試-滑動; 絕對讓你長見識：200個騙人的創業項目！; 深山行者留言系統V2.0 (簡稱留言板V2.0); 留言板留言板V7.22; 你們有網站推廣服務嗎？; 火狐Mozilla Firefox出現：無法載入您的Firefox配置文件它可能已經丟失或是無法訪問問題解決集合處理辦法

更多標簽熱門標簽

asp.net form 代碼郵箱小旋風中英增高深山旅游網站管理系統V1.0 尺寸格式樣式 xhtml alert flush 個人 submit cookies 字節數網站 onload border visite 性能高度導出評論下拉框變幻圖片上傳 id 菜單顯示珍惜 button 學習布局文字垂直居中版權導航 textarea 適應 Javascript實現CSS代碼高亮顯示1 web 等待變大 javascript instr 模仿框寬

99亚洲_成人性视频免费网站_av在线播放网址_免费成人在线网站_亚洲综合婷婷_亚洲一区二区国产

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