在html中选项卡怎么做,纯css3制作选项卡

继上一篇文章后，突发奇想利用纯粹的css3和radio的特性来打造一个选项卡切换的效果

普通的选项卡效果一般分为html+css+js来制作

步骤如下：

html做布局

css做样式

js添加切换效果

纯css3怎么解决呢？

html利用radio放到label中，将其隐藏(display：none)，然后用input:checked~[label里的所要修饰的标签]

css修饰相关样式，利用radio特性写样式

就是这么屌，写完了

选项卡功能就这么写完了

好了，废话不说，上代码

html部分:

html

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，超文本标记语言超文本标记语言(16张)它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

js

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

css部分:

*{margin:0;padding:0;}

body{background:#fff;font-size:16px;}

.clear{overflow:hidden;}

.fl{float:left;}

.fr{float:right;}

.text-center{text-align:center;}

.box{display:box;display:-webkit-box;}

.center{display:box;display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;}

input{display:none;}

.list{border-bottom:1px solid #1fa7e3;}

label{position:relative;width:1rem;display:block;height:40px;line-height:40px;}

label span{display:block;transition:.3s;-webkit-transition:.3s;box-shadow:inset 0 0 0 #1fa7e3;-webkit-box-shadow:inset 0 0 0 #1fa7e3;}

label p{width:2.8rem;padding:.1rem;font-size:14px;opacity:0;transition:.3s;-webkit-transition:.3s;line-height:20px;text-align:left;z-index:-1;visibility:hidden;position:absolute;left:0;top:40px;}

label:nth-child(2) p{left:-1rem;}

label:nth-child(3) p{left:-2rem;}

input:checked~p{opacity:1;visibility:visible;}

input:checked~span{opacity:1;color:#fff;box-shadow:inset 0 0 100px #1fa7e3;-webkit-box-shadow:inset 0 0 100px #1fa7e3;}

demo效果图

demo效果图

好了，没有写js的感觉是不是很爽！！！

欢迎大家对我的分享进行评论，指正

另，欢迎关注我的微信公众号：峰来风趣 观看更多精彩内容