淘寶段正淳的css筆記大全_經驗交流

試著總結出這幾年來寫css與xhtml的經驗 ，總結成一片」曠世奇文」分享給大家。無奈寡人年世已高，真是有點力不從心了。於是轉念一想，可以用筆記的形式展現，這樣就不用擔心寫不出來了。

現在就來說個淘寶首頁上的一個小技巧。

類目之間的橫豎線

從很久很久以前開始，類目間的垂直線無非都只有三種。

1. 背景圖
   在a標籤設定一個padding 用寬1px高不等的背景圖來position到右邊。
   缺點：最後一個還是要用class來隱藏掉背景。

2. 符號
   在每個a標籤之間用”|”符號來填入。
   缺點：html檔案變大，檔案維護變得很麻煩，而且在html中毫無意義。

3. a標籤右側的boder。
   同背景圖一樣，只不過是用border-right來取代。缺點也同上。

看到這裡，可能已經有人打開淘寶首頁用firebug查看原始碼來看是怎麼做了。

其實現有是利用ul的overflow:hidden 再將li的margin-left:-1px的做法做出來的。這樣的做法就可以同時避免以上的缺點了。
為什麼之前都沒有那麼做的，寡人也不知道了。難道寡人是第一個發現這樣的做法？
不管是誰先此之前利用了這樣的方法實作類目間豎線。
不過在淘寶首頁上線後不久就有同行的網站在首頁改版中也用了這樣的方法。
那個網站不看也罷。 class實在寫的有點多。加載html會變得多得多。
反正一個首頁需要載入1.17m的網頁我的大腦會自動屏蔽。

圓角的做法.

為了這個圓角,前段開發們付出的努力是在是太多了.又要考慮http連接數,又要考慮css與html的程式碼量與語意.
貼出的是最近考慮替換現有圓角做法的方案,可能還有許多未考慮的狀況.但是大體的編寫方式便是如下.
好處是便於維護,只有一個圖片.還可以某種程度上的任意縮放.缺點是多了無意義的html代碼.

css： 

.c,.c i,.c i i,.c b,.c b b,.c p{ 
background-image:url(http://www.php .cn/);/*背景圖片*/ 
background-repeat:no-repeat; 
} 
.c{ 
width:200px;/*暫時設定的寬度* / 
background-position:0 -4px; 
} 
.c i{ 
display:block; 
height:4px; 
} 
.c i i{ 
margin:0 0 0 4px; 
background-position:right 0; 
} 
.c b{ 
display:block;  height:4px; 
background-position:0 bottom; 
} 
.c b b{ 
margin:0 0 0 4px; 
background-position :right bottom; 
} 
.c p{ 
margin:0 0 0 4px; 
padding:0 4px 0 0; 
background-position:right -4px 0 0; 
background-position:right -4px ; 
} 
html： 
 
按鈕按鈕按鈕按鈕按鈕按鈕 
按按按按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕 
 

table的全域定義

caption這個標籤在firefox下會有左邊有1px空隙的bug,很討厭.能想到的簡單的方法只有-1px的margin了.

css： 

表格{ 
border-collapse:collapse;
} 
table title,table td,table th{ 
border:1px solid #a2bbdd;/* 熟悉顏色*/ 
background:#c3d9ff;/* 背景顏色*/
} 
表格標題{ 
text-align:left;
邊框底部：無；
左邊距：-1px；
} 
html： 
 
表格標題
 
標題 
 
 
 內容 
 phptdltphpcn /td>

需要正視的二個標籤

acronym這個標籤用來解釋名詞很爽,但是用得太少.(我也一直想用來著,所以記下了.) 
css：
acronym{cursor:help}
html：
文字 
ins這個標籤忘記是在哪個網站上看到過用來在h2裡顯示更多的鏈接,後來查了書,大家都覺得有點欠妥,有點爭議.
css：
尚未寫入css元件…欠奉上了
html：
標題更多>>


曾經做上圖所示的效果,會使用到position來相對定位到h2標籤的右側.這樣的做法,代碼確實會多好幾行. 其實可以用個笨一點的辦法來實現的：

譬如html代碼如下：

 
使用potsition的css差不多如下：

h2{
position:relative;
height:20px;
}
height:20px;
}
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
} 這樣才能實現更多在右側.其實真的還可以更簡單:

h2{
height:20px;
}
span{ float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
其實只是利用了margin- top 的負數來實現,因為預設的float會換行到h2標籤下面去，所以讓它自個跳上去。大致程式碼就是如此了,是不是很簡單?我說很簡單嘛！由於很簡單,所以就不放出單獨的測試頁面了.

ps:我說咱們啥時候也得搞個和藍色理想一樣的編輯器吧…

淘寶的css屬性順序書寫規範

以前部門的同事們，每個人都有一套書寫的規範，導致看對方的css代碼非常吃力，所以就推行了一套書寫標準 ，或許對您也有幫助。


*{
/*顯示屬性*/
display
position
float
clear
cursor …

/*盒模型*/
margin
padding
width
height

/*排版*/
vertical-align
white-space
text-decoration
text-align
…

/*文字* /
color
font
content

/*邊框背景 為什麼要把 boder和background放在最後的原因是修改的頻率會較之前的頻繁，放最後查看起來方便，哈哈。 */
border
background
}
說到底其實屬性的書寫順序規範就是：神仙?妖怪? - 身材怎麼樣！ - 服裝類型(比基尼?棉襖?) - 服裝款式(黑色?白色?紐帶?拉鍊?) - 用了啥化妝品和髮型.
這個書寫標準小部分並不是瀏覽器廠商推行的書寫規範，所以可能被廣大標準推廣者所不認同 。但這些個都是弟兄幾個實踐出來認為最符合現有的淘寶環境。

css程式碼的簡寫

css縮寫的語法，對新手有一定幫助,老鳥就不用看了.

0px不需要單位，直接:margin:0 
盒模型的縮寫，語法是margin:上 右 下 左;.甚至可以簡寫成margin:上 (右左) 下,當然右左的值應該是一樣的 
css屬性的最後一項”;”號省略。 （不建議 ^_^） 
字體寬度normal用400代替,bold用700代替。
16進位的色彩值，如果每兩位的值相同，可以縮寫一半，例如：#000000可以縮寫為#000;#0044DD可以縮寫為#04D; 
border邊框的縮寫，語法是border:width style color,類似boder:1px solid red; 
背景background的縮寫,語法是color image repeat attachment position.類似:background:#f00 url(backrep. ( 為什麼我從不寫fixed呢?) 
字體的縮寫,類似font:italic small-caps bold 1em/140% 「SimSun」,sans-serif,可以省略到最簡單font:12px 「SimSun」.
list的屬性縮寫,語法list-style:square inside url(image.gif) ,不過一般咱們都不用. 
想湊10條, 還真難.就把刪除無用換行符和空格算一個吧
有一天大家在團隊中討論「未知圖片垂直居中」的問題，突發奇想用vertical-align:middle這個屬性來實現，於是抽了時間做了下面這個不成熟的例子：
CSS:

 p{
  width:140px;
  height:140px;
  text-indent:-8px;
text-align:center;
  line-height:138px;
  background:red;
  font-size:12>px;
  *font-size:120px;
px;
  *font-size:120px;
px;
  *font-size:120px;
px;
  *font* text-indent:-60px;
}
img{
  width:100px;
  height:100px;
  vertical-align:middle;
}  HTML:

& nbsp;
初衷是不想用position來做、畢竟

缺點是 輸出了 無意義的nbsp;, 而且font-size和font-indentd的計算公式不是很簡單(所以以上的數字都是湊的^_^).

後來小馬見了這個思路，用了點時間升級了代碼,用:after輸出代替了無趣nbsp ,代碼見下。

CSS:

 .tb-p-c{
  display: block;
  width:140px;
  height:140px;
  line-height:140px;
  text-align:center;
  *font-size:123px;
}
.tb-p-c img{
  vertical-align :middle;
}
.tb-p-c:after {
  content: ".";
  visibility: hidden;
  font-size: 12px;
  margin-left: -5px;
} 
HTML:

>這樣子，惱人的nbsp消失了。大家對vertical-align:middle的渲染方式有了更進一步的了解了。也讓許多同志發現了after這個偽類還可以用來hack.

結果圓心又給CSS升了次級：

CSS:

 .tb-p-c{
  display: table-cell;
  vertical-align:middle;
  width:140px;
  height:140px
:center;
  *display: block;
  *font-size: 122px;
  background:red;
}
.tb-p-c img {
vertical-align:middle;
} 
這是第三次的升級，由於時間關係，沒有測試上面的程式碼，原因是利用了display來渲染，感覺上還是會讓瀏覽器多次渲染，所以偶沒測試 。
這次探討給了我們很多很多的收穫，相信如果有大家的參與，會有更多方式和我們沒發現的觀點。大夥別小氣，多發表回复，一起提高。