淘寶首頁(yè)上的一個(gè)小技巧。
類(lèi)目之間的橫豎線
從很久很久以前開(kāi)始，類(lèi)目間的豎線無(wú)非都只有三種。
- 背景圖
在a標(biāo)簽設(shè)置一個(gè)padding 用寬1px高不等的背景圖來(lái)position到右側(cè)。
缺點(diǎn)：最后一個(gè)還是要用class來(lái)隱藏掉背景。 - 符號(hào)
在每個(gè)a標(biāo)簽之間用”|”符號(hào)來(lái)填充。
缺點(diǎn)：html文件變大，文件維護(hù)變得很麻煩，而且在html中毫無(wú)意義。 - a標(biāo)簽右側(cè)的boder。
同背景圖一樣，只不過(guò)使用border-right來(lái)代替。缺點(diǎn)也同上。
看到這里，可能已經(jīng)有人打開(kāi)淘寶首頁(yè)用firebug查看源碼來(lái)看是怎么做了。
其實(shí)現(xiàn)有是利用ul的overflow:hidden 再將li的margin-left:-1px的做法做出來(lái)的。這樣的做法就可以同時(shí)避免以上的缺點(diǎn)了。
為什么之前都沒(méi)有那么做的，寡人也不知道了。難道寡人是第一個(gè)發(fā)現(xiàn)這樣的做法？
不管是誰(shuí)先此之前利用了這樣的方法實(shí)現(xiàn)類(lèi)目間豎線。
不過(guò)在淘寶首頁(yè)上線后不久就有同行的網(wǎng)站在首頁(yè)改版中也用了這樣的方法。
那個(gè)網(wǎng)站不看也罷。class實(shí)在是寫(xiě)的有點(diǎn)多。加載html會(huì)變得多得多。
反正一個(gè)首頁(yè)需要加載1.17m的網(wǎng)頁(yè)我的大腦會(huì)自動(dòng)屏蔽。
圓角的做法.
為了這個(gè)圓角,前段開(kāi)發(fā)們付出的努力是在是太多了.又要考慮http連接數(shù),又要考慮css與html的代碼量與語(yǔ)義.
貼出的是最近考慮替換現(xiàn)有圓角做法的方案,可能還有許多未考慮的狀況.但是大體的編寫(xiě)方式便是如下.
好處是便于維護(hù),只有一個(gè)圖片.還可以某種程度上的任意縮放.缺點(diǎn)是多了無(wú)意義的html代碼.
css：
.c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(//images.sj33.cn/uploads/allimg/200710/20071025021934233.png);/*背景圖片*/
background-repeat:no-repeat;
}
.c{
width:200px;/*臨時(shí)定的寬度*/
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;
}
html：
< P class=”c”>
< i>< i>< /i>< /i>
< p>
按鈕按鈕按鈕按鈕按鈕按鈕
按按按按按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕
< /p>
< b>< b>< /b>< /b>
< /P>
table的全局定義
caption這個(gè)標(biāo)簽在firefox下會(huì)有左邊有1px空隙的bug,很討厭.能想到的簡(jiǎn)單的方法只有-1px的margin了.
css：
table{
border-collapse:collapse;
}
table caption,table td,table th{
border:1px solid #a2bbdd;/*邊框顏色*/
background:#c3d9ff;/*背景顏色*/
}
table caption{
text-align:left;
border-bottom:none;
margin-left:-1px;
}
html：
< table>
< caption>表格標(biāo)題< /caption>
< tr>
< th>標(biāo)題< /th>
< th>標(biāo)題< /th>
< th>標(biāo)題< /th>
< th>標(biāo)題< /th>
< /tr>
< tr>
< td> 內(nèi)容< /td>
< td> 內(nèi)容< /td>
< td> 內(nèi)容< /td>
< td> 內(nèi)容< /td>
< /tr>
< /table>
需要正視的二個(gè)標(biāo)簽
- acronym這個(gè)標(biāo)簽用來(lái)解釋名詞很爽,但是用得太少.(我也一直想用來(lái)著,所以記下了.)
css：
acronym{cursor:help}
html：
< acronym title=”段正淳又是金庸筆下一個(gè)十分奇特的人物。他奇特在到處留情，情人極多，見(jiàn)一個(gè)愛(ài)一個(gè)，而又絕不是徒然風(fēng)流薄幸，當(dāng)他是單獨(dú)對(duì)著一個(gè)情人的時(shí)候，他真是真心真意愛(ài)這個(gè)情人的，只好說(shuō)這個(gè)人的感情特別豐富，別無(wú)其他解釋。” >文字< /acronym> - ins這個(gè)標(biāo)簽忘記是在哪個(gè)網(wǎng)站上看到過(guò)用來(lái)在h2里顯示更多的鏈接,后來(lái)查了書(shū),大家都覺(jué)得有點(diǎn)欠妥,有點(diǎn)爭(zhēng)議.
css：
還未寫(xiě)入css組件…欠奉上了
html：
< h2>標(biāo)題< ins>< a xhref=”http://ued.taobao.com/blog/#” mce_href=”http://ued.taobao.com/blog/#” >更多>>< /a>< /ins>< /h2>
標(biāo)題右側(cè)“更多”的實(shí)現(xiàn)
曾經(jīng)做上圖所示的效果,會(huì)使用到position來(lái)相對(duì)定位到h2標(biāo)簽的右側(cè).這樣的做法,代碼確實(shí)會(huì)多好幾行. 其實(shí)可以用個(gè)笨一點(diǎn)的辦法來(lái)實(shí)現(xiàn)的：
譬如html代碼如下：
< h2>< a h ref=”#” >標(biāo)題< /a> < span>更多…< /span> < /h2>
使用potsition的css差不多如下：
h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}
這樣才能實(shí)現(xiàn)更多在右側(cè).其實(shí)真的還可以更簡(jiǎn)單:
h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
其實(shí)只是利用了margin-top 的負(fù)數(shù)來(lái)實(shí)現(xiàn),因?yàn)槟J(rèn)的float會(huì)換行到h2標(biāo)簽下面去，所以讓它自個(gè)跳上去。大致代碼就是如此了,是不是很簡(jiǎn)單?我說(shuō)很簡(jiǎn)單嘛！由于很簡(jiǎn)單,所以就不放出單獨(dú)的測(cè)試頁(yè)面了.
ps:我說(shuō)咱們啥時(shí)候也得搞個(gè)和藍(lán)色理想一樣的編輯器吧…
淘寶的css屬性順序書(shū)寫(xiě)規(guī)范
以前部門(mén)的同事們，每個(gè)人都有一套書(shū)寫(xiě)的規(guī)范，導(dǎo)致看對(duì)方的css代碼非常吃力，所以就推行了一套書(shū)寫(xiě)標(biāo)準(zhǔn) ，或許對(duì)您也有幫助。
*{
/*顯示屬性*/
display
position
float
clear
cursor
…
/*盒模型*/
margin
padding
width
height
/*排版*/
vertical-align
white-space
text-decoration
text-align
…
/*文字*/
color
font
content
/*邊框背景 為什么要把 boder和background放在最后的原因是修改的頻率會(huì)較之前的頻繁，放在最后查看起來(lái)方便，哈哈。*/
border
background
}
說(shuō)到底其實(shí)屬性的書(shū)寫(xiě)順序規(guī)范就是：神仙?妖怪? – 身材怎么樣！- 服裝類(lèi)型(比基尼?棉襖?) – 服裝款式(黑色?白色?紐扣?拉鏈?) – 用了啥化妝品和發(fā)型.
這個(gè)書(shū)寫(xiě)標(biāo)準(zhǔn)小部分并不是瀏覽器廠商推行的書(shū)寫(xiě)規(guī)范，所以可能被廣大標(biāo)準(zhǔn)推廣者所不認(rèn)同 。但這些個(gè)都是弟兄幾個(gè)實(shí)踐出來(lái)認(rèn)為最符合現(xiàn)有淘寶環(huán)境的。
css代碼的簡(jiǎn)寫(xiě)
css縮寫(xiě)的語(yǔ)法，對(duì)新手有一定幫助,老鳥(niǎo)就不用看了.
- 0px不需要單位，直接:margin:0
- 盒模型的縮寫(xiě)，語(yǔ)法是margin:上 右 下 左;.甚至可以簡(jiǎn)寫(xiě)成margin:上 (右左) 下,當(dāng)然右左的值應(yīng)該是一樣的
- css屬性的最后一項(xiàng)”;”號(hào)省略。（不建議 ^_^）
- 字體寬度normal用400代替,bold用700代替。
- 16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤?，可以縮寫(xiě)一半，例如：#000000可以縮寫(xiě)為#000;#0044DD可以縮寫(xiě)為#04D;
- border邊框的縮寫(xiě)，語(yǔ)法是border:width style color,類(lèi)似boder:1px solid red;
- 背景background的縮寫(xiě),語(yǔ)法是color image repeat attachment position.類(lèi)似:background:#f00 url(background.gif) no-repeat fixed 0 0( 為什么我從不寫(xiě)fixed呢?)
- 字體的縮寫(xiě),類(lèi)似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最簡(jiǎn)單font:12px “SimSun”.
- list的屬性縮寫(xiě),語(yǔ)法list-style:square inside url(image.gif) ,不過(guò)一般咱們都不用.
- 想湊10條, 還真難.就把刪除無(wú)用換行符和空格算一個(gè)吧
