在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
先来看看效果图 CSS3伪类target 示例代码如下 复制代码 代码如下:<style type="text/css"> .tabmenu{ position:absolute; top:-28px; left:144px; margin:0px; } .tabmenu li{ display:inline-block; } .tabmenu li a{ display:block; padding:5px 10px; margin:0 10px 0 0; border:1px solid #91a7b4; border-radius:5px 5px 0 0; background-color:#e3f1f8; color:#333; text-decoration: none; font-size:16px; } .tablist{ position:relative; top:200px; margin:0 auto; width:600px; min-height:200px; } .tab_content{ position:absolute; width:600px; height:170px; padding:15px; border:1px solid #91a7b4; border-radius:10px; box-shadow:0 2px 3px rgba(0,0,0,0,1); font-size:16px; line-height:16px; color:#666; background-color:#fff; } #tab1:target,#tab2:target,#tab3:target{ z-index:1; } </style> <div class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <div id="tab1" class="tab_content">tab1</div> <div id="tab2" class="tab_content">tab2</div> <div id="tab3" class="tab_content">tab3</div> </div> 最关键的代码 复制代码 代码如下:#tab1:target,#tab2:target,#tab3:target{ z-index:1; } 先根据target的特性锚链接到对应的div,再根据z-index的属性,改变div的层级关系,从而实现tab的切换效果! target兼容性 总结 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论