1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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/post/7046.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: