css实现选项卡
2024-10-09 01:28:25
<style>
*{
margin: ;
padding: ;
text-decoration: none;
list-style: none;
outline:none;
}
.box{
width: 600px;
overflow: hidden;
border:1px solid #eee;
margin: 50px auto;
}
.nav{
width: 600px;
}
.nav_list{
float:left;
width:33.333%;
box-sizing: border-box;
}
.nav_title{
display: block;
line-height: 40px;
text-align: center;
background: white;
cursor: pointer;
border-left: 1px solid #eee;
}
.nav_txt{
position:relative;
width: 600px;
background: white;
padding: 20px;
}
.m1{
margin-left: -%;
}
.m2{
margin-left: -%;
}
.nav_radio{
display: none;
}
.nav_radio:checked + .nav_title{
background: #f5f5f5;
}
.nav_radio:checked ~ .nav_txt{
z-index: ;
}
</style>
<body>
<div class="box">
<ul class="nav">
<li class="nav_list">
<input type="radio" checked="checked" name="nav" id="nan" class="nav_radio"/>
<label for="nan" class="nav_title">男士</label>
<p class="nav_txt">男士页面</p>
</li>
<li class="nav_list">
<input type="radio" name="nav" id="nv" class="nav_radio"/>
<label for="nv" class="nav_title">女士</label>
<p class="nav_txt m1">女士页面</p>
</li>
<li class="nav_list">
<input type="radio" name="nav" id="child" class="nav_radio"/>
<label for="child" class="nav_title">儿童</label>
<p class="nav_txt m2">儿童页面</p>
</li>
</ul>
</div>
</body>
大致思路是利用 radio和label ，
这种挺简单的.
最新文章
- Default Parameter Values in Python
- linux C学习笔记02--共享内存(进程同步）
- web客户端通过ajaxfileupload方式上传文件
- hibernate - Initial SessionFactory creation failed.org.hibernate.HibernateException
- Flex4 flash builder保留MXML转换的AS代码
- Hibernate注解之@Enumerated
- nginx利用反向代理调试后台接口
- SpringBoot之GZip压缩,HTTP/2,文件上传,缓存配置
- 关于Java____________Object类
- 在已有的Java项目中使用Kotlin
- 牛客寒假算法基础训练集中营4 E题 Applese 涂颜色
- ssm中整合Mybatis可以扫描到放在mapper下面的xml文件的方法
- 3.1 MathType上标位置调整的两种方法
- [转]语音识别中区分性训练（Discriminative Training）和最大似然估计（ML）的区别
- 关于js特效轮播图练习
- luogu P3304 [SDOI2013]直径
- 点击LinearLayout使用selector改变TextView字体颜色
- dbca时报错:ORA-12705(NLS_LANG=AMERICAN_AMERICA.UTF8);
- Node.js+Express on IIS(续)
- bzoj1086