|
不止處理分欄
我以切換Fast Company網(wǎng)站的分欄數(shù)目作為例子,但是相同的想法也能自定義頁面上的任何元素.
舉例來說,如果在索引頁上讓所有以<h1>標(biāo)注的頁面標(biāo)題以橘色(而不是預(yù)設(shè)的顏色)顯示,你可以在預(yù)設(shè)值之后加上額外的CSS聲明.在所有頁面上,都能使用以下這段CSS:
h1 {
font-family: Arial, Verdana, sans-serif;
font-size: 140%;
color: purple;
}
而這段CSS只會對索引也發(fā)生作用.
body.index h1 {
color: orange;
}
你應(yīng)該已經(jīng)發(fā)現(xiàn)了,只需要在專門用于索引頁的聲明里面加上跟預(yù)設(shè)值不同的規(guī)則即可.在這個(gè)例子中,再使用<body class="index">的頁面上,<h1>標(biāo)簽會以140%大小的橘色Arial字體顯示,但不必為<h1>加上class,或是加上其他額外的標(biāo)簽.
我在這里用的是非常簡單的例子.不過你能開始想象為<body>標(biāo)簽指定適當(dāng)?shù)腸lass,建立多種頁面類型的可行性,這些分類可以用來觸發(fā)完全不同的版面布局,色彩組合與設(shè)計(jì),只需要單一的CSS文件,十分類似的標(biāo)記源代碼結(jié)構(gòu)就能辦到.
"你在這里"
除了為<body>標(biāo)簽加上分類屬性之外,加上id也能得到有趣的結(jié)果.
舉例來說,技術(shù)高超的設(shè)計(jì)師或許能以<body>標(biāo)簽的id處罰導(dǎo)航元素,提示使用者目前位于哪個(gè)頁面,讓我們看看這要如何才能辦到.
導(dǎo)航清單
在這個(gè)例子中,將借用第一章"技巧延伸"里面提到的迷你分頁標(biāo)簽,這邊的導(dǎo)航條用了一個(gè)單純的無序清單,里面包含了幾個(gè)鏈接,像是這樣:
<ul id="minitabs">
<li><a href="/apples/">Apples</a></li>
<li><a href="/spaghetti/">Spaghetti</a></li>
<li><a href="/greenbeans/">Green Beans</a></li>
<li><a href="/milk/">Milk</a></li>
</ul>
你或許記得我們以CSS為這個(gè)清單加上樣式,把項(xiàng)目轉(zhuǎn)成水平排列,同時(shí)在鼠標(biāo)移過的時(shí)候顯示標(biāo)簽.圖15-3是瀏覽器顯示的效果.
圖15-3 水平導(dǎo)航條,顯示標(biāo)題效果
你或許還記得為了達(dá)成 "你在這里" 的效果(將某個(gè)鏈接的標(biāo)簽固定在"選定"狀態(tài)),而將想要固定的鏈接加上了class:
<li><a href="/spaghetti/" class="active">spaghetti</a></li>
我們也加了一條CSS規(guī)則,為class="active"的鏈接應(yīng)用background-image:
#minitabs a.active {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
然而有另一種方法可以完成這個(gè)效果,能不動到導(dǎo)航條的標(biāo)記源代碼,但是又能突出使用者目前所在的頁面,那就是為"body"標(biāo)簽指定id.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——為body指定樣式 [2] 下一頁 標(biāo)記語言——為body指定樣式 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 標(biāo)記語言——為body指定樣式 [3]
