标签css下的文章

admin 发布于 11月22, 2016

Roller,✨✨

看到个好玩的~哈哈,小志前辈写的,原文地址

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <title>Roller,✨✨</title>
    <style type="text/css" media="screen">
    div, input {
      margin: 0;
      padding: 0;
    }
    .demo {
        width: 100px;
        height: 20px;
        overflow: hidden;
    }

    .star_ctrl {
        float: left;
    }

    input {
        float: right;
        width: 20px;
        height: 20px;
        -webkit-appearance: none;
        border: 0 none;
        background: url(http://ww3.sinaimg.cn/large/006tNbRwgw1fa10606xkoj300k01fdfl.jpg) no-repeat 0 -32px;
        outline: 0 none;
        -webkit-transition: all 100ms linear;
    }

    input:checked,
    input:checked ~ input {
        background-position: 0 0;
    }

    .demo_2 input {
      float: left;
    }
    </style>
</head>

<body>
    <div class="demo demo_1">
        <div class="star_ctrl">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
        </div>
    </div>

    <div class="demo demo_2">
        <div class="star_ctrl">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
        </div>
    </div>
</body>

</html>

左转转,右转转 ^-^

阅读全文 »

admin 发布于 11月03, 2016

思考 CSS 架构

你有没有在一个逐渐膨胀的 CSS 项目中感到混乱呢?保持样式风格统一和 HTML 的影响是比较困难的:尽管修改一个较小的问题,都可能创建更多丑陋的 hack,也可能 CSS 的小改变会影响 JavaScript 的功能。但是这些问题能在我们的项目开始的时候静心规划,就能很大程度上避免这些问题。让我们开始说 CSS 架构吧。

阅读全文 »