DIV+CSS的命名規則介紹

本篇內容介紹了“DIV+CSS的命名規則介紹”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

你對DIV+CSS命名規則是否了解，這里和大家分享一下，首先看一下常用代碼結構，div：主要用于布局，分割頁面的結構；ul/ol：用于無序/有序列表。

DIV+CSS命名規則

常用代碼結構：

div：主要用于布局，分割頁面的結構

ul/ol：用于無序/有序列表

span：沒有特殊的意義，可以用作排版的輔助，例如：

• (4.23)隱居豆腐店

然后在css中定義span為右浮動，實現了日期和標題分兩側顯示的效果

h2-h7：標題

h2-h7 根據重要性依次遞減

h2位最重要的標題

◆label：為了使你的表單更有親和力而且還能輔助表單排版的好東西，例如：

<label for="user-password">密　碼label>  <input type="password" name="password"   id="user-password" />

◆fieldset & legend：fildset套在表單外，legend用于描述表單內容。例如：

<form>  <fieldset>  <legend>titlelegend>  <label for="user-password">密　碼label>  <input type="password" name="password" id="user-password" />  fieldset>  form>

◆dl,dt,dd：當頁面中出現***行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽，例如：

<dl>  <dt>什么是CSS?dt>  <dd>CSS就是一種叫做樣式表（stylesheet）的技術。  也有的人稱之為層疊樣式表（Cascading Stylesheet）。<dd>  <dt>什么是XHTML？dt>  < dd>XHTML是一個基于XML的置標語言，看起來與HTML有些想像，  只有一些小的但重要的區別。可以這樣看，  XHTML就是一個扮演著類似 HTML的角色的XML。本質上說，  XHTML是一個橋接（過渡）技術，  結合了XML（有幾分）的強大功能及HTML（大多數）的簡單特性。dd>  dl>

C #content

S #subcol

M #maincol

X #xcol

這是縱向布局的XHTML結構，c-smx表示網頁有三個縱欄, c-sm表示有兩個縱欄, c-mx表示有兩個縱欄其中一個是附屬的, c-m表示一個縱欄。

其中在三縱欄的布局需要分為兩層 ***層是#subcol與#main第二層是#main中的#maincol與#xcol。

（一）自定義命名：

根據w3c網站上給出的,***是用意義命名

比如：是重要的新聞高亮顯示（像紅色）

有兩種

◆red{color:red}

◆important-news{color:red}

很顯然第二種傳達的意義更加明確,所以盡量不要用意義不明確的作為自己自定義的名字

(二)注釋的寫法:

/*Footer*/

內容區

/*EndFooter*/

(三)id的命名:

(1)頁面結構

容器:container頁頭：header內容：content/container

頁面主體：main頁尾：footer導航：nav

側欄：sidebar欄目：column頁面外圍控制整體布局寬度：wrapper

左右中：leftrightcenter

(2)導航

導航：nav主導航：mainbav子導航：subnav

頂導航：topnav邊導航：sidebar左導航：leftsidebar

右導航：rightsidebar菜單：menu子菜單：submenu

標題:title摘要:summary

(3)功能

標志：logo廣告：banner登陸：login登錄條：loginbar

注冊：regsiter搜索：search功能區：shop

標題：title加入：joinus　狀態：status按鈕：btn

滾動：scroll標簽頁：tab文章列表：list提示信息：msg

當前的:current小技巧：tips圖標:icon注釋：note

指南：guild　服務：service熱點：hot新聞：news

下載：download投票：vote合作伙伴：partner

友情鏈接：link版權：copyrigh。t

(四)class的命名:

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

.red{color:red;}   .f60{color:#f60;}   .ff8600{color:#ff8600;}

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

.font12px{font-size:12px;}   .font9pt{font-size:9pt;}

(3)對齊樣式,使用對齊目標的英文名稱,如

.left{float:left;}   .bottom{float:bottom;}

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

.barnews{}   .barproduct{}

注意事項::

1.一律小寫;

2.盡量用英文;

3.不加中杠和下劃線;

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

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

布局，版面layout.css主題themes.css專欄columns.css

文字font.css表單forms.css補丁mend.css打印print.css

◆DIV排版的核心：即CSS盒子模式

CSS每個div盒子模式包括：內容(content)、填充(padding)、邊框(border)、邊界(margin)

“DIV+CSS的命名規則介紹”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！