利用纯css做选项卡源码

曾经终败给现在 2022-06-15 05:23 136阅读 0赞

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> .shang \{  
float: left;  
\}  
  
  
.content \{  
position: absolute;  
left: 0px;  
top: 60px;  
z-index: -100;  
display: none;  
border: 1px gray solid;  
border-radius: 0px 8px 8px 8px;  
width: 400px;  
height: 300px;  
background-color: \#DCDCDC;  
\}  
  
  
.wai \{  
position: relative;  
margin: 0 auto;  
width: 600px;  
\}  
  
  
input\[name="zu"\]:checked~div \{  
display: block;  
\}  
  
  
label \{  
width: 80px;  
height: 40px;  
text-align: center;  
line-height: 40px;  
background-color: \#a9a9a9;  
display: inline-block;  
border: 1px gray solid;  
margin-top: 20px;  
border-radius: 8px 8px 0px 0px;  
border-bottom-width: 0px;  
position: relative;  
\}  
  
  
input\[name="zu"\] \{  
float: left;  
position: absolute;  
top: -9999px;  
left: -9999px;  
\}  
  
  
input\[name="zu"\]:checked+label \{  
height: 50px;  
line-height: 50px;  
margin-top: 10px;  
background-color: \#dcdcdc;  
\}  
  
  
</style> </head> <body> <div class="wai"> <div class="shang"> <input type="radio" name="zu" checked id="s1"> <label for="s1">选项卡1</label> <div class="content">选项卡1的内容</div> </div> <div class="shang"> <input type="radio" name="zu" checked id="s2"> <label for="s2">选项卡2</label> <div class="content">选项卡2的内容</div> </div> </body> </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css选项卡

*css选项卡** <!DOCTYPE html> <html lang="en"> <head> <meta charset="...

「爱情、让人受尽委屈。」/ 2024年04月17日 20:25/ 0 赞/ 61 阅读

相关利用jQuery实现选项卡

/Tab 选项卡标签/ $(function(){ var $div_li =$("div.tab_menu ul li");

深碍√TFBOYSˉ_/ 2023年08月17日 17:20/ 0 赞/ 136 阅读

相关 css系列----css 实现选项卡功能

1、纯 css 实现选项卡功能实现原理：利用css3 中input:checked 和 + ～选择器实现 ul li { float: left

爱被打了一巴掌/ 2023年07月17日 06:40/ 0 赞/ 15 阅读

相关 CSS tab 选项卡(兼容好)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

左手的ㄟ右手/ 2022年09月30日 10:56/ 0 赞/ 62 阅读

相关使用css+js制作选项卡

选项卡制作 ![Image 1][] ![Image 1][] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

古城微笑少年丶/ 2022年08月10日 10:59/ 0 赞/ 205 阅读

相关利用纯css做选项卡源码

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/c

曾经终败给现在/ 2022年06月15日 05:23/ 0 赞/ 137 阅读

相关利用纯css做选项卡知识点

CSS3 :checked 伪类选择器妙用可以利用checked做出选项卡。 CSS3中的伪类选择器例如:hover，:before，:after在已经在前端开发中

曾经终败给现在/ 2022年06月15日 03:25/ 0 赞/ 424 阅读

相关 CSS选项卡

看到好多大型的网站都会有一些tab选项卡，所以今天就写了一个供大家参考，代码简洁明了，不需要太多的解释，只需要注意一下兼容性问题就行了。看代码 <html>

缺乏、安全感/ 2022年06月13日 12:13/ 0 赞/ 266 阅读

相关切换选项卡+js+css+html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

柔情只为你懂/ 2022年06月04日 04:24/ 0 赞/ 244 阅读

相关纯JS实现tab选项卡切换效果

今天学到的用js写选项卡，有高亮效果，废话不多说，直接上代码吧！！！注意事项：css代码中有一个隐藏其他div的属性， display: none;这个一定要注意，要不

秒速五厘米/ 2022年04月08日 13:53/ 0 赞/ 386 阅读