欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

利用checkbox和radio元素创建页面常用可交互的纯CSS组件。

来源: 开发者 投稿于  被查看 7458 次 评论:115

利用checkbox和radio元素创建页面常用可交互的纯CSS组件。


页面常用组件以bootstrap的js组件来算大致包括:

[ol]
[li]--单/复选框(radio/chekcbox)[/li]
[li]--导航(Nav)[/li]
[li]--轮播(Carousel)[/li]
[li]--模态框(Modal)[/li]
[li]--下拉菜单(Dropdown)[/li]
[li]--标签页Tabs[/li]
[li]--工具提示(Tooltip)[/li]
[li]--弹出框(Popover)[/li]
[li]--滚动监听[/li]
[/ol]

这次分享的所有组件,除了滚动监听无法用CSS实现,其余均以纯CSS方式实现,并且大部分组件都能方便的实现重用和组件化。并且在之后的其它实践和尝试后,发现利用checkbox和radio的特性能实现很多的页面交互效果和组件。现在这些很多我都已经用到了我的实际开发中。这是我刚开始计划开发纯CSS组件时的一些demo,有些自适应和重用性方面没做好,上面列出的组件也不是全贴上来了,但明白原理后其它组件也是一样的,感兴趣的朋友可以先看一下预览效果再看代码会更清楚一点

纯CSS交互组件

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
</head>
<style>
    body {
        text-align: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        background-color: #EDECEB;
        font-family: "microsoft yahei", Arial, sans-serif;
        color: #454545
    }

    .fl {
        float: left;
        margin-left: 5px
    }

    .fr {
        float: right;
        margin-right: 5px
    }

    .pa-1 {
        padding: 10px;
    }

    .float_R {
        float: right
    }

    .row {
        position: relative;
        /*padding:15px 0;*/
        margin-bottom: 3em
    }

    .row>p{
        display:inline-block;
        width:400px;
        padding:15px;
        text-align:left
    }

    .row:before {
        content: '';
        display: block;
        position: absolute;
        bottom: -20px;
        width: 100%;
        height: 1px;
        background-image: -webkit-linear-gradient(right, transparent, #ccc 50%, transparent);
        background-image: -moz-linear-gradient(right, transparent, #ccc 50%, transparent);
        background-image: -ms-linear-gradient(right, transparent, #ccc 50%, transparent);
        background-image: -o-linear-gradient(right, transparent, #ccc 50%, transparent);
        background-image: linear-gradient(right, transparent, #ccc 50%, transparent);
    }

    .pos_abs {
        position: absolute;
    }

    .hideCR {
        display: inline-block;
        position: absolute;
        z-index: -1;
        width: 0;
        height: 0;
        opacity: 0
    }

    .slow {
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease
    }

    .btn_wrap {
        display: inline-block;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100px
    }

    .btn_wrap input.btn_checkbox {
        display: inline-block;
        position: absolute;
        z-index: -1;
        width: 0;
        height: 0;
        opacity: 0
    }

    .btn_wrap label.btn_label {
        display: inline-block;
        width: 100%;
        height: 100%;
        padding: 6px 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #ccc;
        cursor: pointer;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease
    }
    /*click btn*/

    .btn_wrap input#btn1.btn_checkbox:checked~label {
        color: #fff;
        background-color: #33CC66
    }

    .btn_wrap input#btn2.btn_checkbox:checked~label {
        color: #fff;
        background-color: #990000
    }
    /*slide btn*/

    .btn_wrap.slide {
        padding: 6px 10px;
        border: 1px solid #ccc
    }

    .btn_wrap.slide label.btn_label.label_slide {
        top: 0;
        width: 50%;
        padding: 0;
        line-height: 2em;
        background-color: #66CCFF
    }

    .btn_wrap.slide input#btn3.btn_checkbox:checked~label {
        left: 0
    }
    /*stir btn*/

    .btn_wrap.stir {
        width: 50px;
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 50% 50% 0 0/50% 50%;
    }

    .btn_wrap.stir .label_stir {
        bottom: 20px;
        width: 4px;
        height: 50px;
        padding: 10px 0;
        margin-left: -2px;
        -moz-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }

    .btn_wrap.stir .label_stir:before {
        content: '';
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: -3px;
        bottom: -5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ccc;
    }

    .btn_wrap.stir .label_stir i {
        /*content:'';*/
        display: inline-block;
        position: absolute;
        top: 0;
        left: -8px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #0f0;
    }

    .btn_wrap.stir input#btn4.btn_checkbox:checked~label {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
    }

    .btn_wrap.stir input#btn4.btn_checkbox:checked~label i {
        background-color: #f00;
    }
    /*radio group*/

    .btn_wrap.radio_group .label_radio {
        background-color: #00CCFF
    }

    .btn_wrap.radio_group .btn_radio:checked~label {
        outline: 1px dashed #0099FF;
        outline-offset: 1px;
        color: #fff
    }
    /*radio slide*/

    .btn_wrap.radio_slide {
        width: 420px
    }

    .btn_wrap.radio_slide .btn_label {
        width: 100px
    }

    .btn_wrap.radio_slide .radio_pointer {
        z-index: -1;
        position: absolute;
        left: 0;
        top: -8px;
        width: 106px;
        height: 40px;
        /*background-color:#FFCC33;*/
        border: 0 solid #9999FF;
        border-width: 5px 0 5px 0;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease
    }

    .btn_wrap.radio_slide #radio5.btn_radio_slide:checked~.radio_pointer {
        left: 0
    }

    .btn_wrap.radio_slide #radio5.btn_radio_slide:checked~.radio_block:nth-of-type(1) {
        color: #fff;
        background-color: #6666FF;
    }

    .btn_wrap.radio_slide #radio6.btn_radio_slide:checked~.radio_pointer {
        left: 105px
    }

    .btn_wrap.radio_slide #radio6.btn_radio_slide:checked~.radio_block:nth-of-type(2) {
        color: #fff;
        background-color: #6666FF;
    }

    .btn_wrap.radio_slide #radio7.btn_radio_slide:checked~.radio_pointer {
        left: 209px
    }

    .btn_wrap.radio_slide #radio7.btn_radio_slide:checked~.radio_block:nth-of-type(3) {
        color: #fff;
        background-color: #6666FF;
    }

    .btn_wrap.radio_slide #radio8.btn_radio_slide:checked~.radio_pointer {
        left: 314px
    }

    .btn_wrap.radio_slide #radio8.btn_radio_slide:checked~.radio_block:nth-of-type(4) {
        color: #fff;
        background-color: #6666FF;
    }
    /*checkbox banner*/

    .banner_wrap {
        display: inline-block;
        position: relative;
        width: 400px;
        padding-bottom: 35px;
        /*outline:1px dotted #000;
        outline-offset:10px;*/
        /*border-bottom:1px dotted #f00*/
    }

    .banner_click .banner_radio {
        width: 0;
        height: 0;
        opacity: 0
    }

    .banner_click .banner_radio,
    .banner_click .btn_toNext {
        position: absolute;
        cursor: pointer
    }

    .banner_click .btn_toNext {
        width: 10px;
        height: 7px;
        bottom: 5px;
        right: 10%;
        background-color: #999;
        border-radius: 1px;
        /*border:1px solid #33CC66*/
    }

    .banner_click .btn_toNext:after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        position: absolute;
        right: -20px;
        top: -7px;
        border: 10px solid transparent;
        border-left-color: #999999;
        border-radius: 2px
    }

    .banner_wrap .wrap_slider,
    .banner_wrap .wrap_slider .slider_inner .inner_item {
        position: relative;
        width: 400px;
        height: 100px;
        line-height: 100px;
        overflow: hidden;
        /*border:1px solid #ccc;*/
    }

    .banner_wrap .wrap_slider .slider_inner {
        position: absolute;
        left: 0px;
        width: 1600px;
        text-align: left;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease
    }

    .banner_wrap .wrap_slider .slider_inner .inner_item {
        display: inline-block;
        text-align: center;
        color: #fff
    }

    .banner_wrap .wrap_slider .slider_inner .inner_item:nth-of-type(odd) {
        background-color: #CA4040
    }

    .banner_wrap .wrap_slider .slider_inner .inner_item:nth-of-type(even) {
        background-color: #FF8604
    }

    #btn5_label {
        z-index: 2
    }

    #btn5:checked~.wrap_slider>.slider_inner {
        left: 0px;
        /*-webkit-transition-duration:0s;
        -moz-transition-duration: 0s*/
    }

    #btn5:checked~#btn6_label {
        z-index: 3;
    }

    #btn6:checked~.wrap_slider>.slider_inner {
        left: -400px
    }

    #btn6:checked~#btn7_label {
        z-index: 3
    }

    #btn7:checked~.wrap_slider>.slider_inner {
        left: -800px
    }

    #btn7:checked~#btn8_label {
        z-index: 3
    }

    #btn8:checked~.wrap_slider>.slider_inner {
        left: -1200px
    }

    #btn8:checked~#btn8_label {
        z-index: 1
    }
    /*panel click*/

    .panel_container {
        width: 400px;
        margin: 0 auto;
        text-align: left
    }

    .panel_click .panels_label {
        display: inline-block;
        width: 80px;
        padding: 3px 5px;
        background-color: #ccc;
        cursor: pointer;
        text-align: center
    }

    .panel_click .panel_body {
        display: none;
        padding: 10px;
        text-indent: 2em;
        background-color: #fff
    }

    .panel_head:nth-of-type(1):checked~.panel_body:nth-of-type(1),
    .panel_head:nth-of-type(2):checked~.panel_body:nth-of-type(2),
    .panel_head:nth-of-type(3):checked~.panel_body:nth-of-type(3),
    .panel_head:nth-of-type(4):checked~.panel_body:nth-of-type(4) {
        display: block
    }

    .panel_head:nth-of-type(1):checked~.panels_label:nth-of-type(1),
    .panel_head:nth-of-type(2):checked~.panels_label:nth-of-type(2),
    .panel_head:nth-of-type(3):checked~.panels_label:nth-of-type(3),
    .panel_head:nth-of-type(4):checked~.panels_label:nth-of-type(4) {
        background-color: #fff
    }
    /*accordion click*/

    .accordion_container {
        width: 400px;
        margin: 0 auto;
    }

    .accordion_wrap .accordion_label {
        display: block;
        padding: 3px 0;
        background-color: #ccc;
        cursor: pointer
    }

    .accordion_wrap .accordion_content {
        max-height: 0;
        margin: 0 0 10px 0;
        padding: 0 10px;
        overflow: hidden;
        text-align: left;
        background-color: #fff;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease
    }

    .accordion_wrap .accordion_control:checked~.accordion_content {
        max-height: 100px
    }
    /*thumbnail*/

    .banner_thumb {
        width: 400px;
        overflow: hidden
    }

    .banner_thumb .thumb_control {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        opacity: 0
    }

    .thumb_wrap {
        margin-bottom: 10px
    }

    .thumb_wrap,
    .thumb_wrap .thumb_slider {
        width: 100%;
        overflow: hidden
    }

    .thumb_wrap .thumb_slider {
        width: 400%;
    }

    .thumb_wrap .thumb_slider .slider_item {
        display: inline-block;
        width: 25%;
        height: 100px;
        line-height: 100px;
        color: #fff
    }

    .thumb_wrap .thumb_slider .slider_item:nth-of-type(even),
    .banner_thumb .banner_thumbnail:nth-of-type(even) {
        background-color: #4390EE
    }

    .thumb_wrap .thumb_slider .slider_item:nth-of-type(odd),
    .banner_thumb .banner_thumbnail:nth-of-type(odd) {
        background-color: #CA4040
    }

    .thumb_wrap .thumb_slider .slider_item:nth-of-type(3n+1),
    .banner_thumb .banner_thumbnail:nth-of-type(3n+1) {
        background-color: #FF8604
    }

    .banner_thumb .controls_wrap {
        -webkit-transform: translateX(140px);
        -moz-transform: translateX(140px);
        color: #fff
    }

    .banner_thumb .banner_thumbnail {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        cursor: pointer
    }
    /*控制轮播*/

    #thumb1:checked~.thumb_wrap .thumb_slider {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0)
    }

    #thumb2:checked~.thumb_wrap .thumb_slider {
        -webkit-transform: translateX(-25%);
        -moz-transform: translateX(-25%)
    }

    #thumb3:checked~.thumb_wrap .thumb_slider {
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%)
    }

    #thumb4:checked~.thumb_wrap .thumb_slider {
        -webkit-transform: translateX(75%);
        -moz-transform: translateX(-75%)
    }
    /*控制缩略图移动*/

    #thumb1:checked~.slide_flow {
        -webkit-transform: translateX(140px);
        -moz-transform: translateX(140px);
    }

    #thumb2:checked~.slide_flow {
        -webkit-transform: translateX(60px);
        -moz-transform: translateX(60px)
    }

    #thumb3:checked~.slide_flow {
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px)
    }

    #thumb4:checked~.slide_flow {
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px)
    }
    /*modal*/

    .modal_wrap {
        display: inline-block;
        position: relative;
        width: 400px;
    }

    .modal_wrap .modal_btn {
        padding: 5px;
        /*border-radius: 5px;*/
        color: #fff;
        background-color: #337ab7;
        cursor:pointer
    }

    .modal_wrap .modal_bg {
        display: inline-block;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5)
    }

    .modal_content {
        display: inline-block;
        position: fixed;
        z-index: 11;
        width: 50%;
        min-height: 300px;
        padding: 10px;
        text-align: left;
        background-color: #fff
    }

    .modal_content .modal_close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer
    }

    .modal_content h1.modal_title {
        text-align: center
    }

    .fixCenter {
        top: 50%;
        left: 50%;
        -moz-transform: translate(-50%, -50%)
    }

    .modal_wrap .modal_bg,
    .modal_content {
        display: none
    }

    .modal_controler:checked~.modal_bg,
    .modal_controler:checked~.modal_content {
        display: block
    }

    /*tooltips*/
    .tooltips{
        display:inline-block;
        position:relative;
        padding:5px;
        letter-spacing:2px;
        background-color:#fff;
        box-shadow:0 0 2px #000;
    }
    .tooltips .tooltips_top{
        cursor:pointer
    }
    .tooltip_controler:after{
        content:'\25bc';
        display:inline-block;
        position:absolute;
        top:-15px;
        left:49%;
        color:#fff
    }
    label.transparent_bg{
        display:inline-block;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0);
        display:none
    }

    .tooltips>.tooltips_top:before{
        content:attr(data-title);
        display:inline-block;
        position:absolute;
        top:-90px;
        left:0;
        width:calc(100% - 20px);
        padding:5px 10px;
        word-wrap:nowrap;
        text-overflow:ellipsis;
        background-color:#ddd
    }
    .tooltips>.tooltips_top:after{
        content:attr(data-content);
        display:inline-block;
        position:absolute;
        top:-60px;
        left:0;
        width:calc(100% - 10px);
        height:40px;
        max-height:40px;
        padding:5px;
        font-size:12px;
        overflow:hidden;
        background-color:#fff
    }
    .tooltips_top>.arrows:before{
        content:'\25bc';
        display:inline-block;
        position:absolute;
        top:-15px;
        left:49%;
        color:#fff
    }

    .tooltips>.tooltips_top:before,.tooltips>.tooltips_top:after{
        text-align:left
    }
    .tooltips>.tooltips_top label.transparent_bg,.tooltips>.tooltips_top:before,.tooltips>.tooltips_top:after,.tooltips_top>.arrows:before{
        display:none
    }
    .tooltip_controler:checked~label.transparent_bg,.tooltip_controler:checked~label:before,.tooltip_controler:checked~label:after,.tooltip_controler:checked~.tooltips_top>.arrows:before{
        display:block;
    }

</style>

<body>
    <div class='row'>
        <h3 style='text-align:left;padding:15px 20%;'>
            这里所有的例子主要都是利用checkbox或者radio元素的特性,加上CSS3的":checked","~","+"和后代选择器,和特定的
            html结构来实现组件的状态保存,而不像":hover"无法保存状态。正式利用上述特性,才能利用css来对元素做不限于:hover效果的
            交互动作,也不限于下来我展示出来的效果。希望感兴趣的朋友能开发出更多实用且很方便的其它组件。谢谢。
        </h3>
    </div>
    <!--复选按钮-->
    <div class='row'>
        <p>复选按钮:</p><br>
        <div class='btn_wrap'>
            <input id='btn1' class='btn_checkbox' type="checkbox">
            <label for="btn1" class='btn_label'>Green</label>
        </div>
        <div class='btn_wrap'>
            <input id='btn2' class='btn_checkbox' type="checkbox">
            <label for="btn2" class='btn_label'>Red</label>
        </div>
    </div>
    <!--单选开关-->
    <div class='row'>
        <p>单选按钮:</p><br>
        <div class='btn_wrap slide'>
            <input id='btn3' class='btn_checkbox' type="checkbox">
            <span class='fl'>开</span><span class='fr'>关</span>
            <label for="btn3" class='btn_label label_slide pos_abs'>Press</label>
        </div>
    </div>
    <!--摇杆开关-->
    <div class='row'>
        <p>摇杆单选开关:</p><br>
        <div class='btn_wrap stir'>
            <input id='btn4' class='btn_checkbox' type="checkbox">
            <label for="btn4" class='btn_label label_stir pos_abs'><i></i></label>
        </div>
    </div>
    <!--单选按钮组-->
    <div class='row'>
        <p>单选效果的导航栏:</p><br>
        <div class='btn_wrap radio_group'>
            <input id='radio1' type="radio" class='btn_checkbox btn_radio' name='radio_group' checked=checked>
            <label for="radio1" class='btn_label label_radio'>Button</label>
        </div>
        <div class='btn_wrap radio_group'>
            <input id='radio2' type="radio" class='btn_checkbox btn_radio' name='radio_group'>
            <label for="radio2" class='btn_label label_radio'>Button</label>
        </div>
        <div class='btn_wrap radio_group'>
            <input id='radio3' type="radio" class='btn_checkbox btn_radio' name='radio_group'>
            <label for="radio3" class='btn_label label_radio'>Button</label>
        </div>
        <div class='btn_wrap radio_group'>
            <input id='radio4' type="radio" class='btn_checkbox btn_radio' name='radio_group'>
            <label for="radio4" class='btn_label label_radio'>Button</label>
        </div>
    </div>
    <!--导航active类-->
    <div class='row'>
        <p>带位置提示的导航栏:</p><br>
        <div class='btn_wrap radio_slide'>
            <input id='radio5' type="radio" class='btn_checkbox btn_radio_slide' name='radio_slide' checked=checked>
            <input id='radio6' type="radio" class='btn_checkbox btn_radio_slide' name='radio_slide'>
            <input id='radio7' type="radio" class='btn_checkbox btn_radio_slide' name='radio_slide'>
            <input id='radio8' type="radio" class='btn_checkbox btn_radio_slide' name='radio_slide'>
            <label for="radio5" class='btn_label radio_block'>ONE</label>
            <label for="radio6" class='btn_label radio_block'>TWO</label>
            <label for="radio7" class='btn_label radio_block'>THREE</label>
            <label for="radio8" class='btn_label radio_block'>FOUR</label>
            <span class='radio_pointer'></span>
        </div>
    </div>
    <!--tab组件-->
    <div class='row'>
        <p>tab组件:</p><br>
        <div class='panel_container'>
            <div class='panel_wrap panel_click'>
                <input id='panel1' class='hideCR panel_head' type="radio" name='panel_control' checked=checked>
                <input id='panel2' class='hideCR panel_head' type="radio" name='panel_control'>
                <input id='panel3' class='hideCR panel_head' type="radio" name='panel_control'>
                <input id='panel4' class='hideCR panel_head' type="radio" name='panel_control'>
                <label for="panel1" class='panels_label'>HOME</label>
                <label for="panel2" class='panels_label'>INTRO</label>
                <label for="panel3" class='panels_label'>DOCS</label>
                <label for="panel4" class='panels_label'>CONTACT</label>
                <div id='panel1' class='panel_body'>
                    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                    Mustache cliche tempor, williamsburg
                </div>
                <div id='panel2' class='panel_body'>
                    williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui
                    irure terry richardson ex squid.
                </div>
                <div id='panel3' class='panel_body'>
                    Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
                </div>
                <div id='panel4' class='panel_body'>
                    anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip
                    jean shorts ullamco ad vinyl cillum PBR.
                </div>
            </div>
        </div>
    </div>
    <!--单选手风琴-->
    <div class='row'>
        <p>accordion单选组件:</p><br>
        <div class='accordion_container'>
            <div class='accordion_wrap'>
                <input id='accordion1' class='hideCR accordion_control' type="radio" name='accordion'>
                <label for="accordion1" class='accordion_label'>HTML</label>
                <div class='accordion_content'>
                    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                    Mustache cliche tempor, williamsburg
                </div>
            </div>
            <div class='accordion_wrap'>
                <input id='accordion2' class='hideCR accordion_control' type="radio" name='accordion'>
                <label for="accordion2" class='accordion_label'>CSS</label>
                <div class='accordion_content'>
                    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                    Mustache cliche tempor, williamsburg
                </div>
            </div>
            <div class='accordion_wrap'>
                <input id='accordion3' class='hideCR accordion_control' type="radio" name='accordion'>
                <label for="accordion3" class='accordion_label'>JAVASCRIPT</label>
                <div class='accordion_content'>
                    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                    Mustache cliche tempor, williamsburg
                </div>
            </div>
        </div>
    </div>
    <!--复选手风琴-->
    <div class='row'>
        <p>accordion手风琴组件:</p><br>
        <div class='accordion_container'>
            <div class='accordion_wrap'>
                <input id='accordion4' class='hideCR accordion_control' type="checkbox" name='accordion'>
                <label for="accordion4" class='accordion_label'>HTML</label>
                <div class='accordion_content'>
                    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                    Mustache cliche tempor, williamsburg
                </div>
            </div>
            <div class='accordion_wrap'>
                <input id='accordion5' class='hideCR accordion_control' type="checkbox" name='accordion'>
                <label for="accordion5" class='accordion_label'>CSS</label>
                <div class='accordion_content'>
                    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                    Mustache cliche tempor, williamsburg
                </div>
            </div>
            <div class='accordion_wrap'>
                <input id='accordion6' class='hideCR accordion_control' type="checkbox" name='accordion'>
                <label for="accordion6" class='accordion_label'>JAVASCRIPT</label>
                <div class='accordion_content'>
                    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                    Mustache cliche tempor, williamsburg
                </div>
            </div>
        </div>
    </div>
    <!--modal模态框-->
    <div class='row'>
        <p>模态框:</p><br>
        <div class='modal_wrap'>
            <div class='modal_group'>
                <input id='modal_open' class='modal_controler hideCR' type="checkbox">
                <label class='modal_btn' for="modal_open">OPEN A MODAL</label>
                <label class='modal_bg' for="modal_open"></label>
                <div class='modal_content fixCenter'>
                    <label for='modal_open' class='modal_close'>X</label>
                    <h1>Css Modal</h1>
                    <p>
                        通过css的checkbox实现的模态框,可复用,不冲突。
                    </p>
                </div>
            </div>

        </div>
    </div>
    <!--tootip提示条-->
    <div class='row'>
        <p>Tooltip:</p><br>
        <div class='tooltips top'>
            <input id='top' type="checkbox" class='tooltip_controler hideCR'>
            <label for="top" class='transparent_bg'></label>
            <label for='top' class='tooltips_top' data-title='Title' data-content='这是一个在上面的tooltips! '>
                <i class='arrows'></i>
                提示板-ToolTips!
            </label>
        </div>
    </div>
    <!--向右轮播-->
    <div class='row'>
        <p>单向轮播:</p><br>
        <div class='banner_wrap banner_click'>
            <input id='btn5' class='banner_radio' type="radio" name='banner_control' checked=checked>
            <input id='btn6' class='banner_radio' type="radio" name='banner_control'>
            <input id='btn7' class='banner_radio' type="radio" name='banner_control'>
            <input id='btn8' class='banner_radio' type="radio" name='banner_control'>
            <label for="btn5" id='btn5_label' class='btn_toNext'></label>
            <label for="btn6" id='btn6_label' class='btn_toNext'></label>
            <label for="btn7" id='btn7_label' class='btn_toNext'></label>
            <label for="btn8" id='btn8_label' class='btn_toNext'></label>
            <div class='wrap_slider'>
                <div class='slider_inner'>
                    <span class='inner_item'>A-A-A-A</span><span class='inner_item'>B-B-B-B</span><span class='inner_item'>C-C-C-C</span><span class='inner_item'>D-D-D-D</span>
                </div>
            </div>
        </div>
    </div>
    <!--缩略图轮播-->
    <div class='row'>
        <p>缩略图轮播:</p><br>
        <div class='banner_wrap banner_thumb'>
            <input id='thumb1' class='thumb_control' type="radio" name='thumb_control'>
            <input id='thumb2' class='thumb_control' type="radio" name='thumb_control'>
            <input id='thumb3' class='thumb_control' type="radio" name='thumb_control'>
            <input id='thumb4' class='thumb_control' type="radio" name='thumb_control'>
            <div class='thumb_wrap'>
                <div class='thumb_slider slow'>
                    <div class='slider_item'>FIRST PAGE</div><div class='slider_item'>SECOND PAGE</div><div class='slider_item'>THIRD PAGE</div><div class='slider_item'>FOURTH PAGE</div>
                </div>
            </div>
            <div class='controls_wrap slide_flow slow'>
                <label for="thumb1" class='banner_thumbnail'>ONE</label>
                <label for="thumb2" class='banner_thumbnail'>TWO</label>
                <label for="thumb3" class='banner_thumbnail'>THREE</label>
                <label for="thumb4" class='banner_thumbnail'>FOUR</label>
            </div>
        </div>
    </div>
</body>

</html>

用户评论