<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/weuix.css"/>

    <script src="../js/zepto.min.js"></script>
    <script src="../js/zepto.weui.js"></script>
    <script src="../js/clipboard.min.js"></script>

</head>

<body ontouchstart>
<div class="page-hd">
    <h1 class="page-hd-title">
        字体大小/颜色/背景/标题
    </h1>
    <p class="page-hd-desc"></p>
</div>
<h1>字体大小与颜色</h1>
<h2>字体大小与颜色</h2>
<h3>字体大小与颜色</h3>
<h4>字体大小与颜色</h4>
<h5>字体大小与颜色</h5>
<h6>字体大小与颜色</h6>
<br>
字体f11-55
<span class='f11'>字体f11</span><span class='f12'>字体f12</span><span class='f13'>字体f13</span><span class='f114'>字体f14</span><span class='f15'>字体15</span><span class='f116'>字体f16</span><span class='f31'>字体f31</span><span class='f32'>字体f32</span><span class='f35'>字体f35</span><span class='f40'>字体f40</span><span class='f45'>字体f45</span><span class='f50'>字体f50</span><span class='f55'>字体f55</span>
 <br>
<span class='f-red'>红色f-red</span><span class='f-green'>绿色f-green</span>
<span class='f-blue'>蓝色f-blue</span><span class='f-black'>f-black</span>
<span class='f-white bg-blue'>f-white</span>    <span class='f-zi'>f-zi</span>        <span class='f-gray'>灰色f-gray</span> <span class='f-yellow'>黄色</span><span class='f-orange'>f-orange</span><span class='f-white bg-blue'>背景蓝色bg-blue</span>
<br>
<span class='bg-orange f-white'>bg-orange</span>
<span class='weui-btn_primary f-white'>背景绿色weui-btn_primary</span>
<span class='weui-btn_warn f-white'>weui-btn_warn</span>

<span class='weui-btn_default f-red'>weui-btn_default</span>

<div class="weui-cells__title">9种常见颜色值</div>
<div class="weui-cells weui-cells_form">
    
    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#FA5151">红色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#FA5151" style="background:#FA5151;color:white"/>
        </div>

    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#07C160">绿色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#07C160" style="background:#07C160;color:white"/>
        </div>

    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#10AEFF">蓝色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#10AEFF" style="background:#10AEFF;color:white"/>
        </div>

    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#333">黑色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#333" style="background:#333;color:white"/>
        </div>

    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#FF33CC">紫色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#FF33CC" style="background:#FF33CC;color:white"/>
        </div>

    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#CCC">灰色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#CCC" style="background:#CCC;color:white"/>
        </div>

    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#FFFF66">黄色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#FFFF66" style="background:#FFFF66;color:white"/>
        </div>

    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#FF6600">橙色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#FF6600" style="background:#FF6600;color:white"/>
        </div>

    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#FFF">白色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#FFF" style="background:#FFF;color:white"/>
        </div>

    </div>
</div>
</div>

<script>

        var clipboard = new Clipboard('.jsclip', {
            text: function(e) {
                return $(e).data('url')||$(e).data('href');
            }
        });
        clipboard.on('success', function(e) {
            $.toast('复制成功');

        });


</script>



    <br>
<br>
<div class="weui-footer weui-footer_fixed-bottom">
    <p class="weui-footer__links">
        <a href="../index.html" class="weui-footer__link">WeUI首页</a>
    </p>
    <p class="weui-footer__text">Copyright &copy; Yoby</p>
</div>
</body>
</html>