tab css html,纯css的tab 切换

css 版的tab切换

tab切换

* {

margin: 0;

padding: 0;

}

.content{

width: 500px;

height: 500px;

margin:30px auto 0;

}

.box {

width: 20em;

height: 10em;

border: 1px solid #ddd;

overflow: hidden;

}

.list {

height: 100%;

background: #ddd;

text-align: center;

position: relative;

font-size: 8em;

}

.list>input {

position: absolute;

top: 0;

height: 100%;

width: 1px;

border: 0;

padding: 0;

margin: 0;

clip: rect(0 0 0 0);

}

.one {

background-color: pink;

}

.two {

background-color: hotpink;

}

.three {

background-color: #8484c3;

}

.four {

background-color: yellow;

}

.link{

margin-top: 30px;

}

.click{

padding: 5px 10px;

border: 1px solid red;

}

结果

结果 1

结果2

tab css html,纯css的tab 切换相关推荐

[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
[css] 使用纯css能否监控到用户的一些信息？怎么实现？
[css] 使用纯css能否监控到用户的一些信息?怎么实现? 利用:active 伪类实现监控用户的点击 .button-1:active::after {content: url(./pixel.g ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
html超市代码,前端 CSS : 5# 纯 CSS 实现24小时超市
介绍原文链接感謝 comehope 大佬的 [前端每日实战] 效果预览源代码地址代码解读 1. html 结构命名规则使用了 BEM 常规样式初始化 * { margin: 0; paddi ...
css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力,但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦.本教程包含各种形 ...

tab css html,纯css的tab 切换

tab css html,纯css的tab 切换相关推荐

最新文章

热门文章