1、第第1010章章 網頁樣式綜合案例網頁樣式綜合案例靈活的靈活的電子相冊電子相冊 本章簡介：本章簡介： 前面幾章針對前面幾章針對CSSCSS設計中的幾個專項分設計中的幾個專項分別進行了講解，本章通過一個案例，別進行了講解，本章通過一個案例，對對CSSCSS的樣式設計進行階段復習。的樣式設計進行階段復習。本章通過本章通過CSSCSS對電子相冊進行排版，對電子相冊進行排版，進一步介紹進一步介紹CSSCSS排版的方法。排版的方法。 搭建框架搭建框架10.1陣列模式陣列模式10.2單列模式單列模式10.3改進陣列模式改進陣列模式10.4 10.1搭 建 框 架首先來搭建頁面的框架結構。搭建框首先來搭建頁

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

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

4、可以用排版中正好可以用floatfloat屬性來實現；另外考慮到需要排屬性來實現；另外考慮到需要排列整齊，而且照片有橫向顯示的也有縱向顯示的，因此將塊擴大為一個正方形，并列整齊，而且照片有橫向顯示的也有縱向顯示的，因此將塊擴大為一個正方形，并且給照片加上邊框。且給照片加上邊框。以陣列模式顯示 10.3單 列 模 式單列模式的照片豎直排列，每張照片的右側顯示關于該照片的詳細信息，并且單列模式的照片豎直排列，每張照片的右側顯示關于該照片的詳細信息，并且不更改頁面的不更改頁面的HTMLHTML結構。結構。單列模式 10.4改進陣列模式對于陣列模式，如果也能夠看到詳細信息就更好了。如果能夠在鼠標指針經

5、過對于陣列模式，如果也能夠看到詳細信息就更好了。如果能夠在鼠標指針經過某張照片時出現一個信息框，并顯示文字內容，鼠標離開以后該信息框自動消失，某張照片時出現一個信息框，并顯示文字內容，鼠標離開以后該信息框自動消失，這樣不但頁面非常簡潔，而且可以方便瀏覽者掌握信息。這樣不但頁面非常簡潔，而且可以方便瀏覽者掌握信息。在陣列模式中動態顯示文字信息 小結在學習前面各章的技術專題之后，本章制作了一個比較完整的實例。在學習前面各章的技術專題之后，本章制作了一個比較完整的實例。本章的電子相冊的實例充分展示了本章的電子相冊的實例充分展示了CSSCSS的作用，可以將一個非常基本、的作用，可以將一個非常基本、簡單的頁面制作成豐富多彩的樣式。本章的目的并不僅僅是介紹電子相冊簡單的頁面制作成豐富多彩的樣式。本章的目的并不僅僅是介紹電子相冊的排版方法，更重要的是加深理解盒子模型、標準流、浮動和定位這的排版方法，更重要的是加深理解盒子模型、標準流、浮動