嵌套的行內(nèi)引用
你也能在引用內(nèi)容中嵌套引用其他文字,搞混了么?我也是,來看看示例吧:
I said, <q lang="en-us">Herman, do you like bubblegum? </q> And he said, <q lang="en-us">Yes. Bubblegum is what Harry calls <q lang="en-us">delicious</q>.</q>
此時瀏覽器會在適當?shù)牡胤绞褂秒p引號和單引號,像是這樣.
I said, "Herman, do you like bubblegum?" And he said, "Yes. Bubblegum is what Harry calls 'delicious'."
為<blockquote>加上樣式
Fast Company從雜志存檔里選出每日引言放在首頁,已經(jīng)行之有年了,為了保留FC的印刷體裁和強調(diào)效果,因此有很長一段時間這個引言被做成GIF圖片,讓設(shè)計者能以任何方式處理字型,達成期望的效果.
在2003年早秋,差不多是在我看著至愛的紅襪隊迎向歷史性冠軍之時,我決定拋棄GIF圖片,換上加了樣式的<blockquote>標簽.
從易用性角度看,以文字顯示引用內(nèi)容很有道理,由于無法重現(xiàn)GIF帶來的體裁便利性,因此我們面對著美化引言的挑戰(zhàn).當然,CSS幫了很大的忙.
背景的引用符號
想法十分簡單,就是分別制作開引號,閉引號兩張圖片,選用的色調(diào)足以隱沒在略為重疊的引用文字后面,引用同時也放在了270像素寬,淡灰色的圓角方塊內(nèi),以便配合網(wǎng)站整體風格.第三張圖片用來完成圓角效果以及引號.這三張圖片完全以各個元素debackground屬性放在css中.
我們先以photoshop或者你慣用的圖形處理程序建立這些圖片.這邊是個使用特殊字體的好機會,你能選用一般瀏覽器不支持的字體,在Fast Company的例子里,使用了雜志上的引號字體.
三張圖片
圖4-1 是剛建立的三張圖片,一張是開引號,頂部圓角,一張是閉引號,最后一張是底部的兩個圓角.
這三張圖片背景都是透明的,以便我們用css來控制背景的顏色.同時我們以白色制作了圓角,灰色制作了引號.
圖 4-1 為了制作引號圓角而以Photoshop創(chuàng)建的3張圖片
標記元素
目前,你只能以background或者background-image屬性為一個元素指定單張背景圖,因此,我們將為<blockquote>里的每個段落加上id.
我們會把一段內(nèi)容標為#quote,另一段內(nèi)容標為#other,使得最后有三個獨特元件能夠制定背景圖.
來看看我們會在這個示例接下來的步驟里中使用的標記方法:
<blockquote cite=" <p id="quote"><strong>Misquotations</strong> are the only quotations that are <strong>never</strong> misquoted.</p> <p id="author">—Hesketh Pearson</p> </blockquote>
這樣就完成了使用背景圖的預備工作了
出處:藍色理想
責任編輯:bluehearts
上一頁 標記語言——引用 [2] 下一頁 標記語言——引用 [4]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|