一级特黄大片色欧美精品,摸肉乳捏蒂舒服小说

　XHTML+CSS創(chuàng)建“兩步式”的相冊(cè)

作者：Sheneyan　時(shí)間： 2005-09-15　文檔類(lèi)型：翻譯　來(lái)自：藍(lán)色理想

步驟８

--------

添加:active和:focus狀態(tài)

IE使用:active偽類(lèi)但其他所有瀏覽器使用:focus偽類(lèi)來(lái)作鼠標(biāo)單擊的樣式。

和:hover樣式我們擴(kuò)大圖片區(qū)域一樣，這次，要擴(kuò)大到320 x 240px并減小padding到上下48px左右64px，總共是448 x 336px.

每個(gè)超鏈接的單擊狀態(tài)必須移動(dòng)到更低的z-index，所以，它應(yīng)該低于:hover狀態(tài)。這段允許所有鏈接被激活并且允許下一個(gè):hover顯示在被“單擊”的圖片之上。

/* Resizing the link when 'clicked' */
#gallery a:active, #gallery a:focus {
background:transparent;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}

background:transparent; 在ie中用來(lái)激活:active樣式
width:320px; 設(shè)置超鏈接寬度為320px（和顯示區(qū)域一樣寬）
height:240px; 設(shè)置超鏈接高度為240px (和顯示區(qū)域一樣高)
padding:48px 64px; 設(shè)置超鏈接總體大小為　448 x 336 px
position:absolute; 允許我們絕對(duì)定位我們的超鏈接
left:0; 移動(dòng)超鏈接到<ul>的左邊
top:0; 移動(dòng)超鏈接到<ul>的上邊
z-index:10; 讓這個(gè)超鏈接在:hover底下（一個(gè)更低的層）

步驟８ａ示例：

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> A 'Two Step' CSS Photograph Gallery </title> <style type="text/css"> ul#gallery { padding:0; margin:0; width:448px; height:336px; position:relative; list-style-type:none; background:#888; } #gallery li { width:64px; height:48px; float:left; z-index:100; } #gallery li.lft { float:left; clear:left; } #gallery li.rgt { float:right; clear:right; } #gallery a { position:relative; width:64px; height:48px; display:block; float:left; z-index:100; cursor:default; } #gallery a img { position:relative; width:62px; height:46px; border:1px solid #888; z-index:100; } #gallery a:hover { width:160px; height:120px; padding:108px 144px; position:absolute; left:0; top:0; z-index:20; } #gallery a:hover img { background:#eee; position:relative; width:160px; height:120px; border:0; z-index:20; } #gallery a:active, #gallery a:focus { background:transparent; width:320px; height:240px; padding:48px 64px; position:absolute; left:0; top:0; z-index:10; } /* hack for Internet Explorer */ #gallery li.pad { height:0; display:block; margin-top:-2px; width:448px; font-size:0; } </style> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Step 8a - The :active and :focus link styling</h3> <h4>by Stu Nicholls</h4> <ul id="gallery"> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li> <li class="pad"></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li> </ul> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

我們現(xiàn)在可以設(shè)置被“單擊”的圖片為原始大小 320 x 240px。

/* Resizing the image when 'clicked' */
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:320px;
height:240px;
border:0;
z-index:10;
}

background:#eee; 在ie中被用來(lái)激活:active狀態(tài)
position:relative; 設(shè)置這個(gè)，讓z-index能夠被指定
width:320px; 設(shè)置圖片寬度為320px(和顯示區(qū)域一樣寬)
height:240px; 設(shè)置圖片高度為240px(和顯示區(qū)域一樣高)
border:0; 移除1px的框
z-index:10; 移動(dòng)圖片到和它所在超鏈接一樣的層。

步驟８ｂ示例：

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> A 'Two Step' CSS Photograph Gallery </title> <style type="text/css"> ul#gallery { padding:0; margin:0; width:448px; height:336px; position:relative; list-style-type:none; background:#888; } #gallery li { width:64px; height:48px; float:left; z-index:100; } #gallery li.lft { float:left; clear:left; } #gallery li.rgt { float:right; clear:right; } #gallery a { position:relative; width:64px; height:48px; display:block; float:left; z-index:100; cursor:default; } #gallery a img { position:relative; width:62px; height:46px; border:1px solid #888; z-index:100; } #gallery a:hover { width:160px; height:120px; padding:108px 144px; position:absolute; left:0; top:0; z-index:20; } #gallery a:hover img { background:#eee; position:relative; width:160px; height:120px; border:0; z-index:20; } #gallery a:active, #gallery a:focus { background:transparent; width:320px; height:240px; padding:48px 64px; position:absolute; left:0; top:0; z-index:10; } #gallery a:active img, #gallery a:focus img { background:#eee; position:relative; width:320px; height:240px; border:0; z-index:10; } /* hack for Internet Explorer */ #gallery li.pad { height:0; display:block; margin-top:-2px; width:448px; font-size:0; } </style> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Step 8b - The :active and :focus image styling</h3> <h4>by Stu Nicholls</h4> <ul id="gallery"> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li> <li class="pad"></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li> </ul> <p>Note the Internet Explorer bug that causes the background to change only when the mouse is moved off the link.</p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

Users of Internet Explorer may now notice a bug in this arrangement whereby the full sized clicked image does not display until the mouse is moved onto another image.

This is a very curious bug and I'm not sure why it happens intermittently.Fortunately,there's and easy cure (hack) that can be applied without any problem to other browsers.

(子烏注：不知道為什么，我這里沒(méi)出現(xiàn)他指出的這個(gè)bug。所以這段我沒(méi)翻譯，我不確定我理解的是不是他所指的－－我從字面上看好像是說(shuō)完整大小的圖片不能顯示，除非鼠標(biāo)移動(dòng)到其他圖片上……可在我機(jī)器上不會(huì)出現(xiàn)這個(gè)問(wèn)題？？)

/* The 'click' hack for Internet Explorer */
a:visited {
color:#000;
}

color:#000; 用來(lái)修正ie中的:active樣式bug

添加這個(gè)全局樣式后，所有的超鏈接都沒(méi)了這個(gè)問(wèn)題，如果誰(shuí)知道為什么會(huì)出現(xiàn)這個(gè)問(wèn)題，請(qǐng)聯(lián)系我。（子烏注：如果你知道的話(huà)，順便跟帖也告訴我一聲）

步驟８ｃ示例：

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> A 'Two Step' CSS Photograph Gallery </title> <style type="text/css"> ul#gallery { padding:0; margin:0; width:448px; height:336px; position:relative; list-style-type:none; background:#888; } #gallery li { width:64px; height:48px; float:left; z-index:100; } #gallery li.lft { float:left; clear:left; } #gallery li.rgt { float:right; clear:right; } #gallery a { position:relative; width:64px; height:48px; display:block; float:left; z-index:100; cursor:default; } #gallery a img { position:relative; width:62px; height:46px; border:1px solid #888; z-index:100; } #gallery a:hover { width:160px; height:120px; padding:108px 144px; position:absolute; left:0; top:0; z-index:20; } #gallery a:hover img { background:#eee; position:relative; width:160px; height:120px; border:0; z-index:20; } #gallery a:active, #gallery a:focus { background:transparent; width:320px; height:240px; padding:48px 64px; position:absolute; left:0; top:0; z-index:10; } #gallery a:active img, #gallery a:focus img { background:#eee; position:relative; width:320px; height:240px; border:0; z-index:10; } /* hack for Internet Explorer */ #gallery li.pad { height:0; display:block; margin-top:-2px; width:448px; font-size:0; } a:visited { color:#000; } </style> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Step 8c - :active bug fix for Internet Explorer</h3> <h4>by Stu Nicholls</h4> <ul id="gallery"> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li> <li class="pad"></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li> </ul> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

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

上一頁(yè) XHTML+CSS創(chuàng)建“兩步式”的相冊(cè) [7] 下一頁(yè) XHTML+CSS創(chuàng)建“兩步式”的相冊(cè) [9]

◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論

相關(guān)文章

更多相關(guān)鏈接

網(wǎng)頁(yè)中如何讓整段文字左右對(duì)齊

如何讓12px以下的文字正常顯示

第一屆簡(jiǎn)歷樣式表設(shè)計(jì)圓滿(mǎn)結(jié)束

使用外部CSS設(shè)置FlashMX組件外觀

重構(gòu)、標(biāo)準(zhǔn)、布局


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

站點(diǎn)最新

站點(diǎn)最新列表

周大福“敬•自然”設(shè)計(jì)大賽開(kāi)啟

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

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

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

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

阿里行云

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

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

1499元買(mǎi)真八核云OS雙蛋大促

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

欄目最新

欄目最新列表

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

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

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

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

用ps作簡(jiǎn)單的作品展示頁(yè)面

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

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

Illustrator中制作針線(xiàn)縫制文字效果

Photoshop制作印刷凹凸字體

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

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