clip 属性

用于剪裁绝对定位元素。

.class {

      position:absolute;

      clip:rect(0px,60px,200px,0px);

  }

scroll-behavior: smooth;

作用在容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑。利用这个css属性可以一步将原来纯css标签直接切换，变成平滑过渡切换效果。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>纯CSS 利用label 和input 实现选项卡</title>

    <style>

    .tab label {

      padding: 10px;

      border: 1px solid #ccc;

      margin-right: -1px;

      text-align: center;

      float: left;

      overflow: hidden;

    }

    /* 清除浮动 */

    .tab::after {

      content: "";

      display: table;

      clear: both;

    }

    .box {

      height: 200px;

      border: 1px solid #ccc;

      scroll-behavior: smooth;  /* 缓冲效果 */

      overflow: hidden;

      margin-top: 10px;

    }

    .item {

      height: 100%;

      position: relative;

      overflow: hidden;

    }

    .item input {

      position: absolute;

      top: 0;

      height: 100%;

      width: 1px;

      border: 0;

      padding: 0;

      margin: 0;

      clip: rect(0 0 0 0);

    }

  </style>

</head>

<body>

    <h1>tab</h1>

    <div class="tab">

        <label for="tab1">tab1</label>

        <label for="tab2">tab2</label>

        <label for="tab3">tab3</label>

    </div>

    <div class="box">

        <div class="item">

            <!-- 点击label时，for对应的input会获得焦点, 并且出现在容器中的可视位置 -->

            <!-- 为禁止手机端自带键盘弹出，需要给input加上“readonly”属性 -->

            <input type="text" id="tab1" readonly>

            <p>选项卡1内容</p>

        </div>

        <div class="item">

            <input type="text" id="tab2" readonly>

            <p>选项卡2内容</p>

        </div>

        <div class="item">

            <input type="text" id="tab3" readonly>

            <p>选项卡3内容</p>

        </div>

    </div>

    <footer>

        bottom

    </footer>

</body>

</html>

纯 CSS 利用 label + input 实现选项卡的更多相关文章

  1. 简单的纯css重置input单选多选按钮的样式--利用伪类

    由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮 html <input type="radio" /> <input typ ...

  2. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  3. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  4. 纯CSS制作的TAB选项卡

    代码 这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容.具体请看下面代码. 关于兼容性,因为是用CSS3来制作的,所 ...

  5. 自定义常用input表单元素二：纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  6. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  7. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  8. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  9. 史上最牛逼的纯CSS实现tab选项卡，闪瞎你的狗眼

    下载地址:http://download.csdn.net/detail/cometwo/9393614 html文件 <!DOCTYPE html> <html> <h ...

随机推荐

  1. go语言练习：幂、函授接收和返回参数、转义字符、变量和常量

    1.实现a^b次方 package main func main() { r2 := power1(2,4) println(r2) } func power1(a uint64, b uint64) ...

  2. CSS样式----CSS样式表的继承性和层叠性（图文详解）

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  3. 【SPL标准库专题(5)】 Datastructures：SplStack & SplQueue

    这两个类都是继承自SplDoublyLinkedList,分别派生自SplDoublyLinkedList的堆栈模式和队列模式:所以放在一起来介绍: 堆栈SplStack # 类摘要 SplStack ...

  4. Java 如何启用 ARM 虚拟机诊断

    现象描述 如何通过 Java 语言实现在创建 ARM 虚拟机时开启诊断,并配置相关指标.   实现思路 调研最高版本的 JAVA SDK(1.1.0)源码发现,SDK 层面并未提供任启动诊断和配置诊断 ...

  5. jQuery为元素设置css的问题

    例子: 有如下的html代码 对文本框设置字体大小为20px ,即font-size:20px 首先会想到如下: $('input').css({font-size:'20px'}); 由于属性不能使 ...

  6. logger.error完整打印错误堆栈信息

    所以我们的写法可以是: Logger.error("xxx出错" , e); //第二个参数是e 而不是: Logger.error("xxx出错:" + e) ...

  7. Fabric密码保存

    参考:https://segmentfault.com/a/1190000000497630 多个IP分别使用不同的账号.密码 from fabric.api import * env.hosts = ...

  8. 【第一次玩Travis CI】终于弄好了我的马鸭

    真是不容易,我都要哭了.熬了半天终于弄完了!! 终于可以坐这儿挺会小曲,写写感受了. 作为一个程序写的不咋滴的程序员,倒是特别喜欢写博客,也是绝了. 高三的时候,用OneNote,后来转到Lofter ...

  9. [POI2007]MEG-Megalopolis

    传送门:嘟嘟嘟 第一反应是树链剖分,但是太长懒得写,然后就想出了一个很不错的做法. 想一下,如果我们改一条边,那么影响的只有他的子树,只要先搞一个dfs序,为什么搞出这个呢?因为有一个性质:一个节点的 ...

  10. go变量和常量

    一.变量 1. 命名规则:字母或者_下划线开头 2.“:=” 这种模式只能用于函数内部,常量const不能用这种模式来定义 二.常量 1. 常量const必须在定义的时候就赋值 2. 常量的值在整个过 ...