综合一区二区三区,久久综合九色,午夜精品在线

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

藍(lán)色理想 2009/8/24 8:15:51 深山行者字體:大中小瀏覽 17130

以下為詳細(xì)代碼

<!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>

以下為詳細(xì)代碼

<!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>

前一頁:網(wǎng)站內(nèi)容中某個關(guān)鍵字相關(guān)右鍵菜單

后一頁:QQ郵箱文件中轉(zhuǎn)站點擊下載效果

相關(guān)閱讀: Javascript JS 限制復(fù)選框的選擇個數(shù); 旅行社手機網(wǎng)站模板7; javascri獲取頁面實際高度; 深山行者留言系統(tǒng)V2.3; document對象詳解; 鼠標(biāo)經(jīng)過表格列時變色; 雙擊文字后實現(xiàn)編輯文本功能; 做好的網(wǎng)站把http改成https申請SSL域名證書

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

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

返回頂部發(fā)表評論

呢稱:
表情:
內(nèi) 容:	評論內(nèi)容:不能超過 1000 字,需審核,請自覺遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。
驗證碼:

網(wǎng)友評論聲明,請自覺遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。

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

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

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

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

更多>>隨機抽取信息: 深山行者留言系統(tǒng)V2.3; 山西萬景國際旅行社晉中分公司; CSS中word-wrap屬性同word-break屬性的兩者在中英文混排時的區(qū)別; CSS制作網(wǎng)頁中的一些經(jīng)驗總結(jié); 深山旅行社網(wǎng)站管理系統(tǒng) v1.5; 珍惜每一個你遇到過的人放開你心靈之約的視頻

更多標(biāo)簽熱門標(biāo)簽

分開 2003 還原 css 獲取底部右鍵失效 xml 源碼 web 2.0 訪問量愛墻長縣插件小旋風(fēng) expression 企業(yè) 斷線搜索引擎留言次數(shù) 位置 split txt 目標(biāo) maryabbsby 選擇符計劃寬面板 FlashFxp 緩沖文字樣式 ico 居中 style 代碼 button 心情規(guī)則統(tǒng)計 height 留言縮小 imprt 自動獲取動畫色彩后臺風(fēng)格

国产一二区视频_国产一区二区免费_亚洲精选一区_久久精品1_午夜av免费在线观看_在线观看日韩欧美

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