|
標(biāo)記和樣式結(jié)構(gòu)
在開始敘述兩種頁面共用的標(biāo)記結(jié)構(gòu)之后,這些敘述就會開始變得很有道理,為了達成分欄布局,會使用在第十二章里提過的絕對定位法.
內(nèi)文頁
內(nèi)文頁簡化過的標(biāo)記結(jié)構(gòu)看起來像是這樣:
<div id="header">
...header info here...
</div>
<div id="content">
...content here...
</div>
<div id="right">
...right column info...
</div>
<div id="footer">
...footer info...
</div>
以CSS規(guī)則為#content與#footer加上足以使用絕對定位法放進#right的右外補丁,在這個例子中,190像素剛好可以滿足.
#content, #footer {
margin: 10px 190px 10px 10px;
}
索引頁
對索引頁來說,標(biāo)記結(jié)構(gòu)完全相同,因此不必復(fù)制一份共享的CSS規(guī)則,但是在#content左側(cè)加了額外的<div>作為第三欄(#left).
<div id="header">
...header info here...
</div>
<div id="content">
...content here...
</div>
<div id="left">
...left column info...
</div>
<div id="right">
...right column info...
</div>
<div id="footer">
...footer info...
</div>
對這份三欄結(jié)構(gòu)來說,不僅要為#content與#footer設(shè)定右外補丁以容納右欄,還要設(shè)定左外補丁,容納新加進來的左欄.
但是先前已經(jīng)把左外補丁設(shè)為10像素了,以配合只擁有雙欄的預(yù)設(shè)內(nèi)文頁布局.
這個<body>有分類
這就是<body>標(biāo)簽加入游戲的地方:通過為<body>指定class,指定這個是索引頁,就能為這個分類編寫特殊的規(guī)則了.
舉例來說,為了要覆蓋預(yù)設(shè)的10像素左外補丁,就需要為索引頁的<body>標(biāo)簽加上一下這個分類.:
<body class="index">
在原本為#content 與 #footer設(shè)定補丁的規(guī)則之后,我們加上以下的CSS:
#content, #footer {
margin: 10px 190px 10px 10px;
}
body.index #content, body.index #footer {
margin-left: 190px;
}
在把<body>標(biāo)簽設(shè)為index分類的頁面里,左邊擴大190像素(與右邊相同)可以用來容納左欄,如果不指定index分類的話,左外補丁就會是預(yù)設(shè)值里聲明的10像素了.
現(xiàn)在就能在兩欄,三欄布局之間切換了,只要為<body>標(biāo)簽指定分類,在需要的時候為標(biāo)記源代碼加上額外的<div>即可,你也能指定更多分類,能處理的頁面類型數(shù)目并沒有限制.
標(biāo)記區(qū)域與名稱可以維持相同,根據(jù)頁面類型進行微調(diào)即可.
出處：藍色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——為body指定樣式 [1] 下一頁 標(biāo)記語言——為body指定樣式 [3]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 標(biāo)記語言——為body指定樣式 [2]
