|
步驟６
----------
定位縮略圖
現(xiàn)在，我們要開始將這些縮略圖定位到顯示區(qū)域的邊緣。
為了做到這個(gè)，我們要定義<li>標(biāo)簽的樣式。
步驟６ａ－－移動(dòng)上面那行的縮略圖到位
/* Default style for list items */
#gallery li {
width:64px;
height:48px;
float:left;
z-index:100;
}
width:64px; 設(shè)置寬度64px
height:48px; 設(shè)置高度48px
float:left; 讓所有這些圖片默認(rèn)在左側(cè)浮動(dòng)。
z-index:100; 確保所有縮略圖可視。
好了，這些圖片已經(jīng)被分組到四行并且在１７和１８之間有個(gè)空格。
步驟６ａ示例：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
步驟６ｂ－－移動(dòng)'lft'的列表元素到左邊去
/* Styling the left side of the display area */
#gallery li.lft {
float:left;
clear:left;
}
float:left;圖片漂到左邊去
clear:left;清除掉任何之前定義漂浮了的圖片，讓他們顯示到底下去。
現(xiàn)在有點(diǎn)亂，不過顯示區(qū)域的左邊現(xiàn)在被填充了。
IE會(huì)添加一個(gè)小空格在每個(gè)圖片的縱向之間，不過這個(gè)問題稍后會(huì)處理。
步驟６ｂ示例
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
步驟６ｃ－－移動(dòng)樣式為'rgt'的列表元素到右邊。
/* Styling the right side of the display area */
#gallery li.rgt {
float:right;
clear:right;
}
float:right; 移動(dòng)圖片到右邊去
clear:right; 清除所有實(shí)現(xiàn)設(shè)置浮動(dòng)的圖片，讓他們顯示到底下去。
如果你使用ie,你現(xiàn)在會(huì)看見，上面、左邊和右邊的圖片已經(jīng)在正確的位置了，但是底下那行還不是在底下。其他所有的瀏覽器會(huì)顯示正確的順序。
步驟６ｃ示例：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
這里有一個(gè)特定的列表元素(class="pad")被借用來播放圖片。我們將設(shè)置這個(gè)樣式來強(qiáng)制底部那行圖片進(jìn)入正確位置。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 XHTML+CSS創(chuàng)建“兩步式”的相冊(cè) [4] 下一頁 XHTML+CSS創(chuàng)建“兩步式”的相冊(cè) [6]
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 
第 5 頁 XHTML+CSS創(chuàng)建“兩步式”的相冊(cè) [5]
