久久精品国产只有精品2020,黄色毛片免费看,av在线免费播放一区

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

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

步驟９

----------

添加列表的背景

現(xiàn)在這個(gè)相冊(cè)已經(jīng)初具規(guī)模，但我們?nèi)匀挥幸粋€(gè)大大空空的顯示區(qū)域，并且當(dāng)圖片被放大時(shí)有一個(gè)空格遺留。

對(duì)<ul>使用一個(gè)整體的背景的背景來(lái)填充這些空隙是個(gè)不錯(cuò)的主意。

在我的例子中，我已經(jīng)創(chuàng)建了一個(gè)圖片能夠保持這些涂鴉場(chǎng)景，并當(dāng)鼠標(biāo)劃過(guò)縮略圖時(shí)給出一個(gè)說(shuō)明：?jiǎn)螕暨@里。

[img]../image/g26.jpg[/img]

當(dāng)然，你可以自行設(shè)計(jì)你想要的樣式。

修改ul#gallery的樣式，并增加背景。

/* Adding the background image */
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
background:#888 url(../image/g26.jpg);
}

background:#888 url(../image/g26.jpg); 添加這個(gè)url給背景圖。

步驟９示例：

運(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 url(http://sheneyan.com/image/article/css_gallery2/g26.jpg); } #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 9 - Adding a background image to the list</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)在已經(jīng)有了默認(rèn)圖片。

步驟１０

----------

Opera不喜歡:focus和:active

這是真的。Opera的:active無(wú)法工作，并且當(dāng)鼠標(biāo)單擊并釋放時(shí)無(wú)法保存:focus狀態(tài)。

我們能夠讓Opera作它自己的事，或者我們能夠添加一個(gè)hack告訴Opera使用:hover顯示完整大小圖片而忽略那兩個(gè)步驟。

是的，這是一個(gè)專門針對(duì)Opera的hack,它是“合法”的css但w3c的驗(yàn)證器無(wú)法識(shí)別它，因?yàn)樗皇且粋€(gè)推薦。

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:320px;
height:240px;
border:0;
z-index:10;
}
}

只有Opera 7+理解這段條件樣式：直接放大hover鏈接和圖片到320x240px(和active/focus鏈接、圖片一樣大小)

運(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 url(http://sheneyan.com/image/article/css_gallery2/g26.jpg); } #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; } /* hack for Opera 7+ */ @media all and (min-width:0px){ #gallery a:hover { background:#888; width:320px; height:240px; padding:48px 64px; position:absolute; left:0; top:0; z-index:10; } #gallery a:hover img { background:#aaa; position:relative; width:320px; height:240px; border:0; z-index:10; } } </style> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Step 10 - A fix for Opera 7+ browsers</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)行]

如果你是用Opera 7+，你會(huì)看見(jiàn)當(dāng)鼠標(biāo)位于縮略圖上時(shí)顯示完整大小圖片，以及一個(gè)“單擊”的聲明和灰色的背景。The central default images is still in place and if you should click an image then you will not notice the problem(沒(méi)opera,不理解這句話什么意思...)

結(jié)束

自由使用這個(gè)樣式來(lái)操縱你的圖片，或稍微修改適應(yīng)不同大小甚至不同布局的圖片。唯一的限制就是你的想像力。

最后一件事：非常感謝提供這些攝影師提供他們免費(fèi)使用的作品stock.xchng

關(guān)于作者

Stu的個(gè)人站點(diǎn)記錄了他對(duì)CSS的各種可能性的探索與理解。從標(biāo)準(zhǔn)的超鏈接到他的奇異的實(shí)驗(yàn)性技術(shù)。他所有的例子都只使用CSS--沒(méi)有javascript，或者其他任何語(yǔ)言使用在他的例子里。http://www.cssplay.co.uk/

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

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

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

相關(guān)文章

更多相關(guān)鏈接

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

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

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

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

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


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(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元買真八核云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中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

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

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