CSS3——选项卡切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab Switch</title>
<link rel="stylesheet" href="stylesheet/tabSwitch.css">
</head>
<body>
<ul>
<li>
<input type="radio" id="radio1" name="tabs" checked>
<label for="radio1">选项卡1</label>
<div class="tabs-content" id="content1">1</div>
</li>
<li>
<input type="radio" id="radio2" name="tabs">
<label for="radio2">选项卡2</label>
<div class="tabs-content" id="content2">2</div>
</li>
</ul>
</body>
</html>
*{
margin:;
padding:;
list-style-type: none;
}
ul{
margin:200px auto;
width: 500px;
position: relative;
}
li{
float: left;
}
input[type="radio"]{
position: absolute;
left: -999em;
}
label{
display: block;
cursor: pointer;
line-height: 50px;
font-size: 20px;
font-family: 微软雅黑;
width: 80px;
padding-top: 10px;
padding-bottom: 10px;
background-color: aqua;
border-radius: 8px 8px 0 0;
transition: all 0.2s linear;
}
div{
top:70px;
left:;
position: absolute;
width: 500px;
height: 300px;
background-color: aqua;
}
input[type="radio"]:checked~label{
background-color: cadetblue;
padding-top: 12px;
}
input[type="radio"]:checked~div {
z-index:;
}
CSS3——选项卡切换的更多相关文章
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- 慕课编程题JS选项卡切换
Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- Android ViewPager实现选项卡切换
ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
- 常用js效果：选项卡切换
js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码: <style> .txtadsblk01{ width:200px;} ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- 在.net中用Connection对象数据源的架构信息
可得到数据库中的,表,视图,等信息 string strcon = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + fi ...
- POJ3281 Dining 最大流
题意:有f种菜,d种饮品,每个牛有喜欢的一些菜和饮品,每种菜只能被选一次,饮品一样,问最多能使多少头牛享受自己喜欢的饮品和菜 分析:建边的时候,把牛拆成两个点,出和入 1,源点向每种菜流量为1 2,每 ...
- [zouxianghui] 清空GridPanel的checkbox选中行
清空GridPanel的checkbox选中行,GridPanel.getSelectionModel().clearSelections();可以清空选中状态
- QTP、LoadRunner、QC工具下载地址
QTP10.0工具下载地址:http://h30302.www3.hp.com/prdownloads/T6510-15063.zip?ordernumber=380454070&itemid ...
- selenium运行chrome去掉command -line flag
每次驱动chrome浏览器都会出现这玩意,比较烦人··想办法去掉了它: ChromeOptions options = new ChromeOptions();options.addArguments ...
- android AudioRecord 与 AudioTrack的录音加回放的使用
http://stackoverflow.com/questions/32682952/audiotrack-audiotack-not-playing-fully-recorded-audio
- CSS样式表优先级
使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...
- 转载ASP.net 中 OutputCache 指令各个参数的作用
使用@ OutputCache指令 使用@ OutputCache指令,能够实现对页面输出缓存的一般性需要.@ OutputCache指令在ASP.NET页或者页中包含的用户控件的头部声明.这种方式非 ...
- 射频识别技术漫谈(2)——国际标准【worldsing 笔记】
如果你只是智能卡的用户,通常可以不必关注国际标准,但作为智能卡的专业开发人员,则至少也要对相关标准有所了解.国际标准一般都是西方人制定的,原版都是英文的,而所谓中文版往往是对原版的直译,许多情况下并未 ...
- 牛一网ecshop综合类模板(仿淘常州) for ecshop 2.7.3
牛一网目前已经开发好这款ecshop综合类/多色系模板,已经开发好多种色系,本模板将会搭配多种颜色让用户选择,以适应 家电数码. 个护化妆. 生鲜水果 . 服饰鞋帽 . 图书音像 . 粮油食品.家具家 ...