可能大部分人用li只是想着寫一個列表，但是我在給別人review代碼的時候，發現一個有趣的做法，結合li使用input<type="radio">和display:none;實現tab切換，具體表現可以看下demo，下面講一下具體的原理~ 所使用的html結構 一些必須搞懂 ...

...

樣式代碼 <style type="text/css"> *{ padding:0px; margin:0px; } li{ list-style: none; } .nav{ width: 100 ...

前面的話   導航條Tab在頁面中非常常見，本文說詳細介紹CSS實現導航條Tab的三種方法 布局   根據上圖所示，先規定幾個定義，上圖的模塊整體叫做導航，由導航標題和導航內容組成。要實現上圖所示的布局效果，有兩種布局方法：語義布局和視覺 ...

前面的話   導航條Tab在頁面中非常常見，本文說詳細介紹CSS實現導航條Tab的三種方法 布局   根據上圖所示，先規定幾個定義，上圖的模塊整體叫做導航，由導航標題和導航內容組成。要實現上圖所示的布局效果，有兩種布局方法：語義布局和視覺布局 【語義布局】   從語義布局 ...

效果界面： ...

實現原理： 每個菜單有多個li標簽，每個li標簽含一個id,li標簽的id用來標記：點擊效果 每個頁面有一個id，這個id的作用是對應每個li標簽的點擊鏈接對應的頁面，它的作用是用來標記：li標簽的href指向頁面位置 li標簽的href的指向,通過偽類target指向唯一 ...

前面的話 導航條Tab在頁面中非常常見，本文說詳細介紹CSS實現導航條Tab的三種方法 布局   根據上圖所示，先規定幾個定義，上圖的模塊整體叫做導航，由導航標題和導航內容組成。要實現上圖所示的布局效果，有兩種布局方法：語義布局和視覺布局 【語義布局】   從語義布局 ...