中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術(shù)文檔 > 網(wǎng)頁制作 > 標記語言——引用
多IE版本共存——IETester 回到列表 標記語言——邪惡的表格
 標記語言——引用

作者:zergine 時間: 2008-05-09 文檔類型:翻譯 來自:藍色理想

第 1 頁 標記語言——引用 [1]
第 2 頁 標記語言——引用 [2]
第 3 頁 標記語言——引用 [3]
第 4 頁 標記語言——引用 [4]
第 5 頁 標記語言——引用 [5]

嵌套的行內(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">&#8212;Hesketh Pearson</p>
</blockquote>

這樣就完成了使用背景圖的預備工作了

出處:藍色理想
責任編輯:bluehearts

上一頁 標記語言——引用 [2] 下一頁 標記語言——引用 [4]

◎進入論壇網(wǎng)頁制作WEB標準化版塊參加討論,我還想發(fā)表評論。

相關(guān)文章 更多相關(guān)鏈接
標記語言——表單
標記語言——邪惡的表格
標記語言——標題
火星人的耳機
標記語言——清單
作者文章 更多作者文章
標記語言——表單
標記語言——邪惡的表格
標記語言——標題
HTML 5 預覽
CSS Hack整理
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計比賽 網(wǎng)頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大!熬•自然”設(shè)計大賽開啟
國際體驗設(shè)計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設(shè)計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標
數(shù)據(jù)同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule
>> 分頁 首頁 前頁 后頁 尾頁 頁次:3/51個記錄/頁 轉(zhuǎn)到 頁 共5個記錄

藍色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項有關(guān)法律法規(guī)
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計》
犀利開發(fā)—jQuery內(nèi)核詳解與實踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2