中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在很久以前，icon還沒有統(tǒng)一的概念，設(shè)計師喜歡利用他們天馬行空般的想象力在需要的地方畫出自己喜歡的icon，這個時候前端的工作就是：
step1:在效果圖上找到icon，切割圖片

step2:上傳icon至服務(wù)器

step3:做為img元素或者背景來實現(xiàn)效果

……

在以前，大家開始意識到icon作為網(wǎng)站中路標(biāo)性質(zhì)的東西理應(yīng)統(tǒng)一，雜亂的icon不僅使用戶茫然，還使得網(wǎng)站的開發(fā)、維護成本大大增加。于是就有了全站統(tǒng)一的icon以及與之配套的使用規(guī)范：

這個時候前端做的是：

step1：找到需要使用的icon，獲得線上url

step2: 做為img元素或者背景來實現(xiàn)效果

……

相比很久以前，這種方法統(tǒng)一了icon，統(tǒng)一了icon地址，不需要再為更改某個icon而抓狂。但是卻給css sprite帶來了一個問題！因為每個icon的url都分開，加載頁面時會有N多的http請求，一下子使原本牛B的頁面變成牛D甚至牛E。于是大家都開始把這個唯一的url作為獲取icon的簡便途徑，icon圖片本身還是合并在頁面整體的背景圖里面。但這樣一來，icon的維護成本有高了。

思考：既然網(wǎng)站已經(jīng)開始統(tǒng)一icon，那何不將所有icon合并在幾張背景圖上來方便調(diào)用呢？

嘗試開始：

已有規(guī)范1：中文站目前絕大多數(shù)的icon是12px和16px兩種，其中12px的icon是指高度為12px，寬度12px左右（不一定12px），見上圖說明，16px的icon寬高都為16px；

已有規(guī)范2： 中文站目前主要正文字號就12px和14px兩種；

已有規(guī)范3：中文站目前行高主要是1.5倍和1.8倍兩種；

已有規(guī)范4：中文站目前的間距是8px；

基于以上規(guī)范，我們把全站的icon分成3類，按照一定的規(guī)律排布在3張不同的背景圖片上,每張圖片大小不超過15k,如下圖所示：

每個icon都有12px和16px兩個版本，兩個版本排在一行上， 上下每行間距40px?？v向第一排icon都是12px大小的，每個icon的中心對齊在距圖片左邊14px的線上，縱向第二排icon以416px中心線對齊。==，這些數(shù)字是怎么來的？

首先、40px和400px只是經(jīng)驗值，熟悉css sprite的人都知道給icon留空隙用的，對于目前的中文站來說這些預(yù)留的空隙可以滿足絕大多數(shù)的需求。

其次、14px的由來是因為已有的規(guī)范1和規(guī)范4，icon寬度12px左右同時間距為8。即指icon距文字起始處8px，和文字的間距也是8px（從這里開始–8px–假設(shè)為12px的icon–8px–文字文字）。所以icon的中心一定是在8px+8px+12px/2=14px，16px同理為8px+8px+16px/2=16px。這樣就可以保證icon在橫方向的對齊。

最后、icon在縱向上的對齊則在預(yù)設(shè)的css中完成，根據(jù)已有的規(guī)范2和規(guī)范3，我們可以為每個icon設(shè)置兩種class，分別對應(yīng)行高為16px（12px*1.5）和22px（12px*1.8）的情況。

這樣一來，我們就可以通過預(yù)設(shè)class的方式把網(wǎng)站的icon全部整理完畢。調(diào)用時只需要將相應(yīng)文本display屬性設(shè)為block，然后根據(jù)情況為他添加2個class名即可：

調(diào)用示例：

1
2
3
4
5

<ul>
	<li class="icon-a p120018">我是一個icon</li>
	<li class="icon-c p160018">我是一個icon</li>
	<li class="icon-c p120222">我是一個icon</li>
</ul>

class名說明：

class名說明1、第一個class（如”icon-a”），需要使用的icon所在的背景圖。icon-a:箭頭相關(guān)的icon集合；icon-n:數(shù)字相關(guān)的icon集合；icon-b：品牌相關(guān)的icon集合；icon-c：通用普及類icon

class名說明2、第二個class（如”p120222″）指明了具體使用的icon和對應(yīng)的文本的行高。由”p”+”6位數(shù)字組成”。6位數(shù)字的前2位指明了該icon的大小。有12和16兩種可選；中間2位數(shù)字指明了該icon在背景圖中的縱向位置；最后2位表示所處文本的行高，有18，21，22，26四種可選。

class名說明3、所有的icon以背景圖的形式存在于已合并的4張icon圖片中。如果需要使用的文本的行高不在已經(jīng)預(yù)先定義的行高中則需要自行設(shè)置背景圖片的background-position。

icon及class對照表：

最后一步的工作簡單而重要，我們需要把每個icon和他的class名一一對應(yīng)起來做一個方便查閱的表：

搞定！

這樣一來，前端的工作流程將變成：

step1：在表中找到需要的icon

step2：填寫class名

簡單粗暴，快速提高前端的開發(fā)效率，符合我們的特色，呵呵。

當(dāng)然，這個辦法只能解決目前我們網(wǎng)站上80%左右的icon的問題，在右邊的icon，16px以上的icon等等都無法試用。另外，這個做法本身也有很大的問題，性能、維護等等…在整個alib體系中，icon這塊是提升效率最大，同時也是爭議做多的一塊。取舍，是人生路上永遠(yuǎn)存在的難題。

PS：alib是09年中文站UED主要為提升前端開發(fā)效率而定的一整套規(guī)范和框架，接下來將慢慢地分享一些其中的思想和做法，大家慢慢拍。

來源：http://f2e.me/archives/149