DIV CSS網頁布局常用的一些命名規則和書寫

2021-09-05 23:12:42 字數 2411 閱讀 3469

介紹服務

/******主導航******/

#mainmenu 

#mainmenu ul li 

/******主導航結束******/

9、滑鼠手勢:

在xhtml標準中,hand只被ie識別,當需要將滑鼠手勢轉換為「手形」時,則將「hand」換為「pointer」,即「cursor:pointer;」

二.注釋書寫規範

1、行間注釋:

直接寫於屬性值後面,如:

.search

2、整段注釋:

分別在開始及結束地方加入注釋,如:

/******搜尋條******/

.search 

/******搜尋條結束******/

關於注釋,您可以參考:

三.樣式屬性**縮寫

1、不同類有相同屬性及屬性值的縮寫:

對於兩個不同的類,但是其中有部分相同甚至是全部相同的屬性及屬性值時,應對其加以合併縮寫,特別是當有多個不同的類而有相同的屬性及屬性值時,合併縮寫可以減少**量並易於控制。如:

#mainmenu 

#submenu 

兩個不同類的屬性值有重複之處,剛可以縮寫為:

#mainmenu,#submenu 

#mainmenu 

#submenu 

2、同一屬性的縮寫:

同一屬性根據它的屬性值也可以進行簡寫,如:

.search 

.search 

3、內外側邊框的縮寫:

在css中關於內外側邊框的距離是按照上、右、下、左的順序來排列的,當這四個屬性值不同時也可直接縮寫,如:

.btn 

則可縮寫為:

.btn 

而如果當上邊與下邊、左邊與右邊的邊框屬性值相同時,則屬性值可以直接縮寫為兩個,如:

.btn 

縮寫為:

.btn 

而當上下左右四個邊框的屬性值都相同時,則可以直接縮寫成乙個,如:

.btn 

縮寫為:

.btn

4、顏色值的縮寫:

當rgb三個顏色值數值相同時,可縮寫顏色值**。如:

.menu 

可縮寫為:

.menu 

關於縮寫您可以參考:

四.hack書寫規範 

因為不同瀏覽器對w3c標準的支援不一樣,各個瀏覽器對於頁面的解釋呈視也不盡相同,比如ie在很多情況下就與ff存在3px的差距,對於這些差異性,就需要利用css 的hack來進行調整,當然在沒有必要的情況下,最好不要寫hack來進行調整,避免因為hack而導致頁面出現問題。

1、 ie6、ie7、firefox之間的相容寫法:

寫法一:

ie都能識別*;標準瀏覽器(如ff)不能識別*;

ie6能識別*,但不能識別 !important,

ie7能識別*,也能識別!important;

ff不能識別*,但能識別!important;

根據上述表達,同一類/id下的css  hack可寫為:

.searchinput 

一般三者的書寫順序為:ff、ie7、ie6.

寫法二:

ie6可識別「_」,而ie7及ff皆不能識別,所以當只針對ie6與ie7及ff之間的區別時,可這樣書寫:

.searchinput 

寫法三:

*+html 與 *html 是ie特有的標籤, firefox 暫不支援。

.searchinput 

*html .searchinput /*僅ie6*/

*+html .searchinput /*僅ie7*/

遮蔽ie瀏覽器:

select是選擇符,根據情況更換。第二句是mac上safari瀏覽器獨有的。

*:lang(zh) select  /*ff的專用*/

select:empty  /*safari可見*/

ie6可識別:

這裡主要是通過css注釋分開乙個屬性與值,注釋在冒號前。

select 

ie的if條件hack寫法:

所有的ie可識別:

only ie 

只有ie5.0可以識別:

only ie 5.0 

ie5.0包換ie5.5都可以識別:

only ie 5.0+ 

僅ie6可識別:

only ie 6- 

ie6以及ie6以下的ie5.x都可識別:

only ie 6/+ 

僅ie7可識別:

only ie 7/- 

關於css hack和bug您可以參考:

2、清除浮動:

在firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的hack來對父級做一次定義,那麼就可以解決這個問題。

select:after 

DIVCSS網頁布局常用的一些基礎知識整理

css命名規範 一 檔案命名規範 全域性樣式 global.css 框架布局 layout.css 字型樣式 font.css 鏈結樣式 link.css 列印樣式 print.css css書寫規範及方法 一.常規書寫規範及方法 1.選擇doctype xhtml 1.0 提供了三種dtd宣告可供...

DIV CSS網頁布局常用的方法與技巧

css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml 程式 1 這裡是第一列 這裡是第二列 這是違背web標準意圖的,只是想說明在它下面的元素...

DIV CSS網頁布局常用的方法與技巧

float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml example source code 這裡是第一列 這裡是第二列 這是違背web標準意圖的,只是想說明在它下...