網(wǎng)頁切圖過程中div+css命名規(guī)則

時(shí)間：2023-09-10 00:00:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-10 00:00:02 來源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁切圖過程中div+css命名規(guī)則：liuyong0818 2008-12-06 14:33:00 1211 收藏

分類專欄： Html與Css 文章標(biāo)簽： css div wrapper download scroll search

版權(quán)

網(wǎng)頁切圖過程中div+css命名規(guī)則




內(nèi)容：content/container 導(dǎo)航：nav 側(cè)欄：sidebar 　 　

欄目：column 標(biāo)志：logo 頁面主體：main 　　

廣告：banner 熱點(diǎn)：hot 新聞：news

下載：download 子導(dǎo)航：subnav 菜單：menu

搜索：search 頁腳：footer 滾動(dòng)：scroll

版權(quán)：copyright 友情鏈接：friendlink 子菜單：submenu

內(nèi)容：content 標(biāo)簽頁：tab 文章列表：list

注冊(cè)：regsiter 提示信息：msg 小技巧：tips

加入：joinus 欄目標(biāo)題：title 指南：guild

服務(wù)：service 狀態(tài)：status 投票：vote

尾：footer 合作伙伴：partner 登錄條：loginbar

頁面外圍控制整體布局寬度：wrapper 左右中：left right center 　　




(二)注釋的寫法:

/* Footer */

內(nèi)容區(qū)

/* End Footer */

(三)id的命名:




(1)頁面結(jié)構(gòu)

容器: container 頁頭：header 內(nèi)容：content/container

頁面主體：main 頁尾：footer 導(dǎo)航：nav

側(cè)欄：sidebar 欄目：column 左右中：left right center

頁面外圍控制整體布局寬度：wrapper




(2)導(dǎo)航

導(dǎo)航：nav

主導(dǎo)航：mainbav

子導(dǎo)航：subnav

頂導(dǎo)航：topnav

邊導(dǎo)航：sidebar

左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar

菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary




(3)功能

標(biāo)志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊(cè)：regsiter

搜索：search

功能區(qū)：shop

標(biāo)題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動(dòng)：scroll

標(biāo)簽頁：tab

文章列表：list

提示信息：msg

當(dāng)前的: current

小技巧：tips

圖標(biāo): icon

注釋：note

指南：guild

服務(wù)：service

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權(quán)：copyright




(四)class的命名:

(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用"font+字體大小"作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如

.barnews { }

.barproduct { }




注意事項(xiàng):

1.一律小寫;

2.盡量用英文;

3.不加中杠和下劃線;

4.盡量不縮寫，除非一看就明白的單詞.

主要的 master.css 模塊 module.css 基本共用 base.css

主題 themes.css 專欄 columns.css 打印 print.css

文字 font.css 表單 forms.css 補(bǔ)丁 mend.css

布局，版面 layout.css

————————————————

版權(quán)聲明：本文為CSDN博主「liuyong0818」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：網(wǎng)頁切圖過程中div+css命名規(guī)則_漠上風(fēng)情的專欄-CSDN博客_web切圖命名規(guī)范