中文字幕日本高清乱码,中文无码www在线观看

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

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

你將學(xué)會(huì)如何只用無序列表(ul)的圖片和一個(gè)樣式表來創(chuàng)建一個(gè)高質(zhì)量的相冊(cè)，你會(huì)經(jīng)歷這個(gè)相冊(cè)構(gòu)造的每一個(gè)步驟：

最開始的無序列表

運(yùn)行代碼框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Basic List</h3> <h4>by Stu Nicholls</h4> <ul id="gallery"> <li><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4"　title="#4" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></li> </ul> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

運(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; background:#888 url(http://sheneyan.com/image/article/css_gallery2/g26.jpg); } #gallery li { list-style-type:none; 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:239px; 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>Styled with CSS only</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> <h4>Instructions</h4> <ol> <li>Hover your mouse over the outer thumbnail images for a half size photo</li> <li>Click your mouse to enlarge the half size image to full size.</li> </ol> <p>The 'clicked' full size image will remain in the gallery until you select another 'clicked' image or click again outside of the gallery.</p> <p>Opera and Safari require the mouse click to be held for the full size image.</p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

每一個(gè)步驟都將被詳細(xì)解釋并有一個(gè)范例頁面顯示這附加的樣式。這樣你就能夠明白到底發(fā)生了些什么。　　這個(gè)相冊(cè)能夠工作在所有最新的瀏覽器上，并且我已經(jīng)加入了hack使得ie5.5能夠正確顯示這些樣式。樣式并不大也不復(fù)雜，但是這個(gè)布局需要大量的精力用于細(xì)節(jié)與事先計(jì)劃。

方法

步驟１

----------

圖像

為了這個(gè)相冊(cè)，我準(zhǔn)備了24個(gè)街頭涂鴉的圖片，每個(gè)的大小都是320x240px，我基于底下這些理由選擇這個(gè)大�。�

每個(gè)圖片的文件大小需要都差不多小，使得所有圖片能夠在這個(gè)相冊(cè)跑起來之前都加載完畢。
由于縮略圖圍繞著顯示區(qū)域，對(duì)于這7x7的格子來說，很容易算出這個(gè)縮略圖的大小是64x48px。
橫向有５個(gè)縮略圖跨過320px寬的顯示區(qū)域(320px/5=64px)。
縱向有５個(gè)縮略圖跨過240px高的顯示區(qū)域(240px/5=48px)。
每個(gè)角落都會(huì)有１個(gè)縮略圖，所以總共是２４個(gè)縮略圖(5+5+5+5+4=24)

任何時(shí)候都可以為了適應(yīng)任何質(zhì)量的圖片來改變這個(gè)布局，但一定要考慮下載圖片所需要的時(shí)間。

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

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

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

相關(guān)文章

更多相關(guān)鏈接

網(wǎng)頁中如何讓整段文字左右對(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)頁制作 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簡(jiǎn)單繪制一個(gè)可愛的鉛筆圖標(biāo)

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

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

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

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

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

Photoshop制作印刷凹凸字體

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

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