CSS Tab使用视觉布局
在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容
点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果
使用伪类hover来实现改变当前导航标题样式的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,p{margin: 0;} ul{margin: 0;padding: 0;list-style: none;} a{text-decoration: none;color: inherit;} input{margin: 0;padding: 0;border:none;} .box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;} .nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;} .nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;} .nav-txt{height: 200px;} .nav-txtI{height: 200px;display:block;width: 100%;text-indent: 2em; line-height: 2;} /*重点内容*/ .nav-txt{overflow: hidden;} .nav-titI:hover{background-color: #fff;border-bottom:none;} </style> </head> <body> <div class="box"> <nav class="nav-tit"> <label class="nav-titI" for="kc">视频</label> <label class="nav-titI" for="xx">娱乐</label> <label class="nav-titI" for="jn">军事</label> </nav> <nav class="nav-txt"> <input class="nav-txtI nav-txtI_active" id="kc" value="视频" readonly> <input class="nav-txtI" id="xx" value="娱乐" readonly> <input class="nav-txtI" id="jn" value="军事" readonly> </nav> </div> </body> </html> [缺点]：初始态默认选中的导航标题样式无法设置；有时会出现页面跳动的效果；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知