CSS实现导航条Tab切换的三种方法
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS实现导航条Tab切换的三种方法
前面的话
导航条Tab在页面中非常常见，本文说详细介绍CSS实现导航条Tab的三种方法
布局
buju
根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航内容组成。要实现上图所示的布局效果，有两种布局方法：语义布局和视觉布局【语义布局】
从语义布局的角度来看，每一个导航标题和其对应的导航内容应该是一个整体
【视觉布局】
从视觉布局的角度来看，所有导航标题为一组，所有导航内容为一组
hover
导航条的功能就是点击导航标题时，显示对应的导航内容。如果使用伪类hover实现类似效果，使用第一种布局方式语义布局比较合适
由于在语义布局中，三个导航内容是处于重叠的状态。移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index。在其子元素导航内容的层级比拼中，“子凭父贵”，父元素层级高的，其导航内容在重叠状态中显示在最上面