各位網友大家好，今天我要帶領大家開發一個純CSS的圖片分類顯示的網址導航，單純看標題大家可能有些困惑，依照以往慣例，我先給大家演示一下實際運行效果：
從上面的運行效果，大家不難發現，當我點擊某一菜單時，導航區域會相應高亮顯示此分類的圖標，而其他圖標則會變暗。
很多人可能會說，這個這么簡單，直接使用javascript或jQuery等前端框架，再配合一些CSS，就可以很快實現同樣的效果了。如果你是這一部分人，我也希望你停下腳步，看看這篇教程。因為在今天這篇教程中，我會用另一個思維方式來思考問題，我會帶領大家，完全脫離js，怎么來實現切換效果以及實現圖片分類，旨在傳授給大家一個思想。
好了，廢話不多說了，直接開始今天的實戰開發教程吧。
首先，我們先定義html頁面，代碼如下(為了方便演示，我直接導入了styles.css文件，此時文件沒任何樣式內容)：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>CSS3實戰開發:圖片過濾分類特效</title> </head> <body> <div class="container"> <div class="hot_navs"> <div class="hot_title"> <input id="selector-type-all" type="radio" name="title_set" class="selector-type-all" checked="checked" /> <label for="selector-type-all" class="label-type-all">全部類別</label> <input id="selector-type-1" type="radio" name="title_set" class="selector-type-1" /> <label for="selector-type-1" class="label-type-1">電子商務</label> <input id="selector-type-2" type="radio" name="title_set" class="selector-type-2" /> <label for="selector-type-2" class="label-type-2">旅游</label> <input id="selector-type-3" type="radio" name="title_set" class="selector-type-3" /> <label for="selector-type-3" class="label-type-3">社交</label> <input id="selector-type-4" type="radio" name="title_set" class="selector-type-4" /> <label for="selector-type-4" class="label-type-4">視頻</label> <input id="selector-type-5" type="radio" name="title_set" class="selector-type-5" /> <label for="selector-type-5" class="label-type-5">新聞</label> <input id="selector-type-6" type="radio" name="title_set" class="selector-type-6" /> <label for="selector-type-6" class="label-type-6">信息門戶</label> <input id="selector-type-7" type="radio" name="title_set" class="selector-type-7" /> <label for="selector-type-7" class="label-type-7">票務</label> <div class="splitline"></div> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="imgs/101.png" /> </a> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="imgs/102.png" /> </a> <a class="item-type-7" href="http://www.itdriver.cn"> <i></i> <img src="imgs/103.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <img src="imgs/104.png" /> </a> <a class="item-type-5" href="http://www.itdriver.cn"> <img src="imgs/105.png" /> </a> <a class="item-type-4" href="http://www.itdriver.cn"> <img src="imgs/106.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/107.png" /> </a> <a class="item-type-4" href="http://www.itdriver.cn"> <i></i> <img src="imgs/108.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/109.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/110.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/111.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/112.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/113.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/114.png" /> </a> <a class="item-type-1" href="http://www.itdriver.cn"> <i></i> <img src="imgs/115.png" /> </a> <a class="item-type-5" href="http://www.itdriver.cn"> <i></i> <img src="imgs/116.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/117.png" /> </a> <a class="item-type-2" href="http://www.itdriver.cn"> <i></i> <img src="imgs/118.png" /> </a> </div> </div> </div> </body> </html>
大家從上面的html代碼中會發現,我的導航菜單使用了label或radio標簽，我為什么要定義它們呢，因為我想知道我當前點擊了哪一個菜單，因為單憑CSS，我們貌似沒法得到當前點擊誰，所以當我點擊Label時，會自動的選中某一radio了。
此時我們運行一下頁面，看看在未添加任何樣式時頁面的運行效果：
 |
首先，我們先調整導航區域的大小，以及給導航區域添加邊框，樣式代碼如下：
*{ /*設置頁面基本屬性*/ margin:0; padding:0; font-size:14px; } .container{ /*調整外圍容器布局*/ margin:200px auto; width:1024px; } .hot_navs{ /*設置分類導航樣式*/ border:1px solid #CCCCCC; padding:.5em; width:725px; }
此時頁面效果如下：
區域范圍大小已經定下來了，現在我們要給導航菜單設置樣式，隱藏單選按鈕，同時設置菜單與圖表之間的分割線：
/*分割線*/ .hot_navs .splitline { margin-bottom:4px;height:1px;border-top:1px dotted #999999; } .hot_navs a{ /*設置導航item的基本樣式*/ text-decoration:none; display:inline-block; height:70px; line-height:70px; position:relative; background:#FFE500; -webkit-transition:all 0.6s; /*當item屬性發生變化時，執行過度動畫*/ -moz-transition:all 0.6s; -o-transition:all 0.6s; transition:all 0.6s; } .hot_navs input{display:none;} .hot_navs .label-type-all, .hot_navs .label-type-1, .hot_navs .label-type-2, .hot_navs .label-type-3, .hot_navs .label-type-4, .hot_navs .label-type-5, .hot_navs .label-type-6, .hot_navs .label-type-7 { /*設置區域頭部導航菜單的基本樣式*/ display:inline-block; margin-top:10px; padding:10px 10px; cursor:pointer; }
此時效果如下：
細心的網友會發現，我在上面的CSS樣式中添加了transition屬性，此屬性主要是說，當菜單的任何一個屬性發生變化時，執行過渡動畫。
接着，我們給導航按鈕添加選中時的樣式，同時設置，當選擇某一菜單時，設置此分類的圖標不透明度為1，其它分類的不透明度為0.2，樣式代碼如下：
.hot_navs input.selector-type-all:checked ~ .label-type-all, .hot_navs input.selector-type-1:checked ~ .label-type-1, .hot_navs input.selector-type-2:checked ~ .label-type-2, .hot_navs input.selector-type-3:checked ~ .label-type-3, .hot_navs input.selector-type-4:checked ~ .label-type-4, .hot_navs input.selector-type-5:checked ~ .label-type-5, .hot_navs input.selector-type-6:checked ~ .label-type-6, .hot_navs input.selector-type-7:checked ~ .label-type-7 { /*設置選擇某一菜單時，當前菜單的基本樣式*/ font-weight:bold; border-bottom:2px solid #FF9900; } .hot_navs input.selector-type-all:checked ~ a, .hot_navs input.selector-type-1:checked ~ a.item-type-1, .hot_navs input.selector-type-2:checked ~ a.item-type-2, .hot_navs input.selector-type-3:checked ~ a.item-type-3, .hot_navs input.selector-type-4:checked ~ a.item-type-4, .hot_navs input.selector-type-5:checked ~ a.item-type-5, .hot_navs input.selector-type-6:checked ~ a.item-type-6, .hot_navs input.selector-type-7:checked ~ a.item-type-7 { opacity: 1;/*當選擇某一類別菜單時，設置當前類別item的不透明度*/ } .hot_navs input.selector-type-1:checked ~ a:not(.item-type-1), .hot_navs input.selector-type-2:checked ~ a:not(.item-type-2), .hot_navs input.selector-type-3:checked ~ a:not(.item-type-3), .hot_navs input.selector-type-4:checked ~ a:not(.item-type-4), .hot_navs input.selector-type-5:checked ~ a:not(.item-type-5), .hot_navs input.selector-type-6:checked ~ a:not(.item-type-6), .hot_navs input.selector-type-7:checked ~ a:not(.item-type-7) { opacity: 0.2;/*當選擇某一類別菜單時，設置其余類別item的不透明度*/ }
至此，此頁面特效的所有樣式代碼都編寫完了，真心希望大家能受到啟發，同時也希望大家喜歡我的教程。
謝謝大家，咱們下個實戰開發案例再會。