CSS Tab使用视觉布局

时间：5年前阅读：6209

在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容

点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果

使用伪类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,我们将及时处理。

微信扫码关注

更新实时通知

CSS Tab使用视觉布局

网友评论