css选项卡
来源：互联网 发布：java in是什么意思啊 编辑：程序博客网 时间：2024/05/23 10:54
<!DOCTYPE html>
<html lang="ch-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0;margin:0;}
.a{margin:150px;position: relative;}
img{position: absolute;left:0;right: 0;width:155px;margin-top:10px;}
li{list-style: none;float:left;}
p{display: inline-block;padding: 3px;background:#dedede;margin-right: 3px;width:30px;height:30px;text-align: center;}
p:hover{color:red;opacity: .5;}
input{display: block;opacity: 0;}
input:checked+.aa1 .img1{z-index: 1;}
input:checked+.aa2 .img2{z-index: 1;}
input:checked+.aa3 .img3{z-index: 1;}
input:checked+.aa4 .img4{z-index: 1;}
input:checked+.p p{color:#fff;background: red;}
</style>
</head>
<body>
<ul class="a">
<li>
<input type="radio" name="1" id="a1">
<label for="a1" class="aa1 p">
<p>1</p>
<img src="../images/1.png" atl="" class="img1" id="a1"/>
</label>
</li>
<li>
<input type="radio" name="1" id="a2">
<label for="a2" class="aa2 p">
<p>2</p>
<img src="../images/2.png" atl="" class="img2" id="a2"/>
</label>
</li>
<li>
<input type="radio" name="1" id="a3">
<label for="a3" class="aa3 p">
<p>3</p>
<img src="../images/3.png" atl="" class="img3" id="a3"/>
</label>
</li>
<li>
<input type="radio" name="1" id="a4">
<label for="a4" class="aa4 p">
<p>4</p>
<img src="../images/4.png" atl="" class="img4" id="a4"/>
</label>
</li>
</ul>
</body>
</html>
<html lang="ch-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0;margin:0;}
.a{margin:150px;position: relative;}
img{position: absolute;left:0;right: 0;width:155px;margin-top:10px;}
li{list-style: none;float:left;}
p{display: inline-block;padding: 3px;background:#dedede;margin-right: 3px;width:30px;height:30px;text-align: center;}
p:hover{color:red;opacity: .5;}
input{display: block;opacity: 0;}
input:checked+.aa1 .img1{z-index: 1;}
input:checked+.aa2 .img2{z-index: 1;}
input:checked+.aa3 .img3{z-index: 1;}
input:checked+.aa4 .img4{z-index: 1;}
input:checked+.p p{color:#fff;background: red;}
</style>
</head>
<body>
<ul class="a">
<li>
<input type="radio" name="1" id="a1">
<label for="a1" class="aa1 p">
<p>1</p>
<img src="../images/1.png" atl="" class="img1" id="a1"/>
</label>
</li>
<li>
<input type="radio" name="1" id="a2">
<label for="a2" class="aa2 p">
<p>2</p>
<img src="../images/2.png" atl="" class="img2" id="a2"/>
</label>
</li>
<li>
<input type="radio" name="1" id="a3">
<label for="a3" class="aa3 p">
<p>3</p>
<img src="../images/3.png" atl="" class="img3" id="a3"/>
</label>
</li>
<li>
<input type="radio" name="1" id="a4">
<label for="a4" class="aa4 p">
<p>4</p>
<img src="../images/4.png" atl="" class="img4" id="a4"/>
</label>
</li>
</ul>
</body>
</html>
阅读全文
1 0
- html+css 选项卡
- CSS选项卡之一
- CSS选项卡
- CSS选项卡
- jquery+CSS选项卡
- css tab选项卡
- css 选项卡效果
- css选项卡
- css div 选项卡效果
- CSS+DIV选项卡集合
- 用CSS制作选项卡
- table+CSS实现选项卡
- Js+Css 实现选项卡
- css+js实现选项卡
- div+css js选项卡
- 通用CSS选项卡效果
- html css选项卡连载
- CSS选项卡效果代码
- LeetCode-52-N-Queens II 同前一题
- 第三周实践项目1(2)--顺序表的基本运算插入.删除数据，初始化.销毁线性表
- 动态创建Fragment与TextView配合PullToRefresh刷新json串左右滑动
- 函数指针与指针函数
- 其他-jxl的使用（操作excel表格）
- css选项卡
- 叶俊：能量获取的秘籍-奇文
- 嚼得菜根做得大事·《菜根谭》·四
- ARC下的内存管理
- Wireshark 抓包分析 RTSP/RTP/RTCP 基本工作过程
- 实现android上传多张图片和文字给php后台
- Kotlin从入门到放弃之基础篇(二)——包和控制流
- 2017-09-19HTML基本标签
- 其他-poi的使用（操作excel表格）
