阿里巴巴中文站的CSS設計規則)

來源:互聯網
上載者:User

  一種思想只有很多人用了才會成為主流,一套方案得到大家的認可才能得以實施,希望中文站前端的朋友能大致閱覽下樣式內容,並提出寶貴意見。模組化的樣式正在逐步添加,誠心接納更多可模組化的頁面樣式建議。

  • 思路要點之一:絕不考慮使用table,橫向布局用帶有float的div或li取代td。慎用ul li,當有重複單元時可使用ul li,沒有重複的單元就別用ul,那樣代碼看上去很不整齊。

  • 思路要點之二:最大限度利用ul li的優點。用ul li可以減少class=””的聲明數量,當你把一套重複單元放進li之後,在ul裡定義一個class=””就足夠了。當然會付出代價,ul的相容問題比div成倍的多。

  • 思路要點之三:所有的空白使用margin填充,盡量不使用padding。要問原因,我只能這樣說,padding能用margin替代,反之不行,只使用margin,當處理相容問題時,你可以把焦點僅放在margin上而不用考慮padding。

  • 思路要點之四:不給任何非圖片背景類的容器定義height具體值,讓容器自適應內容高度,好處一大筐,壞處一大籮,說說壞處吧,在調兩個容器同高對齊時,要反覆量高,而且要在不同瀏覽器下,量完高,還要計算出合適的margin-top來填充。

  • 思路要點之五:能用一層解決的決不用兩層,盡量減少嵌套,嚴厲禁止ul li 下再套 ul li,後果自負,目前為止我還沒嘗試過ul li嵌套ul li,對此法的實踐屬空白,理論上來說,此法會帶來很多bug。

  • 思路要點之六:css樣式分類很細,需要使用多重class聲明。例如:class=”left bd orange”,排名不分先後。

  • 思路要點之七:熟悉各瀏覽器對樣式解釋的不同點,認真做好工作筆記,準備好4大瀏覽器,調試相容,再開一個photoshop,隨時做測量。制定完美的目標,那就是:精確到1px的相容。

 

樣式的優先順序

在這之前先講解特殊符號的含義——‘+’ ’_’ ’ !important’,這類特殊符號是針對不同瀏覽器識別的。打個比方,就象家長去幼兒園認領孩子,看到頭上貼著’+’這個符號的,哦,這是ie家的孩 子,firefox和opear家長是不認得的,當然符號不止3個,但有這3個就能滿足大部分的需要了。

‘+’ 加上該符號的樣式只有ie才會認領

‘_’ 加上該符號的樣式只有ie6才會認領,ie7不會認領

‘!important’ 在同一條樣式定義中即大括弧{}中,firefox、opera優先認領,ie不認得即忽略’!important’字 符串。在非同一條樣式中即不同的大括弧中{}標有‘!important’的樣式對所有瀏覽器均屬優先認領。網上有說ie不認‘!important’ 的,大錯特錯了。

例: <style type=”text/css”> .def{background:yellow;+background:blue;_background:red;} </style> <div class=”def”>dd</div> 結果:ie6下是red色,ie7下是blue色,firefox和opera下是yellow色 例: <style type=”text/css”> .def2{background:black !important;} .def1{background:yellow;+background:blue;_background:red;} </style> <div class=”def1 def2″>dd</div> 結果:所有瀏覽器均black色

  • 優先原則一:文本從上到下,後出現的樣式優先於前面出現的同一樣式

    例:

    <style type=”text/css”>

    .def1{background:black;}

    .def2{background:yellow; }

    </style>

    <div class=” def2 def1″>dd</div>

    結果:所有瀏覽器均yellow色,注意:與class=”” 引號內的順序無關,只看.def1和.def2在聲明時的順序,.def2後聲明的所以權重高。

  • 優先原則二:id聲明(即 # 開頭的樣式)> class聲明(即 . 開頭的樣式)> 標籤聲明(即 類似 div 開頭)

    以上三種聲明處於不同的量級,份量上,div 開頭相當於 1克 重,. 開頭相當於 1公斤 重,# 開頭相當於 1噸 重。

    例:

    <style type=”text/css”>

    #bb{background:pink}

    .def{background:black;}

    div{background:yellow; }

    </style>

    <div id=”bb” class=”def”>dd</div>

    結果:所有瀏覽器均pink色,注意:雖然按優先原則一,後出現的權重高,但那隻是在同樣重量級下的比較,優先原則二各重量層級就不同了。

  • 優先原則三:數量取勝。如果同一個樣式聲明即一個大括弧{}由多個 # . 或 div 組成,則權重按出現符號的量級增加

    比如:#bb #tt #dd {background:red} 則重量等於3噸

    #bb .tt ul.dd li {background:red} 則重量等於1噸2公斤2克,這麼精確的重量,就不需要舉例了吧。

    再次說明:優先原則一隻適用兩個樣式聲明同樣重的情況

  • 優先原則四:‘!important’。相當於無限重量,在之前已經有說明,需要注意:ie下,在同一條樣式聲明即一個大括弧中出現的!important 會被隨後出現的同名樣式沖洗掉。

    <style type=”text/css”>

    .def1{background:yellow !important;background:red;}

    .def2{background:green;}

    </style>

    <div class=”def1 def2 “>dd</div>

    結果:ie下,green色,background:yellow !important被後面的background:red沖洗了,而background:red與background:green的較量中,前者敗在優先原則一之下。

  • 優先原則五:近水樓台。<div style=”background:black”></div>直接寫在元素體內的style優先順序別最高!(僅次於!important)用重量來形容,可以定為百萬噸量級。

    <style type=”text/css”>

    .def1{ background:red;}

    </style>

    <div class=”def1 ” style=”background:black”>dd</div>

    結果:black色。

    <style type=”text/css”>

    .def1{ background:red !important;}

    </style>

    <div class=”def1 ” style=”background:black”>dd</div>

    結果:red色。

    <style type=”text/css”>

    .def1{ background:red !important;}

    </style>

    <div class=”def1 ” style=”background:black !important”>dd</div>

    結果:black色。

    注釋:!important 的無限重量說不太通,大家知道,兩個無限的數是沒法比較大小的,如果兩個樣式定義都加了!important,是否就無法比較呢?

    不是的,所以,請將!important的無限重量級理解成千萬噸層級吧。

所提供樣式可以分為以下幾類:

  • a>  tag optimization    即標記最佳化。

    包括對body,td,select,input,form,ul,li,img,h3,p的最佳化,有待擴充。主要最佳化margin,padding,font-size

    強調幾個比較重要的,也是較常出現引發問題的。

    Form{margin:0px;}有時頁面上莫名出現了空白,很多時候是因為忽略了form的margin

    Img{border:0px}如果沒有border:0px; 當給<img />套上<a/>時,圖片會出現醜陋的邊框色

    Input{font-size:12px;}這可是很重要的哦,沒有font-size限制的密碼框會呈現超大的圓點並且撐大input框

    Body{} 也許大家不會留意到,如果不加定義font-family:宋體這個屬性,在font-size:12px下,ie裡文字的實際占高 14px,而ff裡實際占高是15px,當然即使加了,在opera下文字占高還是不一樣的,這就需要在任何文字情況下不要忘了line-height或 height。

    h1{font-size:14px;margin:7px 0px;}

    h2{font-size:14px;margin:7px 0px;text-align:left}

    h3{font-size:14px;margin:7px 0px;text-align:center}

    h1-h3 建議所有頁面加粗的內容用h1-h3取代自訂的font-weight,SEO教導我們使用 h 可以提高搜尋效率。

  • b>    link 部分。可以修改或增加你喜歡的連結樣式。
    注意.lk_l a{text-decoration:underline !important} 和 .lk_n a{text-decoration:none !important}的使用

  • c>   for testing 故名思意。當你需要做測試時,可以用到的,例如,你想看到一個div的邊框只需要往class裡敲入兩個字母 ‘bd’

    .lb 使用範例:<ul class=”lb”><li></li></ul>這樣就能看到ul下所有li的邊框了。

  • d>  common    部分。重頭戲來了,有必要一個個詳細說明了。
    .clr{clear:both}為了保留之前的習慣,做的一次向下相容。需要說明,clear層樣式在

    .c{clear:both;overflow:hidden;+overflow:visible}裡已經重新定義,請盡量使用新樣式,並牢記新樣式只能在單獨的clear層使用

    ——什麼是單獨的clear層?<div class=”c”></div>就是,除了.c樣式沒其它className,並且<div/>內為空白。

    為什麼要重新定義?完全出於相容opera考慮,最近才做opera下的相容,還是源於同事對opera的推薦。(如嫌麻煩,不必深究,用就行了)

    .l{float:left;display:inline}   最常用的屬性了。但注意,新的定義裡多了 display:inline,由於在當前構架下,多使用margin布局,而float元素在ie6下有著名的double margin bug,解決方案即給float元素加display:inline,當然,所有的float元素都加上這條屬性不是完全沒問題,ul就會稍微有點問題, 在後面會有針對這類問題的樣式解決,比起給全域的float元素解決double margin問題要省事的多。

    .f{width:100%} 該屬性的作用不言而喻,設定本層的寬度為上層的寬度。需要強調:本屬性與 padding、border、margin-left、margin-right一起使用要特別小心,這些屬性會給額外增加元素的實際寬度,在ie下多 餘的寬度會撐大上層元素,而ff和opera下則不會有撐大現象。

    .z{zoom:1} 非常重要的一個樣式,用來解決ie6 下的區塊層級元素layout上呈現的多種bug。

    .h{width:50%;+width:49.99%} 跟上面的屬於同類,設定本層寬度為上層寬度的一半,至於為什麼49.99%       我也不想的,ie6不讓50%通過嘛。下面是測試代碼(需要有global.css樣式檔案引用)

    <div class=”bd”>

    <div class=”l h bg h17″></div>

    <div class=”r h bg h17″></div>

    </div>

    .b .s .m .g 不說了,控制文字大小和加粗的。

    .pa{position:absolute } 定義層為絕對位置,float元素定義 .pa 後float屬性失效。既然是絕對層left、top屬性是必不可少了不然失去了絕對層的意義,所以不要忘記設定left,top。絕對層上層一定記得要 套相對層position:relative,不然,絕對層left、top屬性參考的對象會是最外層的window,在body之外了,誰也不希望定義 的元素跑到body外面去吧。在相對層內的絕對層可以隨意定位,配合z-index屬性幾乎可以用html代碼類比photoshop畫圖了,^_^純屬 玩笑。

    .pr{position:relative}給left、top定值是相對於本來應該在的位置。一般與 .pa 配合使用。

    .dl{display:inline}

    .db{display:block}

    .dn{display:none !important}

    以上3個不想多說,重要,非常重要,實用,非常實用。<div class=”bd dn”></div>你只用敲兩個字母,這一層就沒了。

    .in{float:left;display:inline;margin-left:4px;margin-top:4px;width:16px;height:10px;overflow:hidden;

    background:url(http://img.china.alibaba.com/images/cn/home/070214/new_l.gif) no-repeat}

    “新”表徵圖

    .ih{float:left;display:inline;margin-left:4px;margin-top:4px;width:16px;height:10px;overflow:hidden;

    background:url(http://img.china.alibaba.com/images/cn/home/070214/hot_l.gif) no-repeat}

    “熱”表徵圖

    好用!不過要求前面元素float,記得配合margin屬性調整位置。樣本:

    <div class=”bd l23″>

    <div class=”l”>ddddddddddddddddddd</div><div class=”ml7 mt5 in”></div>

    <div class=”c”></div>

    </div>

    .oh{overflow:hidden} 隱藏超出的內容

    .tc{text-align:center} 文字置中

    .bn{border:none !important} 消除border,有!important加權。

    .b_1{border:1px solid #B8B8B8}

    .bt_1{border-top:1px solid #ff7300}

    .bt_2{border-top:1px dashed #CCC}

    .bt_3{border-top:1px dashed #FFB980}

    .bl_1{border-left:1px dashed #CCC}

    .bg_1{background-color:#FFF1E6}

    .bg_2{background-color:#F0F0F0}

    .bg_3{background-color:#9ACD68}

    Border和background系列就不說了

    .o_1{opacity:.7;filter:alpha(opacity=70)}

    .o_2{opacity:.9;filter:alpha(opacity=90)}

    兩個透明屬性,給喜歡透明層的用。

    .l17{line-height:17px;}

    .l20{line-height:20px}

    .l23{line-height:23px}

    .l15p{line-height:150%}

    這裡需要強調,line-height是最常用的屬性之一,出於相容的考慮頁面所有文字都應該具有line-height屬性(這一屬性可被子項目 繼承,所以不用擔心浪費筆墨)。至於用px 還是用 % 建議用px,不同瀏覽器顯示文字的高度是不一樣的,用%只會放大這種差異,用px 才能消除差異。% 到底用不用的上呢?當然有用,不考慮高度差異的,象文章內容推薦用 % 當選用不同字型大小增大的比例是相同的。

    這樣,common部分就結束了。

  • e>     布局部分layout

    .ma{margin-left:auto;margin-right:auto}

    Div置中樣式,這個屬性可以讓block區塊層級元素自身置中,而不是裡面的內容置中

    .w778{width:778px;margin-left:auto;margin-right:auto}

    .w952{width:952px;margin-left:auto;margin-right:auto}

    2個布局用的樣式,窄布局下用 .w778 寬布局下用 .w952 自訂布局用。

  • f>      列表ul li 專用樣式

    可以說這是重中之重了,首頁層級的頁面大部分的內容都是做在無序列表裡面的,其龐大的使用規模,需要有完備的樣式支援。

    ul.lzb, ul.lzl {zoom:1} 這兩個樣式包括下面兩個是zoom在ul裡的應用

    ul.lzb li{zoom:1;+margin-bottom:-4px} 針對ie下ul li 元素的margin-bottom:4px 的bug(bug出現條件:li 裡有float 元素)使用了該樣式的li其內可有浮左、浮右div,並且li內可相容多行結構,這是樣式ul.ll20 li無法實現的。(具體案例見xls 文檔)

    ul.lzl li{zoom:1;+margin-left:-16px} 這個樣式的出現有些不得已,記得前面說過,為了避免ie6下的double margin bug,我們給所有的float元素額外加上了display;inline,這導致float屬性的ul 在ie下出現意料之外的縮排問題,只能再增加這個樣式來解決這一問題。

    ul.ll20 li{line-height:20px;height:20px;+margin-bottom:-4px}

    ul.ll23 li{line-height:23px;height:23px;+margin-bottom:-4px}

    以上兩個樣式適用於固定高度的單行li,什麼是單行li?指的是li中的文字無換行。

    和height等值的line-height讓 li中文字垂直置中。使用了這個樣式的li其內可以有浮左、浮右div,是解決單行li相容的比較好的方式。

    ul.li20 li{background:url(http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 7px no-repeat;

    padding-left:15px}

    ul.li23 li{background:url(http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 10px no-repeat;

    padding-left:15px}

    這兩個樣式沒什麼好說的,分別針對li高度20px和23px的li背景樣式,背景其實就是一個no repeat的方點。

    ul.ll li{float:left;display:inline}

    ul.lr li{float:right;display:inline}

    想讓一個個li象火車一樣首位相接嗎?用上面兩個樣式吧,讓所有的li浮起來。

    ul.ldl li{display:inline} 這個樣式我不太喜歡,同樣可以讓li象火車一樣首位相接,但是代價太大,所有的li都變成inline了,很多css樣式對inline的元素無效,包括最基本的width、height、margin-top

    ul.lbt li{border-top:1px dashed #CCC}

    ul.lbl_1 li{border-left:1px solid #000}   

    兩個給li加邊框的樣式,給了li 更好的分隔效果。

    這樣,ul li 專用樣式部分就結束了。

  • g>     樣式margin control

    .h1p{height:1%}

    .h1{height:1px;overflow:hidden}

    .h16{height:16px}

    .h17{height:17px}

    .m1{margin:1px}

    .m7{margin:7px}

    .m14{margin:14px}

    .ml3{margin-left:3px}

    .ml5{margin-left:5px}

    .ml7{margin-left:7px}

    .ml9{margin-left:9px}

    .ml14{margin-left:14px}

    .ml18{margin-left:18px}

    .ml21{margin-left:21px}

    .mr3{margin-left:3px}

    .mr5{margin-left:5px}

    .mr7{margin-right:7px}

    .mr9{margin-right:9px}

    .mr14{margin-right:14px}

    .mr18{margin-right:18px}

    .mr21{margin-right:21px}

    .mt1{margin-top:1px}

    .mt3{margin-top:3px}

    .mt5{margin-top:5px}

    .mt7{margin-top:7px}

    .mt9{margin-top:9px}

    .mt11{margin-top:11px}

    .mt14{margin-top:14px}

    .mt21{margin-top:21px}

    .mt28{margin-top:27px}

    .p7{padding:7px}

    .p14{padding:14px}

    .pt7{padding-top:7px}

    .pt14{padding-top:14px}

    以上所有樣式都是用來留白的,height和margin的組合可以實現1px-31px 的垂直方向留白連續值(除了13這個不吉利數字),更多的情況我們會單獨使用margin,注意margin能夠使用的值。

    最後的幾個padding樣式需要說明,記得我在前面說過用margin取代padding,這裡不得不食言了,對於有3個border的碗狀容 器,即border-top;none的容器,對碗內的第一個子層使用margin-top似乎無法達到你的期望效果,那就對碗使用padding- top吧,本層的padding相當於子層的margin。

  • h>    組合樣式

    /* Vertical align Middle 垂直置中樣式

    ex:

    <div class=”vm”><div class=”vma”><div class=”vmb”>

    #content#

    </div></div></div>

    –please set the height attribute in addition before using it. height:100px for example. 使用前請重新設定.vm, .vmb{height:100px}裡的height值。

    */

    .vm, .vmb{height:100px}

    .vm{position:relative}

    .vma{position:absolute;border:none!important;top:0px;+top:50%;display:table}

    .vmb{+position:relative;+top:-50%;display:table-cell;vertical-align:middle;+height:auto !important}

    沒什麼要說的,要看效果請開啟border

    /* Picture Link 圖片文字鏈組合

    ex:

    <a class=”pl” href=”#” mce_href=”#” ><img src=”" mce_src=”" /><div>#picture notation#</div></a><a class=”pl” href=”#” mce_href=”#” ><img src=”" mce_src=”" /><div>#picture notation#</div></a><div class=”c”></div>

    –don’t forget <div class=”c”></div> at the end for .pl has float attribute 不要忘了在最後加清除浮動層,因為 .pl 層有浮動屬性。

    */

    .pl{float:left;text-align:center;padding-bottom:4px;background:#fff;border:1px solid #ccc}

    .pl img {display:block;margin:7px;border:1px solid #ccc}

    html>/**/body .pl {margin-bottom:-1px}

    @media all and (min-width: 0px){ .pl{margin-bottom:0px !important;} }

    沒什麼好說的,實驗下代碼即可,實用的東西一般很簡單。這裡最後兩行值得注意,倒數第二行firefox和opera可識別;最後一行只有opera能識別。

    /* SHadow 區塊層級元素陰影製作效果

    ex:

    <div class=”sh r”>  

    <div class=”sha” style=”width:400px;height:600px;border:1px solid green”>

            #content#

    </div>    

    <div class=”shb”></div>      

    <div class=”shc”></div>      

    </div>

    –you should move the float attribute from .sha to .sh    類.sha上的float屬性需要轉移到類.sh上去

    */

    .sh{position:relative;background:#ACACAC;}

    .sh .sha{margin:0px 2px 2px 0px;background:#fff;}

    .sh .shb{position:absolute;top:0px;right:0px;width:2px;height:2px;overflow:hidden;background:#fff;}

    .sh .shc{position:absolute;bottom:0px;left:0px;width:2px;height:2px;overflow:hidden;background:#fff}

    這個例子要說幾句,沒有陰影製作效果的一層,代碼如下,可能有float屬性,見class 裡的 “r”

    <div class=”sha r” style=”width:400px;height:600px;border:1px solid green”>

            #content#

    </div>

    現在要給它加上陰影,我們需要在它外面再套一層,並且增加兩個同級層。

    <div class=”sh r”>  

    <div class=”sha” style=”width:400px;height:600px;border:1px solid green”>

            #content#

    </div>    

    <div class=”shb”></div>      

    <div class=”shc”></div>      

    </div>

    同時,原來層的float屬性要轉移到新套的外層上。

    /* TiTle 標題列樣式

    ex:

    <div class=”tt”>

    <div class=”ttl”></div>

    <div class=”ttc”>title words</div>

    <div class=”ttr”></div>

    </div>

    */

    .tt{position:relative;height:37px;line-height:37px;background:url(http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_tt_01.gif) repeat-x}

    .ttc{float:left;display:inline;font-size:14px;font-weight:bold;}

    .ttl{float:left;width:2px;height:100%;background:url(http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_lt_01.gif) no-repeat}

    .ttr{float:right;width:2px;height:100%;background:url(http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_rt_01.gif) no-repeat}

    需要說的是,這個樣式不通用,因為不是所有的標題都是一個樣子,這個標題樣式是針對左中右結構的標題,可自適應寬度,如要更換背底需要重新設定以下樣式

    .tt{height:; line-height:; background:;}

    .ttl{width:; background:;}

    .ttr{width:; background:;}

    所以說這個樣式不通用,實際使用中幾乎要把所有的樣式重新寫一遍。這裡只是希望提供一個模型,也有便利之處吧。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.