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

1、第第1010章章 網(wǎng)頁(yè)樣式綜合案例網(wǎng)頁(yè)樣式綜合案例靈活的靈活的電子相冊(cè)電子相冊(cè) 本章簡(jiǎn)介：本章簡(jiǎn)介： 前面幾章針對(duì)前面幾章針對(duì)CSSCSS設(shè)計(jì)中的幾個(gè)專項(xiàng)分設(shè)計(jì)中的幾個(gè)專項(xiàng)分別進(jìn)行了講解，本章通過(guò)一個(gè)案例，別進(jìn)行了講解，本章通過(guò)一個(gè)案例，對(duì)對(duì)CSSCSS的樣式設(shè)計(jì)進(jìn)行階段復(fù)習(xí)。的樣式設(shè)計(jì)進(jìn)行階段復(fù)習(xí)。本章通過(guò)本章通過(guò)CSSCSS對(duì)電子相冊(cè)進(jìn)行排版，對(duì)電子相冊(cè)進(jìn)行排版，進(jìn)一步介紹進(jìn)一步介紹CSSCSS排版的方法。排版的方法。 搭建框架搭建框架10.1陣列模式陣列模式10.2單列模式單列模式10.3改進(jìn)陣列模式改進(jìn)陣列模式10.4 10.1搭 建 框 架首先來(lái)搭建頁(yè)面的框架結(jié)構(gòu)。搭建框首先來(lái)搭建頁(yè)

2、面的框架結(jié)構(gòu)。搭建框架主要應(yīng)考慮在實(shí)際頁(yè)面中相冊(cè)的具體結(jié)架主要應(yīng)考慮在實(shí)際頁(yè)面中相冊(cè)的具體結(jié)構(gòu)和形式，包括照片整體排列的方法、用構(gòu)和形式，包括照片整體排列的方法、用戶可能的瀏覽情況、照片是否需要自動(dòng)調(diào)戶可能的瀏覽情況、照片是否需要自動(dòng)調(diào)整等。整等。首先對(duì)于陣列模式，不同的用戶可能首先對(duì)于陣列模式，不同的用戶可能有不同的瀏覽器。顯示器分辨率為有不同的瀏覽器。顯示器分辨率為“10241024768”768”的用戶可能希望每行能顯示的用戶可能希望每行能顯示5 56 6幅縮略圖，而顯示器分辨率為幅縮略圖，而顯示器分辨率為“128012801024”1024”的用戶或許希望每行能容的用戶或許希望每行能容

3、納納7 78 8幅，寬屏用戶或許希望每行能顯示幅，寬屏用戶或許希望每行能顯示更多。其次，即使在同一個(gè)瀏覽器下，用更多。其次，即使在同一個(gè)瀏覽器下，用戶也不一定能夠全屏幕欣賞，這就需要照戶也不一定能夠全屏幕欣賞，這就需要照片能夠自動(dòng)排列和換行。如果使用片能夠自動(dòng)排列和換行。如果使用排版，是無(wú)論如何也不可能實(shí)現(xiàn)這一點(diǎn)的。排版，是無(wú)論如何也不可能實(shí)現(xiàn)這一點(diǎn)的。未設(shè)置CSS樣式的效果 10.2陣 列 模 式首先來(lái)討論陣列模式的實(shí)現(xiàn)方法，它主要要求照片能夠根據(jù)瀏覽器的寬度自動(dòng)首先來(lái)討論陣列模式的實(shí)現(xiàn)方法，它主要要求照片能夠根據(jù)瀏覽器的寬度自動(dòng)調(diào)整每行的照片數(shù)，在調(diào)整每行的照片數(shù)，在CSSCSS排版中正好

4、可以用排版中正好可以用floatfloat屬性來(lái)實(shí)現(xiàn)；另外考慮到需要排屬性來(lái)實(shí)現(xiàn)；另外考慮到需要排列整齊，而且照片有橫向顯示的也有縱向顯示的，因此將塊擴(kuò)大為一個(gè)正方形，并列整齊，而且照片有橫向顯示的也有縱向顯示的，因此將塊擴(kuò)大為一個(gè)正方形，并且給照片加上邊框。且給照片加上邊框。以陣列模式顯示 10.3單 列 模 式單列模式的照片豎直排列，每張照片的右側(cè)顯示關(guān)于該照片的詳細(xì)信息，并且單列模式的照片豎直排列，每張照片的右側(cè)顯示關(guān)于該照片的詳細(xì)信息，并且不更改頁(yè)面的不更改頁(yè)面的HTMLHTML結(jié)構(gòu)。結(jié)構(gòu)。單列模式 10.4改進(jìn)陣列模式對(duì)于陣列模式，如果也能夠看到詳細(xì)信息就更好了。如果能夠在鼠標(biāo)指針經(jīng)

5、過(guò)對(duì)于陣列模式，如果也能夠看到詳細(xì)信息就更好了。如果能夠在鼠標(biāo)指針經(jīng)過(guò)某張照片時(shí)出現(xiàn)一個(gè)信息框，并顯示文字內(nèi)容，鼠標(biāo)離開(kāi)以后該信息框自動(dòng)消失，某張照片時(shí)出現(xiàn)一個(gè)信息框，并顯示文字內(nèi)容，鼠標(biāo)離開(kāi)以后該信息框自動(dòng)消失，這樣不但頁(yè)面非常簡(jiǎn)潔，而且可以方便瀏覽者掌握信息。這樣不但頁(yè)面非常簡(jiǎn)潔，而且可以方便瀏覽者掌握信息。在陣列模式中動(dòng)態(tài)顯示文字信息 小結(jié)在學(xué)習(xí)前面各章的技術(shù)專題之后，本章制作了一個(gè)比較完整的實(shí)例。在學(xué)習(xí)前面各章的技術(shù)專題之后，本章制作了一個(gè)比較完整的實(shí)例。本章的電子相冊(cè)的實(shí)例充分展示了本章的電子相冊(cè)的實(shí)例充分展示了CSSCSS的作用，可以將一個(gè)非?；?、的作用，可以將一個(gè)非?；?、簡(jiǎn)單的頁(yè)面制作成豐富多彩的樣式。本章的目的并不僅僅是介紹電子相冊(cè)簡(jiǎn)單的頁(yè)面制作成豐富多彩的樣式。本章的目的并不僅僅是介紹電子相冊(cè)的排版方法，更重要的是加深理解盒子模型、標(biāo)準(zhǔn)流、浮動(dòng)和定位這的排版方法，更重要的是加深理解盒子模型、標(biāo)準(zhǔn)流、浮動(dòng)