shangshang
/
hhqtest


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							<!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="#EF4F4F">红色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#EF4F4F" style="background:#ef4f4f;color:white"/>
        </div>

    </div>

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

    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><a href="javascript:void(0);" class="jsclip" data-url="#18B4ED">蓝色</a></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" value="#18B4ED" style="background:#18B4ED;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>