codecamp

九宫格+十六宫格

AUI里面定义了一套九宫格的样式,貌似现在大屏手机使用九宫格显得有些空虚,就顺便弄了个十六宫格,使用.aui-grid-nine.aui-grid-sixteen来布局。宫格类的操作因为加了线条分割的样式,所以在布局的时候最好为9或16的倍数,并且最大为9或16个块,最少为3或4。同样的也可以结合.aui-card

九宫格

<div class="aui-content">
    <ul class="aui-grid-nine">
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-my aui-text-primary"></span>
            <p>栏目</p>
        </li>
        ......
    </ul>
</div>

十六宫格

<div class="aui-content">
    <ul class="aui-grid-sixteen">
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-my aui-text-primary"></span>
            <p>栏目</p>
        </li>
        ......
    </ul>
</div>
通讯录样式排列
会话界面
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }