可能大部分人用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的三种方法 布局   根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航内容组成。要实现上图所示的布局效果，有两种布局方法：语义布局和视觉布局 【语义布局】   从语义布局 ...