tab 菜单的边框线重合是怎么做出来的? (html css JavaScript相关)
发布网友
发布时间:2022-05-30 18:55
我来回答
共2个回答
热心网友
时间:2023-10-31 20:42
tab标签做为一个div(以下 称 tdiv)
里面是ul li 结构
内容作为另一个div (以下称 cdiv)
原理就是让 tdiv 成为非标准流!
具体做法,
先让两个div上下并在一起,
cdiv都有边框!
tdiv没有下边框!
然后
tdiv上的css加入(加入边框宽度为1px)
position:relative; top:1px;
意思就是让tdiv成为非标准流,并且是相对定位,top:-1px;
就是让tdiv从原来的位置向下偏移 1px
当点击tab的时候,就用js让激活的tab(也就是li)拥有下边框,并且为白色!
效果就出来了
其实就是白色的边框挡住了cdiv蓝色的边框
热心网友
时间:2023-10-31 20:43
这是一个选项页的作法,有很多种作法的!例如可以利用层顺序进行设计!上边的第一个小标题都定义在其border-bottom进行白色的定义,使用时将其层顺序提到前边,也就是变大,一般可以变为2,而内容的那个大的div变为1,其余的标题都是0,这样可以实现这种效果!
第二种是利用css定义,层的顺序不变,改变当前一个标题的border-bottom为白色,这种也比较常用的!这种情况下,所以的小标题都在上边的!等等这种方式多了!