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

您的位置: 首頁 > 技術(shù)文檔 > 網(wǎng)頁制作 > 面向?qū)ο蟮腦HTML與CSS編程
標(biāo)記語言——清單 回到列表 WEB2.0的單手定則
 面向?qū)ο蟮腦HTML與CSS編程

作者:aoao 時間: 2008-01-14 文檔類型:原創(chuàng) 來自:藍(lán)色理想

要是XHTML與CSS能面向?qū)ο。。太陽?yīng)該從北邊升起了。但是,凡事都應(yīng)該帶著OO的思想來看問題,也勉強(qiáng)可以湊數(shù)拉。其實(shí),早在零幾年就有人提出了OO-style,不過已找不到。

那要怎樣OO呢?現(xiàn)在大家都知道CSS是可以介樣寫滴:

.G_G { /* xxxxxx */ }

我們可以把它大約看一個原型,或者說成類,-__-b 好像本來就是類的樣子,然后要在HTML里“實(shí)例化”一個對象,例如:

<div class="G_G">笨蛋嗷嗷</div>

該元素會使用上CSS相應(yīng)的定義,但僅僅對應(yīng)的class還是不夠的,因?yàn)槲覀冺撁婵赡軙嗵帒?yīng)用到這個class,為了處理好“私有”的關(guān)系,把剛才的代碼改成:

<div id="aoao" class="G_G">笨蛋嗷嗷</div>

這樣的話,這個ID為aoao的元素就會應(yīng)用.G_G這個類的定義,而且可以用#aoao{}這樣的選擇符來進(jìn)去私有效果的定義,這樣也不會影響到公共用的.G_G這個類,同時,#aoao定義的優(yōu)先權(quán)會比.G_G高,符合私有定義比公共定義優(yōu)先高的常理^^。

由于我使用了ID這個具有唯一性的東東,對這種私有定義后的東西復(fù)用就成了問題(一個ID只能在一個頁面上出現(xiàn)一次,不知道誰說的,反正是真理)。如果我們要實(shí)現(xiàn)多相同私有化的東東怎辦呢?那我們就必須來實(shí)現(xiàn)“多態(tài)”。挖哈哈。再改一下代碼:

<div class="G_G o_O">笨蛋嗷嗷</div>

一個是“G_G”,另一個是“o_O”,但是我們?nèi)绻褂蒙?o_O{}也是可以定義到元素,假如CSS是這樣的話:

.G_G {width:100%}
.o_O {color:#123456}

元素將都被定義到,而且由于定義不層疊,都會給應(yīng)用。再假如代碼是這樣的話,不知道會不會更好理解。

<div class="layout color">不是笨蛋嗷嗷鳥</div>

.layout{width:100%}
.color{color:#123456}

接著,要來實(shí)現(xiàn)“封裝”。子級選擇符大家應(yīng)該常常用吧,換代碼:

<div class="G_G"><span class="bendan">笨蛋</span>嗷嗷</div>

雖然.bendan{}跟.G_G .bendan{}都可以定義,但是后者只能應(yīng)用在class為“G_G”的元素,我們可以簡單把.bendan{}理解成全局定義,把.G_G .bendan{}理解成局部定義,這樣的話就有利于我們XHTML與CSS的模塊化。^^傳說中的“封裝”出現(xiàn)了,再接著。

<div id="aoao" class="G_G o_O"><span class="bendan">笨蛋</span>嗷嗷</div>

這樣的代碼就可以產(chǎn)生無數(shù)的變化了,還不明白的從頭看起。^

其實(shí),這些跟真正的面向?qū)ο筮有很大一段距離,我只是在學(xué)標(biāo)題黨,不過可以用它來理解ID與class的應(yīng)用。

經(jīng)典論壇討論
http://bbs.blueidea.com/thread-2823647-1-1.html

本文鏈接:http://m.95time.cn/tech/web/2008/5275.asp 

出處:藍(lán)色理想
責(zé)任編輯:moby

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

相關(guān)文章 更多相關(guān)鏈接
WEB2.0的單手定則
Web標(biāo)準(zhǔn)的web UI
Position方式構(gòu)建B/S結(jié)構(gòu)軟件界面
CSS模塊化設(shè)計(jì)——從空格談起
CSS框架的利與弊
作者文章 更多作者文章
如何減少網(wǎng)頁的內(nèi)存與CPU占用
文字適度閱讀的寬度或者字?jǐn)?shù)
如何快速的呈現(xiàn)我們的網(wǎng)頁
百分比的細(xì)節(jié)——容器大小篇
《設(shè)計(jì)心理學(xué)》閱讀筆記
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計(jì)比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點(diǎn)最新 站點(diǎn)最新列表
周大!熬•自然”設(shè)計(jì)大賽開啟
國際體驗(yàn)設(shè)計(jì)大會7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計(jì)算如何讓安全問題可控
云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會
阿里行云
云手機(jī)年終巨獻(xiàn),送禮標(biāo)配299起
阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標(biāo)
數(shù)據(jù)同步算法研究
用ps作簡單的作品展示頁面
CSS定位機(jī)制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項(xiàng)目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule

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

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

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

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項(xiàng)有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評論管理人員有權(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è)計(jì)之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計(jì)》
犀利開發(fā)—jQuery內(nèi)核詳解與實(shí)踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2