效果展示

相信只要熟悉前端的朋友都知道，這是一個(gè)非常常規(guī)的的前端模塊。然而我交給我的一個(gè)網(wǎng)上認(rèn)識(shí)的童鞋在寫這個(gè)東西，讓他當(dāng)做練練手，結(jié)果就出問題了。主要有兩個(gè)問題，第一就是img下的造成整體高了5px；第二就是下面絕對(duì)定位的，的尺寸不能與整體統(tǒng)一。如下圖的兩個(gè)箭頭之處。

每一個(gè)圖片的HTML代碼如下：

下面是CSS代碼

關(guān)于定義<a>的尺寸

其 實(shí)看到這里大家已經(jīng)很清楚了，比如下面的.indexad li span a 中明明已經(jīng)定義了width:230px;這跟img的寬度是一致的，那么為什么就是文字短了一截呢？那是因?yàn)檫@個(gè)寬度的約束根本就沒有效果，如果我文字 多一點(diǎn)或者少一點(diǎn)，這個(gè)寬度會(huì)變。其實(shí)只需要在這個(gè)<a>的CSS中加入一句display: block;即可。

關(guān)于img多出5px高度

其 實(shí)看那個(gè)圖就已經(jīng)知道了，因?yàn)槲沂窃跒g覽器的調(diào)試狀態(tài)下截圖的，大家可以看到會(huì)標(biāo)注出有個(gè)17px的高度，而默認(rèn)的文字是12px，因此多余的就是 5px。而且在圖片上的<a>我們是沒有文字的，因此這里可以直接定義這個(gè)<a>的文字大小為0；有就是加上indexad li ?a{font-size:0;}。同樣地我們還可以定義<a>的高度為0，根據(jù)上面定義<a>的方法就是加上indexad li a{height:0;display:block;}。

就經(jīng)過上面兩個(gè)簡(jiǎn)單的處理就可以修復(fù)這兩個(gè)問題，從而實(shí)現(xiàn)開始我們需要的那種效果。