关于tab选项卡,选项的css问题。

时间:2021-03-08 06:27:11

第一类:关于tab选项卡,选项的css问题。

刚开始的思路是:让上面的选中的选项背景变成白色,让下面的层position:absolute;z-index:-1;top:1px,就能盖得上上面的横线。实践证明,这样是能盖得上,但是单选按钮不能点了。

正确的思路应该是:上面的选项切换大层应该使用定位position:relative,里面的选项应该用position:absolute将其位置定好,当前选中卡设置z-index:99;下面的大div设置position:relative; top:-1;这样就能完美地解决这个问题了。

第二类:关于tab选项卡,选项的css问题。

关于这个小三角的位置,我们到底应该写在哪儿?

看结构,大家默认会写在下面的主体内容里,因为毕竟它是属于下面主体内容的,但是写在那儿将非常的难处理,不好不容易定位在上面导航的中间。那现在有一个好办法,把它写到上面的导航里的每一个li里,比如<i></i>再给小三角相对于li定位,这样一来,每点一下li,当前li都加一个active的类名,可以写为 li.active i{display:block;},这样这个问题就轻松搞定了。

是记得给i义样式哦

<ul>

<li>11111<i></i></li>

<li>11111<i></i></li>

<li>11111<i></i></li>

</ul>

<div class="main">我是主体内容</div>