|
上文：Chapter 14 圖片替換
標準化設計解決方案 - 標記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook
Part 2: Simplebits Of Style 簡短精悍的樣式
Chapter 15 為<body>指定樣式
把內容與顯示效果分開設定的好處之一就是靈活,通過用CSS控制網(wǎng)站的版面布局(在第十二章用過的方法),就能控制整個網(wǎng)站的設計要素,改變幾條規(guī)則,就能立刻戲劇性的更新上千個頁面.
用CSS控制布局的的便利性示范之一,就是為<body>指定樣式,通過為<body>標簽加上class或者id,就能對頁面的任何標簽進行自定義控制.完全沒有重復定義的煩惱.
在這一章里,將探討如何通過為<body>標簽加上class而讓我們用一份標記結構切換兩種不同的版面配置.
兩欄或者三欄的布局
就像用CSS版面布局技術為Fast Company重新設計網(wǎng)站時,挑戰(zhàn)之一是:雖然所有頁面都共享相同的導航,頁尾區(qū),但是也需要建立兩種不同版面布局.
第一種布局是"索引頁(首頁)",見圖15-1,這是具備導航功能的頁面,讓使用者能繼續(xù)深入網(wǎng)站的目錄結構.這些頁面我們決定使用三欄布局.
圖15-1 Fast Company的三欄"索引頁"示范
第二種頁面布局則是"內文頁" 圖15-2.任何感覺是目的地的頁面都使用這種版面布局.為了提升易讀性,我們決定省略左邊欄,留下兩欄,也就是一個大欄放置內容,另一個放廣告.
圖15-2 Fast Company的兩欄 "內文頁" 示范.
我解釋這些的原因不是為了證明我們破解了某個版面布局的偉大謎團,而是為了示范為<body>標簽加上class就能調整欄寬,并且根據(jù)頁面形態(tài)放置或省略去第三欄.制作這樣的效果的時候,完全沒有重復任何規(guī)則,也沒有引入任何額外的樣式表.
出處：藍色理想
責任編輯：bluehearts
上一頁 下一頁 標記語言——為body指定樣式 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 標記語言——為body指定樣式 [1]
第 2 頁 
