史上最牛逼的纯CSS实现tab选项卡，闪瞎你的狗眼
下载地址：http://download.csdn.net/detail/cometwo/9393614
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3外观美丽淡入淡出Tab菜单演示</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
<div class="panel">
<h2>This is Panel Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
</div>
</article>
</body>
</html>CSS文件
body {
font-family: Cambria, Arial;
background: #333;
}
.tabs {
width: 100%;
max-width: 600px;
border: 1px solid black;
margin: 50px auto;
}
input {
opacity: 1;
}
label {
cursor: pointer;
background: yellow;
color: red;
border-radius: 5px 5px 0 0;
padding: 1.5% 3%;
float: left;
margin-right: 2px;
font: italic 1em cambria;
}
label:hover {
background: blue;
}
input:checked + label {
background: palegreen;
color: blueviolet;
}
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
opacity: 1;
-webkit-transition: .9s;
}
.panels {
float: left;
clear: both;
position: relative;
width: 100%;
background: #fff;
border-radius: 0 10px 10px 10px;
min-height: 315px;
}
.panel {
width: 100%;
opacity: 0;
position: absolute;
background: #fff;
border-radius: 0 10px 10px 10px;
padding: 4%;
box-sizing: border-box;
}
.panel h2 {
margin: 0;
font-family: Arial;
}
史上最牛逼的纯CSS实现tab选项卡，闪瞎你的狗眼的更多相关文章
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 史上最牛逼的文件bom头清除代码，万能检测清除php，js等等
做php开发,经常部分uft8的php文件因BOM头不同导致各种错误和错位.网上搜到的大部分所谓的去处bom工具都是2货,没有能用的.下面的一段代码,请复制到一个php文件里,然后上传到你的网站根目录 ...
- .net操作数据库，史上最牛逼的方法,你见过这种方法吗
免费分享给大家.下载地址在最下面. C# code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...
- 【转载】可能是世界上最牛逼的网站统计程序——Matomo
大家做网站的时候一般都会使用网站统计程序.通常,国内网站会使用百度统计.CNZZ等,而国外网站则会使用Google Analytics等统计.国内的统计程序普遍功能不太丰富,且响应速度一般.Googl ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- CSS3 target 伪类不得不说那些事儿（纯CSS实现tab切换）
是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...
- SQL才是世界上最牛逼的语言！
身处互联网行业,SQL 可能是你需要掌握的核心技能之一. 最早的时候,SQL 作为一门查询数据库的语言,是程序员的必备技能,运维.开发.Web 以及数据等从业人员都需要用到 SQL,毕竟只有查询到正确 ...
- 史上最全的HTML、CSS知识点总结，浅显易懂。
来源于:http://blog.csdn.net/qiushi_1990/article/details/40260447 一,html+css基础1-1Html和CSS的关系学习web前端开发基础技 ...
随机推荐
- 洛谷——P1994 有机物燃烧
P1994 有机物燃烧 题目背景 本来准备弄难点的,还是算了吧 题目描述 输入一种有机物,输出与氧气反应化学方程式中CO2和H2O的系数 输入输出格式 输入格式: 一行,一个字符串,表示有机物 输出格 ...
- Codeforces Round #274 (Div. 2) Riding in a Lift（DP 前缀和）
Riding in a Lift time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- 初见Python<3>:字符串
1.格式化字符串 %s代表的是格式化字符串,或者说为字符串进行占位操作. 如果一个变量本身不是字符串,则会自动被转化为字符串. 使用%f格式化浮点数.同时也可以提供需要的精度,如%.3f,即保留3位小 ...
- [CODE FESTIVAL 2016]Distance Pairs
题意:有一个未知的边权为$1$的图,给定所有点到$1$的最短路$a_i$和到$2$的最短路$b_i$,问是否存在这样的图,如果存在,问图中最少有多少条边 先考虑$a_i$,有$a_1=0,a_i\ne ...
- [UOJ409]Highway Tolls
题意:交互题,给定一个简单无向图和$A,B(1\leq A\lt B)$,你可以对每条边指定其边权为$A$或$B$后通过交互库询问$S\rightarrow T$的最短路($S,T$在程序运行之前已经 ...
- SOCKET类型定义及应用
读代码时看到此处,摘记下来. 流套接字(SOCK_STREAM):流套接字用于提供面向连接.可靠的数据传输服务.该服务将保证数据能够实现无差错.无重复发送,并按顺序接收.流套接字之所以能够实现可靠的数 ...
- （原创）Stanford Machine Learning (by Andrew NG) --- (week 7) Support Vector Machines
本栏目内容来源于Andrew NG老师讲解的SVM部分,包括SVM的优化目标.最大判定边界.核函数.SVM使用方法.多分类问题等,Machine learning课程地址为:https://www.c ...
- Linux进程(作业)的查看和杀死 牛
http://www.cnblogs.com/geaozhang/p/6910151.html
- Linux上安装使用SSH(ubuntu&&redhat)
转自:http://blog.csdn.net/zxs9999/article/details/6930736 Ubuntu安装使用SSH ubuntu默认并没有安装ssh服务,如果通过ssh链接ub ...
- easyui-combobox绑定回车事件注意事项
回车事件的定义的位置必须是easyui-combobox数据加载的后面,才有效果. HTML文件: <select id="aucBrandNo" class="e ...