代码： html 页面小效果（集合，待补充）

标签切换（下部内容区跟着切换）：　　2016-6-2

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.res-head .btn').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        var idx = $(this).index();
        $('.res-body .res-con').eq(idx).addClass('active').siblings().removeClass('active');
    });
});
</script>
<style type="text/css">
.clearfix:after{display:block;content:'';height:0;overflow:hidden;clear:both;}
.res-head{margin:0 auto;width:244px;}
.res-head .btn{display:block;float:left;width:120px;height:34px;line-height:34px;font-size:14px;text-align:center;color:#333;border:1px solid #ccc;cursor:pointer;}
.res-head .btn.active{background:#ff7200;color:#fff;border:1px solid #ff7200;}
.res-head .btn-base{border-right:none!important;}
.res-head .btn-fine{border-left:none!important;}
.res-body .res-con{display:none;}
.res-body .res-con.active{display:block;}
</style>
<div class="res-head clearfix">
    <a class="btn btn-base active">简装</a>
    <a class="btn btn-fine">精装</a>
</div>
<div class="res-body clearfix">
    <div class="res-con active">
        内容区域111111
    </div>
    <div class="res-con">
        内容区域22222
    </div>
</div>

http://www.cnblogs.com/aliyue/archive/2016/06/06/5563334.html　　刮刮卡效果　　2016-6-6

趣味标签色卡：　　2016-6-13

用js生成不重复随机数组，随机控制标签的颜色

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    if ($('.colors-box').length>0){
        var tmpcolor_len = $('.colors-box .colors').length;
        var tmpcolor_ary = new Array(tmpcolor_len);
        for (var i=0;i<tmpcolor_len;i++){
            tmpcolor_ary[i]=i;
        }
        tmpcolor_ary.sort(function(){    //不重复的随机数组
            return 0.5-Math.random();
        });
        //alert(tmpcolor_ary);
        for (var i=0;i<tmpcolor_len;i++){
            $('.colors-box').find('.colors').eq(i).addClass('colors'+tmpcolor_ary[i]);
        }
    }
});
</script>
<style type="text/css">
.colors-box .colors{display:inline-block;padding:0 10px;color:#fff;height:32px;line-height:32px;margin-right:20px;margin-bottom:20px;font-family:'微软雅黑';font-size:14px;}
.colors-box .colors0{background:#5ca1f5;}
.colors-box .colors1{background:#32c29b;}
.colors-box .colors2{background:#ea5df3;}
.colors-box .colors3{background:#f76584;}
.colors-box .colors4{background:#f27f47;}
.colors-box .colors5{background:#e7bc10;}
.colors-box .colors6{background:#52bd2d;}
</style>
<div class="colors-box">
    <span class="colors">已阅！握爪！</span>
    <span class="colors">32个赞！</span>
    <span class="colors">膜拜</span>
    <span class="colors">阅后即醉</span>
    <span class="colors">任性！</span>
    <span class="colors">干货！</span>
    <span class="colors">高大上</span>
</div>

<ul><li>列表（左侧糖葫芦串：绿色小圆点）　　2016-6-21

<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
.chuan-list{width:150px;padding-left:10px;}
.chuan-list .chuan-item{position:relative;font-size:14px;line-height:24px;padding:0 0 20px 20px;border-left:1px solid #1bbc9b;font-family:'微软雅黑';}
.dot{position:absolute;width:20px;height:20px;left:-10px;top:2px;background:#1bbc9b;color:#fff;font-family:'Arial';text-align:center;line-height:20px;font-size:12px;border-radius:50%;}
</style>
</head>
<body>
<ul class="chuan-list">
    <li class="chuan-item"><span class="dot">1</span>啊啊啊啊</li>
    <li class="chuan-item"><span class="dot">2</span>啊啊啊啊</li>
    <li class="chuan-item"><span class="dot">3</span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
    <li class="chuan-item"><span class="dot">4</span>啊啊啊啊</li>
    <li class="chuan-item"><span class="dot">5</span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
</ul>

待补充...

代码： html 页面小效果 （集合，待补充）

代码： html 页面小效果（集合，待补充）