html的选项卡切换,纯css选项卡切换

Html

Css

纯CSS制作的TBA选项卡2.0

头条

[热议]GalaxyS8成最值期待的新机

[实用]魅族5s30分钟充电56%

[划算]爆款9.9元秒杀还包邮

[时尚]摩拜单车真的不如ofo？

公告

[时尚]摩拜单车真的不如ofo？

[热议]GalaxyS8成最值期待的新机

[实用]魅族5s30分钟充电56%

[划算]爆款9.9元秒杀还包邮

足球

[实用]魅族5s30分钟充电56%

[划算]爆款9.9元秒杀还包邮

[时尚]摩拜单车真的不如ofo？

[热议]GalaxyS8成最值期待的新机

* {

margin:0;

padding:0;

}

ul li {

list-style:none;

}

.wrap {

width:530px;

height:530px;

background:#ddd;

margin:100px auto;

padding-top:20px;

}

.wrap > p {

text-indent:1em;

font-size:25px;

font-weight:bold;

color:#fff;

}

.wrap .list {

position:relative;

margin:50px 0 0 100px;

}

.wrap .list li {

float:left;

}

.wrap .list li input {

position:relative;

z-index:-1;

}

.wrap .list li label {

display:block;

width:80px;

height:50px;

background:#6A9E52;

text-align:center;

line-height:50px;

font-size:18px;

color:#fff;

cursor:pointer;

border-radius:3px 3px 0 0;

border:10x solid #6A9E52;

transition:.3s;

}

.wrap .list li input:checked ~ div {

display:block;

}

.wrap .list li input:checked + label {

margin-top:-5px;

padding-top:5px;

background:#376B1F;

}

.wrap .list li label:hover {

background:#508437;

text-decoration:underline;

}

.wrap .list li div {

position:absolute;

top:68px;

left:-40px;

width:400px;

height:220px;

background:#376B1F;

padding-top:20px;

display:none;

}

.wrap .list li div p {

margin:10px 0 20px 20px;

color:#fff;

font-size:18px;

}

html的选项卡切换,纯css选项卡切换相关推荐

html导航页面转换,纯CSS实现导航栏Tab切换效果
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现.下面看看如何使用 CSS ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
不能随意切换的Tab选项卡页面
不能随意切换的Tab选项卡页面 ------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间:20 ...
微信小程序开发之选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml [html] vie ...
纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
html div点击选中效果,纯css实现选中切换效果
最近不太忙,多写几篇文章.很多时候我们用js来实现视觉效果,其实不用那么麻烦,掌握一些常用的css知识能让你事半功倍,这篇文章讲的是使用纯css来实现一个列表项的选中效果,希望对你有所帮助实现这个效 ...
css vue 选项卡_vuejs实现标签选项卡动态更改css样式的方法
html {{item.name}} js var app = new Vue({ el:"#app", router, data:{ m:"hello vue.js&q ...

html的选项卡切换,纯css选项卡切换

html的选项卡切换,纯css选项卡切换相关推荐

最新文章

热门文章