第10章網(wǎng)頁(yè)樣式綜合案例——靈活的電子相冊(cè)

本章簡(jiǎn)介：前面幾章針對(duì)CSS設(shè)計(jì)中的幾個(gè)專(zhuān)項(xiàng)分別進(jìn)行了講解，本章通過(guò)一個(gè)案例，對(duì)CSS的樣式設(shè)計(jì)進(jìn)行階段復(fù)習(xí)。本章通過(guò)CSS對(duì)電子相冊(cè)進(jìn)行排版，進(jìn)一步介紹CSS排版的方法。

搭建框架10.1陣列模式10.2單列模式10.3改進(jìn)陣列模式10.4

10.1搭建框架首先來(lái)搭建頁(yè)面的框架結(jié)構(gòu)。搭建框架主要應(yīng)考慮在實(shí)際頁(yè)面中相冊(cè)的具體結(jié)構(gòu)和形式，包括照片整體排列的方法、用戶(hù)可能的瀏覽情況、照片是否需要自動(dòng)調(diào)整等。首先對(duì)于陣列模式，不同的用戶(hù)可能有不同的瀏覽器。顯示器分辨率為“1024×768”的用戶(hù)可能希望每行能顯示5～6幅縮略圖，而顯示器分辨率為“1280×1024”的用戶(hù)或許希望每行能容納7～8幅，寬屏用戶(hù)或許希望每行能顯示更多。其次，即使在同一個(gè)瀏覽器下，用戶(hù)也不一定能夠全屏幕欣賞，這就需要照片能夠自動(dòng)排列和換行。如果使用<table>排版，是無(wú)論如何也不可能實(shí)現(xiàn)這一點(diǎn)的。未設(shè)置CSS樣式的效果

10.2陣列模式首先來(lái)討論陣列模式的實(shí)現(xiàn)方法，它主要要求照片能夠根據(jù)瀏覽器的寬度自動(dòng)調(diào)整每行的照片數(shù)，在CSS排版中正好可以用float屬性來(lái)實(shí)現(xiàn)；另外考慮到需要排列整齊，而且照片有橫向顯示的也有縱向顯示的，因此將塊擴(kuò)大為一個(gè)正方形，并且給照片加上邊框。以陣列模式顯示

10.3單列模式單列模式的照片豎直排列，每張照片的右側(cè)顯示關(guān)于該照片的詳細(xì)信息，并且不更改頁(yè)面的HTML結(jié)構(gòu)。單列模式

10.4改進(jìn)陣列模式對(duì)于陣列模式，如果也能夠看到詳細(xì)信息就更好了。如果能夠在鼠標(biāo)指針經(jīng)過(guò)某張照片時(shí)出現(xiàn)一個(gè)信息框，并顯示文字內(nèi)容，鼠標(biāo)離開(kāi)以后該信息框自動(dòng)消失，這樣不但頁(yè)面非常簡(jiǎn)潔，而且可以方便瀏覽者掌握信息。在陣列模式中動(dòng)態(tài)顯示文字信息

小結(jié)在學(xué)習(xí)前面各章的技術(shù)專(zhuān)題之后，本章制作了一個(gè)比較完整的實(shí)例。本章的電子相冊(cè)的實(shí)例充分展示了CSS的作用，可以將一個(gè)非?；?、簡(jiǎn)單的頁(yè)面制作成豐富多彩的樣式。本章的目的并不僅僅是介紹電子相冊(cè)的排版方法，更重要的是加深理解盒子模型、標(biāo)準(zhǔn)流、浮動(dòng)和