在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(标准通用标记语言的一个子集)等文件样式的计算机语言。

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效果图

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

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

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

在html中选项卡怎么做,纯css3制作选项卡相关推荐

css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
html火影忍者网页设计作品,纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例...
本文实例讲述了纯css3制作的火影忍者中写轮眼开眼至轮回眼及进化过程实现方法.分享给大家供大家参考.具体分析如下: 今天是火影忍者(漫画)宣告完结的日子.看过火影的朋友都知道,写轮眼是什么,这里就不多 ...
css3 动画翅膀震动,纯css3制作煽动翅膀的蝴蝶
纯css3制作煽动翅膀的蝴蝶,先看效果怎么样,效果还不错吧上代码: html cssbody{ background: url("./images/bg.jpg&q ...
纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
纯css3制作写轮眼开眼及进化过程
原文: 纯css3制作写轮眼开眼及进化过程今天是火影忍者(漫画)宣告完结的日子,也是我首发的第一个随笔.看过火影的朋友都知道,写轮眼是什么,这里就不多说了.下面就直接展示整个效果,上张图,先睹为快: ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
纯CSS3制作逼真的iphone 6手机模型
注意这里我只是转载过来的(来自 jQuery之家的分享),然后加以整理.嘻嘻~ 纯CSS3制作逼真的iphone 6手机模型 iphone.html <div class="ipho ...
css 圆形背景icon_纯CSS3制作精美的圆形扁平风格图标
这是一组使用纯CSS3制作的精美的扁平风格的圆形图标.这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标. 制作方法 HTML结构图标的 ...

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

在html中选项卡怎么做,纯css3制作选项卡相关推荐

最新文章

热门文章