zoukankan      html  css  js  c++  java
  • :before与:after伪类的应用

    1.小三角样式

    .tip{
        position:relative;
        display:inline-block;
        100px;
        margin:100px;
        padding:30px 20px;
        color:#fff;
        border:1px solid #666;
        border-radius:5px;
        background-color:rgba(0,153,51,1);
    }
    .tip:before{
        content:'';
        position:absolute;
        top:15px;
        left:-20px;
        border:10px solid #666;
        border-color:transparent #666 transparent transparent;
    }
    .tip:after{
        content:'';
        position:absolute;
        top:15px;
        left:-18px;
        border:10px solid rgba(0,153,51,1);
        border-color:transparent rgba(0,153,51,1) transparent transparent;
    }
    2.取消浮动

    .float{
        border:1px solid #000;
        zoom:1; /*解决ie6,ie7浮动问题*/
    }
    .float:after{
        content:'';
        display:block;
        0;
        height:0;
        clear:both;
    }
    .fl{
        float:left;
        300px;
        height:200px;
        color:#fff;
        background:rgba(204,51,0,1);
    }
    .fr{
        float:right;
        300px;
        height:200px;
        color:#fff;
        background:rgba(0,102,102,1);
    }

    1.:after消除浮动,父元素需加zoom:1,建议使用,
    2.在父元素的末尾加一个孩子,<div style="clear:both"></div>
    3.在父元素中增加overflow:hidden; 不能和position配合使用,因为超出的尺寸的会被隐藏
    4.在父元素中增加overflow:auto;前提是必须定义width 或 zoom:1,并且不能定义height
    5.父元素一起浮动,不推荐使用
    6.给父元素增加display:table,不建议使用
    3.单选或复选

    .simple{
        100px;
        height:20px;
        border:1px solid #000;
        line-height:20px;
        padding:10px;
        display:inline-block;
    }
    .simple input{
        display:none;
    }
    .simple label:before{
        content:'';
        display:inline-block;
        15px;
        height:15px;
        vertical-align:-2px;
        margin-right:5px;
        border:1px solid #000;
    }
    .simple input:checked + label:before{
        content:'';
        display:inline-block;
        15px;
        height:15px;
        background:rgba(255,51,0,1);
        vertical-align:-2px;
        margin-right:5px;
        border:1px solid #000;
    }
    .middle{
        display:inline-block;
        position:relative;
        overflow:hidden;
    }
    .middle input{
        display:none;
    }
    .middle label{
        padding:10px;
        display:inline-block;
        border:1px solid #000;
    }
    .middle input:checked + label{
        border:rgba(0,255,255,1) 1px solid ;
    }
    .middle input:checked + label:after{
        content:"";
        position:absolute;
        bottom:0px;
        right:0px;
        10px;
        height:10px;
        border-radius:10px 0 0 0;
        display:inline-block;
        background:#F03;
        color:#fff;
    }
    .hight{
        display:inline-block;
        position:relative;
    }
    .hight input{
        display:none;
    }
    .hight input + label:before{
        content:'';
        display:inline-block;
        48px;
        height: 24px;
        margin-right:10px;
        vertical-align:-6px;
        background:#e0e0e0;
        position:relative;
        border-radius:24px;
        transition:background 0.3s;
    }
    .hight input + label:after{
        content:'';
        display:inline-block;
        20px;
        height:20px;
        border-radius:20px;
        background:#fff;
        position:absolute;
        top:2px;
        left:2px;
        transition:left 0.32s;
    }
    .hight input:checked + label:before{
        background:rgba(153,0,153,1);
    }
    .hight input:checked+label:after{
        left:26px;
    }
    .diff{
        display:inline-block;
        position:relative;
    }
    .diff label{
        auto;
        height:48px;
    }
    .diff label input{
        display:none;
    }
    .diff label input + i{
        content:'';
        position:relative;
        48px;
        height:24px;
        border-radius:24px;
        background:#e0e0e0;
        display:inline-block;
        transition:background 0.3s;
    }
    .diff label input + i:after{
        content:"";
        position:absolute;
        top:2px;
        left:2px;
        display:inline-block;
        background:#fff;
        20px;
        height:20px;
        border-radius:20px;
        transition:left 0.3s;
    }
    .diff label input:checked + i{
        background:#0F0;
    }
    .diff label input:checked + i:after{
        left:26px;
    }

  • 相关阅读:
    4-(基础入门篇)学会刷Wi-Fi模块固件(刷AT指令固件)
    关于后期文章
    11-51单片机ESP8266学习-AT指令(ESP8266作为TCP客户端,连接TCP服务器,用串口调试助手和手机TCP调试助手测试)
    关于单双向晶闸管的控制电路
    3-(基础入门篇)稍微了解一下(需要知道的关于Lua的一些基本的知识)
    2-(基础入门篇)Air202下载开发入门(给Air202下载第一个程序)
    1-51单片机开发板介绍(所讲内容,功能介绍)
    2-关于单片机通信数据传输(中断接收,大小端,IEEE754浮点型格式,共用体,空闲中断,环形队列)
    1-STM32物联网开发WIFI+GPRS(Wi-Fi入门篇)_简介
    unbuntu下安装qq
  • 原文地址:https://www.cnblogs.com/ricesm/p/5037004.html
Copyright © 2011-2022 走看看