国产色色视频,欧美专区第108页

　純CSS代碼實(shí)現(xiàn)翻頁

作者：snwebsite　時(shí)間： 2007-03-21　文檔類型：原創(chuàng)　來自：藍(lán)色理想

純CSS實(shí)現(xiàn)翻頁效果，原理比較簡單，書簽配合隱藏。

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <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> </head> <body> <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://m.95time.cn/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" /> <img src="http://m.95time.cn/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" /> <img src="http://m.95time.cn/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" /> </dd> </dl> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

同樣，舉一反三，可以做出其他的翻頁的效果。

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <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> <head/> <body> <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> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

經(jīng)典論壇討論
http://bbs.blueidea.com/thread-2728504-1-1.html

本文鏈接：http://m.95time.cn/tech/site/2007/4549.asp　

出處：藍(lán)色理想
責(zé)任編輯：feng4ever

◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論

作者文章

更多作者文章

2006年50佳css布局站點(diǎn)欣賞

使用有趣的自定義標(biāo)記來布局頁面

用background 插入flash播放器

web標(biāo)準(zhǔn)常見問題集合

放大鏡效果


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡單繪制一個(gè)可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx