新聞中心
DIV+CSS樣式表命名不能隨意而為,否則以后進(jìn)行維護(hù)時(shí)困難很大。如同軟件開發(fā)中對(duì)類名的仔細(xì)處理一樣,DIV+CSS樣式表命名也需要遵循規(guī)則。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),法庫企業(yè)網(wǎng)站建設(shè),法庫品牌網(wǎng)站建設(shè),網(wǎng)站定制,法庫網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,法庫網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
如果要是就幾行或幾十行代碼吧!就根據(jù)英文單詞就行了??墒且嵌嗔四蔷筒缓脤懥?,有時(shí)候就直接用漢語拼音或拼音的首字母代替。可是多了吧,自己寫的都看不出是什么意思,別說再讓程序員調(diào)用這些樣式了。DIV+CSS樣式表的id和class的區(qū)別:就一句來概括, class可以定義多個(gè)值并且可以應(yīng)用到多個(gè)標(biāo)簽上,但id只能是一個(gè)。所以就開始查一些相關(guān)的DIV+CSS樣式表id和class的常用命名規(guī)則,請(qǐng)大家參考一下:
首先講一下DIV+CSS樣式表的id的常用命名規(guī)則如下表所示:
| 頁頭 | header | 登錄條 | loginBar | 標(biāo)志 | logo |
| 側(cè)欄 | sideBar | 廣告 | Banner | 導(dǎo)航 | nav |
| 子導(dǎo)航 | subNav | 菜單 | menu | 子菜單 | subMenu |
| 搜索 | search | 滾動(dòng) | scroll | 頁面主體 | main |
| 內(nèi)容 | content | 標(biāo)簽頁 | tab | 文章列表 | list |
| 提示信息 | msg | 小技巧 | tips | 欄目標(biāo)題 | title |
| 加入 | joinus | 指南 | guild | 服務(wù) | service |
| 熱點(diǎn) | hot | 新聞 | news | 下載 | download |
| 注冊(cè) | regsiter | 狀態(tài) | status | 按鈕 | btn |
| 投票 | vote | 合作伙伴 | partner | 友情鏈接 | friendLink |
| 頁腳 | footer | 版權(quán) | copyRight |
實(shí)際上上面的DIV+CSS樣式表的id命名也會(huì)經(jīng)常用大小寫和_來區(qū)分,比如主導(dǎo)航就是MainNav,如果還有必要在區(qū)分就是MainNav_1,MainNav_2等等。也可以使用"類型+變量名稱"的規(guī)則來命名,比如寫一個(gè)紅色字體的class,可以.f_red {}(f是font 字體的縮寫)。總之原則是:大小寫、_、縮寫,大大增強(qiáng)代碼的可讀性。
再講一下DIV+CSS樣式表的class的常用命名規(guī)則如下表所示:
| 外 套 | wrap | 主導(dǎo)航 | mainNav | 子導(dǎo)航 | subnav |
| 頁 腳 | footer | 整個(gè)頁面 | content | 頁 眉 | header |
| 商 標(biāo) | label | 標(biāo) 題 | title | 主導(dǎo)航 | mainNav |
| 邊導(dǎo)航 | sidebar | 左導(dǎo)航 | leftsideBar | 右導(dǎo)航 | rightsideBar |
| 旗 志 | logo | 標(biāo) 語 | banner | 菜單內(nèi)容 | menu1Content |
| 菜單容量 | menuContainer | 子菜單 | submenu | 邊導(dǎo)航圖標(biāo) | sidebarIcon |
| 注釋 | note | 面包屑 | breadCrumb | 容器 | container |
| 內(nèi)容 | content | 搜索 | search | 登陸 | login |
| 功能區(qū) | shop | 當(dāng)前的 | current |
當(dāng)然像
DIV+CSS樣式表的id和class的命名遠(yuǎn)遠(yuǎn)不止這些,可能還會(huì)有更多的命名,你可以用一些通俗的易懂.容易理解的一些來命名,如果您有更好的
DIV+CSS樣式表的id和class的命名規(guī)則的話,請(qǐng)留言,多多指教.
本文來自百洋軟件研究實(shí)驗(yàn)室的博客園博文《怎么給div+css樣式表命名的規(guī)則》
【編輯推薦】
- CSS 3中的炫目新功能搶先預(yù)覽
- CSS 3備受期待的8大功能
- CSS網(wǎng)頁布局困擾新手的八個(gè)問題
- 25個(gè)下拉菜單導(dǎo)航腳本下載
- HTML 5 正式標(biāo)準(zhǔn)恐將2022年才能正式發(fā)布
本文題目:談DIV+CSS樣式表命名的規(guī)則方法
轉(zhuǎn)載來于:http://fisionsoft.com.cn/article/cdcgico.html


咨詢
建站咨詢
