文本 type

文本大小

Example Copy

默认字体大小32px, 行高为1.5

标题：h1, 36px

栏目：h2, 34px

内文：导航，正文段落h3, 32px

内文：人名歌名标题等h4, 32px

副内文：h5, 同ui-txt-sub, 28px

辅助文字：h6, 同ui-txt-tips, 24px


<div class="ui-whitespace">
    <p>默认字体大小32px, 行高为1.5</p>
    <h1>标题：h1, 36px</h1>
    <h2>栏目：h2, 34px</h2>
    <h3>内文：导航，正文段落h3, 32px</h3>
    <h4>内文：人名歌名标题等h4, 32px</h4>
    <h5>副内文：h5, 同ui-txt-sub, 28px</h5>
    <h6>辅助文字：h6, 同ui-txt-tips, 24px</h6>
</div>

文本颜色

Example Copy

主要内容色

主要内容反色

辅助次要内容色

时间，输入框，不可点击状态文本色

警示，会员红名，搜索热词，同ui-txt-red

关键词高亮，同em

链接颜色

feeds链接


<div class="ui-whitespace">
    <p class="ui-txt-default">主要内容色</p>
    <p class="ui-txt-white" style="background:#000">主要内容反色</p>
    <p class="ui-txt-info">辅助次要内容色</p>
    <p class="ui-txt-muted">时间，输入框，不可点击状态文本色</p>
    <p class="ui-txt-warning">警示，会员红名，搜索热词，同ui-txt-red</p>
    <p class="ui-txt-highlight">关键词高亮，同em</p>
    <p><a>链接颜色</a></p>
    <p class="ui-txt-feeds">feeds链接</p>
</div>

文本两端对齐

Example Copy

一行文本

普通的多行文本内容：在首个《进击的巨人》预热视频中只是描述了一个巨人恰好拿起一人准备放进嘴巴里面，而另个场景则是超大型巨人附着浓重的烟雾将巨手拍下来。将于今年8月1日上映。


<div class="ui-whitespace">
    <p class="ui-txt-justify-one">一行文本</p>
    <p class="ui-txt-justify">普通的多行文本内容：在首个《进击的巨人》预热视频中只是描述了一个巨人恰好拿起一人准备放进嘴巴里面，而另个场景则是超大型巨人附着浓重的烟雾将巨手拍下来。将于今年8月1日上映。</p>
</div>

布局 layout

平铺

Example Copy

菜单
1
菜单
2
菜单
3


<ul class="ui-tiled">
    <li><div>菜单</div><i>1</i></li>
    <li><div>菜单</div><i>2</i></li>
    <li><div>菜单</div><i>3</i></li>
</ul>

flex布局排列，默认横排

Example Copy

左

中

右

上

中

下

 
<div class="ui-flex ui-flex-pack-start">
    <div>左</div><div>左</div>
</div>
<div class="ui-flex ui-flex-pack-center">
    <div>中</div><div>中</div>
</div>
<div class="ui-flex ui-flex-pack-end">
    <div>右</div><div>右</div>
</div>
<div class="ui-flex ui-flex-align-start">
    <div>上</div><div>上</div>
</div>
<div class="ui-flex  ui-flex-align-center">
    <div>中</div><div>中</div>
</div>
<div class="ui-flex ui-flex-align-end">
    <div>下</div><div>下</div>
</div>

flex布局排列纵向,以此类推

Example Copy

左中

 
<div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start">
    <div>左中</div>
    <div>左中</div>
</div>

flex网格布局

Example Copy

左
左
中
中
右
右
竖排右下
竖排右下

 
<ul class="ui-row-flex">
    <li class="ui-col ui-flex ui-flex-pack-start"><div>左</div><div>左</div></li>
    <li class="ui-col ui-flex ui-flex-pack-center"><div>中</div><div>中</div></li>
    <li class="ui-col ui-flex ui-flex-pack-end"><div>右</div><div>右</div></li>
    <li class="ui-col ui-flex ui-flex-ver  ui-flex-align-end ui-flex-pack-end"><div>竖排右下</div><div>竖排右下</div></li>
</ul>

布局1

Example Copy

layout

内容


<header class="ui-header ui-header-stable ui-border-b">
    <i class="ui-icon-return" onclick="history.back()"></i><h1>layout</h1><button class="ui-btn">回首页</button>
</header>
<footer class="ui-footer ui-footer-stable ui-border-t">
    <ul class="ui-tiled">
        <li><div>菜单</div><i>1</i></li>
        <li><div>菜单</div><i>2</i></li>
        <li><div>菜单</div><i>3</i></li>
    </ul>
</footer>
<section class="ui-container ui-center">
    内容
</section>

布局2

Example Copy

标题

内容


<header class="ui-header ui-header-positive ui-border-b">
    <h1>标题</h1>
</header>
<div class="ui-footer ui-footer-stable ui-btn-group ui-border-t">
    <button class="ui-btn-lg">
        拒绝
    </button>
    <button class="ui-btn-lg">
        拒绝
    </button>
    <button class="ui-btn-lg ui-btn-primary">
        同意
    </button>
</div>
<section class="ui-container ui-center">
    内容
</section>

网格 grid

float网格适合多行

Example Copy

50
50
25
75
33
67
20
80
10
90


<ul class="ui-row">
    <li class="ui-col ui-col-50">50</li>
    <li class="ui-col ui-col-50">50</li>
    <li class="ui-col ui-col-25">25</li>
    <li class="ui-col ui-col-75">75</li>
    <li class="ui-col ui-col-33">33</li>
    <li class="ui-col ui-col-67">67</li>
    <li class="ui-col ui-col-20">20</li>
    <li class="ui-col ui-col-80">80</li>
    <li class="ui-col ui-col-10">10</li>
    <li class="ui-col ui-col-90">90</li>
</ul>

flex网格

Example Copy

平均分

2/3

1/3

3/4

1/4

4/5

1/5

3/5

2/5


<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col">平均分</div>
    <div class="ui-col ui-col">平均分</div>
    <div class="ui-col ui-col">平均分</div>
    <div class="ui-col ui-col">平均分</div>
</div>
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col-2">2/3</div>
    <div class="ui-col">1/3</div>
</div>
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col-3">3/4</div>
    <div class="ui-col">1/4</div>
</div>
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col-4">4/5</div>
    <div class="ui-col">1/5</div>
</div>
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col-3">3/5</div>
    <div class="ui-col ui-col-2">2/5</div>
</div>

竖排flex

Example Copy

1/2

3/4

1/4


<div class="ui-row-flex ui-whitespace ui-row-flex-ver">
    <div class="ui-col">1/2</div>
    <div class="ui-col">1/2</div>
</div>
<br>
<div class="ui-row-flex ui-whitespace ui-row-flex-ver">
    <div class="ui-col ui-col-3">3/4</div>
    <div class="ui-col">1/4</div>
</div>

三列

Example Copy

高尔夫 2.3M
高尔夫 2.3M
高尔夫 2.3M
高尔夫 2.3M


<ul class="ui-grid-trisect ui-border-b">
    <li>
        <div class="ui-grid-trisect-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
        </div>
        <h4>高尔夫 <span>2.3M</span></h4>
        <button class="ui-btn-s ui-btn-progress">免费</button>
    </li>
    <li>
        <div class="ui-grid-trisect-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
        </div>
        <h4>高尔夫 <span>2.3M</span></h4>
        <button class="ui-btn-s ui-btn-progress">免费</button>
    </li>
    <li>
        <div class="ui-grid-trisect-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
        </div>
        <h4>高尔夫 <span>2.3M</span></h4>
        <button class="ui-btn-s ui-btn-progress">免费</button>
    </li>
    <li>
        <div class="ui-grid-trisect-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
        </div>
        <h4>高尔夫 <span>2.3M</span></h4>
        <button class="ui-btn-s ui-btn-progress">免费</button>
    </li>
</ul>

两列

Example Copy


<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

占位 placehold

占位解决方案失去响应时，相对居中，默认高宽比为31.25%，重写需覆盖padding-top属性

Example Copy

失去响应时，相对居中，默认高宽比为31.25%，重写需覆盖padding-top属性

正在加载中...


<p class="demo-desc">失去响应时，相对居中，默认高宽比为31.25%，重写需覆盖padding-top属性</p>
<section class="ui-placehold-wrap">
    <div class="ui-placehold">正在加载中...</div>
</section>

图片占位

Example Copy


<section class="ui-placehold-img">
    <span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span>
</section>

1px解决方案 border

1px解决方案

Example Copy

上边框
边框
下边框
上下边框
左边框
右边框
圆角边框


<ul class="ui-list-text border-list">
    <li class="ui-border-t">上边框</li>
    <li class="ui-border">边框</li>
    <li class="ui-border-b">下边框</li>
    <li class="ui-border-tb">上下边框</li>
    <li class="ui-border-l">左边框</li>
    <li class="ui-border-r">右边框</li>
    <li class="ui-border-radius">
        圆角边框
    </li>
</ul>

箭头链接 arrowlink

箭头链接

Example Copy

箭头链接


<div class="ui-arrowlink">箭头链接</div>

文字截断 nowrap

一行文字截断

Example Copy

一行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略


<div class="ui-nowrap ui-whitespace">
    一行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
</div>

一行文字截断弹性布局

Example Copy

一行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略


<div class="ui-nowrap-flex ui-whitespace">
    一行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
</div>

多行文字截断，默认两行

Example Copy

多行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略


<div class="ui-nowrap-multi ui-whitespace">
    多行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
</div>

两端留白 whitespace

两端留白,640以下10px，以上15px

Example Copy

50
50


<ul class="ui-row ui-whitespace">
    <li class="ui-col ui-col-50">50</li>
    <li class="ui-col ui-col-50">50</li>
</ul>

两端对齐 justify

text-align:justify两端对齐一行多行

Example Copy

一行

xxx
xxx
xxx
xxx

多行

xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx

  
<div>
    <p class="demo-desc">一行</p>
    <ul class="ui-justify ui-whitespace">
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
    </ul>
    <p class="demo-desc">多行</p>
    <ul class="ui-justify ui-whitespace">
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
        <li><div class="test-img"></div><p>xxx</p></li>
    </ul>
</div>

弹性布局

Example Copy


<ul class="ui-justify-flex ui-whitespace">
    <li class="test-img"></li>
    <li class="test-img"></li>
    <li class="test-img"></li>
    <li class="test-img"></li>
</ul>

所有图标 icon

ui-icon 图标

Example Copy



.ui-icon-add


.ui-icon-more


.ui-icon-arrow


.ui-icon-return


.ui-icon-checked


.ui-icon-checked-s


.ui-icon-info-block


.ui-icon-success-block


.ui-icon-warn-block


.ui-icon-info


.ui-icon-success


.ui-icon-warn


.ui-icon-next


.ui-icon-prev


.ui-icon-tag


.ui-icon-tag-pop


.ui-icon-tag-s


.ui-icon-warn-lg


.ui-icon-close


.ui-icon-close-progress


.ui-icon-close-page


.ui-icon-emo


.ui-icon-delete


.ui-icon-search


.ui-icon-order


.ui-icon-news


.ui-icon-personal


.ui-icon-dressup


.ui-icon-cart


.ui-icon-history


.ui-icon-wallet


.ui-icon-refresh


.ui-icon-thumb


.ui-icon-file


.ui-icon-hall


.ui-icon-voice


.ui-icon-unfold


.ui-icon-gototop


.ui-icon-share


.ui-icon-home


.ui-icon-pin


.ui-icon-star


.ui-icon-bugle


.ui-icon-trend


.ui-icon-unchecked


.ui-icon-unchecked-s


.ui-icon-play-active


.ui-icon-stop-active


.ui-icon-play


.ui-icon-stop


.ui-icon-set


.ui-icon-add-group


.ui-icon-add-people


.ui-icon-pc


.ui-icon-scan


.ui-icon-tag-svip


.ui-icon-tag-vip


.ui-icon-male


.ui-icon-female


.ui-icon-collect


.ui-icon-commented


.ui-icon-like


.ui-icon-liked


.ui-icon-comment


.ui-icon-collected


    <ul class="icon-lists clear">
    
        <li>
            <i class="ui-icon-add"></i>
            <div class="code">&#xf615;</div>
            <div class="fontclass">.ui-icon-add</div>
        </li>
    
        <li>
            <i class="ui-icon-more"></i>
            <div class="code">&#xf616;</div>
            <div class="fontclass">.ui-icon-more</div>
        </li>
    
        <li>
            <i class="ui-icon-arrow"></i>
            <div class="code">&#xf600;</div>
            <div class="fontclass">.ui-icon-arrow</div>
        </li>
    
        <li>
            <i class="ui-icon-return"></i>
            <div class="code">&#xf614;</div>
            <div class="fontclass">.ui-icon-return</div>
        </li>
    
        <li>
            <i class="ui-icon-checked"></i>
            <div class="code">&#xf601;</div>
            <div class="fontclass">.ui-icon-checked</div>
        </li>
    
        <li>
            <i class="ui-icon-checked-s"></i>
            <div class="code">&#xf602;</div>
            <div class="fontclass">.ui-icon-checked-s</div>
        </li>
    
        <li>
            <i class="ui-icon-info-block"></i>
            <div class="code">&#xf603;</div>
            <div class="fontclass">.ui-icon-info-block</div>
        </li>
    
        <li>
            <i class="ui-icon-success-block"></i>
            <div class="code">&#xf604;</div>
            <div class="fontclass">.ui-icon-success-block</div>
        </li>
    
        <li>
            <i class="ui-icon-warn-block"></i>
            <div class="code">&#xf605;</div>
            <div class="fontclass">.ui-icon-warn-block</div>
        </li>
    
        <li>
            <i class="ui-icon-info"></i>
            <div class="code">&#xf606;</div>
            <div class="fontclass">.ui-icon-info</div>
        </li>
    
        <li>
            <i class="ui-icon-success"></i>
            <div class="code">&#xf607;</div>
            <div class="fontclass">.ui-icon-success</div>
        </li>
    
        <li>
            <i class="ui-icon-warn"></i>
            <div class="code">&#xf608;</div>
            <div class="fontclass">.ui-icon-warn</div>
        </li>
    
        <li>
            <i class="ui-icon-next"></i>
            <div class="code">&#xf617;</div>
            <div class="fontclass">.ui-icon-next</div>
        </li>
    
        <li>
            <i class="ui-icon-prev"></i>
            <div class="code">&#xf618;</div>
            <div class="fontclass">.ui-icon-prev</div>
        </li>
    
        <li>
            <i class="ui-icon-tag"></i>
            <div class="code">&#xf60d;</div>
            <div class="fontclass">.ui-icon-tag</div>
        </li>
    
        <li>
            <i class="ui-icon-tag-pop"></i>
            <div class="code">&#xf60f;</div>
            <div class="fontclass">.ui-icon-tag-pop</div>
        </li>
    
        <li>
            <i class="ui-icon-tag-s"></i>
            <div class="code">&#xf60e;</div>
            <div class="fontclass">.ui-icon-tag-s</div>
        </li>
    
        <li>
            <i class="ui-icon-warn-lg"></i>
            <div class="code">&#xf609;</div>
            <div class="fontclass">.ui-icon-warn-lg</div>
        </li>
    
        <li>
            <i class="ui-icon-close"></i>
            <div class="code">&#xf60a;</div>
            <div class="fontclass">.ui-icon-close</div>
        </li>
    
        <li>
            <i class="ui-icon-close-progress"></i>
            <div class="code">&#xf619;</div>
            <div class="fontclass">.ui-icon-close-progress</div>
        </li>
    
        <li>
            <i class="ui-icon-close-page"></i>
            <div class="code">&#xf60b;</div>
            <div class="fontclass">.ui-icon-close-page</div>
        </li>
    
        <li>
            <i class="ui-icon-emo"></i>
            <div class="code">&#xf61a;</div>
            <div class="fontclass">.ui-icon-emo</div>
        </li>
    
        <li>
            <i class="ui-icon-delete"></i>
            <div class="code">&#xf61b;</div>
            <div class="fontclass">.ui-icon-delete</div>
        </li>
    
        <li>
            <i class="ui-icon-search"></i>
            <div class="code">&#xf60c;</div>
            <div class="fontclass">.ui-icon-search</div>
        </li>
    
        <li>
            <i class="ui-icon-order"></i>
            <div class="code">&#xf61c;</div>
            <div class="fontclass">.ui-icon-order</div>
        </li>
    
        <li>
            <i class="ui-icon-news"></i>
            <div class="code">&#xf61d;</div>
            <div class="fontclass">.ui-icon-news</div>
        </li>
    
        <li>
            <i class="ui-icon-personal"></i>
            <div class="code">&#xf61e;</div>
            <div class="fontclass">.ui-icon-personal</div>
        </li>
    
        <li>
            <i class="ui-icon-dressup"></i>
            <div class="code">&#xf61f;</div>
            <div class="fontclass">.ui-icon-dressup</div>
        </li>
    
        <li>
            <i class="ui-icon-cart"></i>
            <div class="code">&#xf620;</div>
            <div class="fontclass">.ui-icon-cart</div>
        </li>
    
        <li>
            <i class="ui-icon-history"></i>
            <div class="code">&#xf621;</div>
            <div class="fontclass">.ui-icon-history</div>
        </li>
    
        <li>
            <i class="ui-icon-wallet"></i>
            <div class="code">&#xf622;</div>
            <div class="fontclass">.ui-icon-wallet</div>
        </li>
    
        <li>
            <i class="ui-icon-refresh"></i>
            <div class="code">&#xf623;</div>
            <div class="fontclass">.ui-icon-refresh</div>
        </li>
    
        <li>
            <i class="ui-icon-thumb"></i>
            <div class="code">&#xf624;</div>
            <div class="fontclass">.ui-icon-thumb</div>
        </li>
    
        <li>
            <i class="ui-icon-file"></i>
            <div class="code">&#xf625;</div>
            <div class="fontclass">.ui-icon-file</div>
        </li>
    
        <li>
            <i class="ui-icon-hall"></i>
            <div class="code">&#xf626;</div>
            <div class="fontclass">.ui-icon-hall</div>
        </li>
    
        <li>
            <i class="ui-icon-voice"></i>
            <div class="code">&#xf627;</div>
            <div class="fontclass">.ui-icon-voice</div>
        </li>
    
        <li>
            <i class="ui-icon-unfold"></i>
            <div class="code">&#xf628;</div>
            <div class="fontclass">.ui-icon-unfold</div>
        </li>
    
        <li>
            <i class="ui-icon-gototop"></i>
            <div class="code">&#xf629;</div>
            <div class="fontclass">.ui-icon-gototop</div>
        </li>
    
        <li>
            <i class="ui-icon-share"></i>
            <div class="code">&#xf62a;</div>
            <div class="fontclass">.ui-icon-share</div>
        </li>
    
        <li>
            <i class="ui-icon-home"></i>
            <div class="code">&#xf62b;</div>
            <div class="fontclass">.ui-icon-home</div>
        </li>
    
        <li>
            <i class="ui-icon-pin"></i>
            <div class="code">&#xf62c;</div>
            <div class="fontclass">.ui-icon-pin</div>
        </li>
    
        <li>
            <i class="ui-icon-star"></i>
            <div class="code">&#xf62d;</div>
            <div class="fontclass">.ui-icon-star</div>
        </li>
    
        <li>
            <i class="ui-icon-bugle"></i>
            <div class="code">&#xf62e;</div>
            <div class="fontclass">.ui-icon-bugle</div>
        </li>
    
        <li>
            <i class="ui-icon-trend"></i>
            <div class="code">&#xf62f;</div>
            <div class="fontclass">.ui-icon-trend</div>
        </li>
    
        <li>
            <i class="ui-icon-unchecked"></i>
            <div class="code">&#xf610;</div>
            <div class="fontclass">.ui-icon-unchecked</div>
        </li>
    
        <li>
            <i class="ui-icon-unchecked-s"></i>
            <div class="code">&#xf611;</div>
            <div class="fontclass">.ui-icon-unchecked-s</div>
        </li>
    
        <li>
            <i class="ui-icon-play-active"></i>
            <div class="code">&#xf630;</div>
            <div class="fontclass">.ui-icon-play-active</div>
        </li>
    
        <li>
            <i class="ui-icon-stop-active"></i>
            <div class="code">&#xf631;</div>
            <div class="fontclass">.ui-icon-stop-active</div>
        </li>
    
        <li>
            <i class="ui-icon-play"></i>
            <div class="code">&#xf632;</div>
            <div class="fontclass">.ui-icon-play</div>
        </li>
    
        <li>
            <i class="ui-icon-stop"></i>
            <div class="code">&#xf633;</div>
            <div class="fontclass">.ui-icon-stop</div>
        </li>
    
        <li>
            <i class="ui-icon-set"></i>
            <div class="code">&#xf634;</div>
            <div class="fontclass">.ui-icon-set</div>
        </li>
    
        <li>
            <i class="ui-icon-add-group"></i>
            <div class="code">&#xf635;</div>
            <div class="fontclass">.ui-icon-add-group</div>
        </li>
    
        <li>
            <i class="ui-icon-add-people"></i>
            <div class="code">&#xf636;</div>
            <div class="fontclass">.ui-icon-add-people</div>
        </li>
    
        <li>
            <i class="ui-icon-pc"></i>
            <div class="code">&#xf637;</div>
            <div class="fontclass">.ui-icon-pc</div>
        </li>
    
        <li>
            <i class="ui-icon-scan"></i>
            <div class="code">&#xf638;</div>
            <div class="fontclass">.ui-icon-scan</div>
        </li>
    
        <li>
            <i class="ui-icon-tag-svip"></i>
            <div class="code">&#xf613;</div>
            <div class="fontclass">.ui-icon-tag-svip</div>
        </li>
    
        <li>
            <i class="ui-icon-tag-vip"></i>
            <div class="code">&#xf612;</div>
            <div class="fontclass">.ui-icon-tag-vip</div>
        </li>
    
        <li>
            <i class="ui-icon-male"></i>
            <div class="code">&#xf639;</div>
            <div class="fontclass">.ui-icon-male</div>
        </li>
    
        <li>
            <i class="ui-icon-female"></i>
            <div class="code">&#xf63a;</div>
            <div class="fontclass">.ui-icon-female</div>
        </li>
    
        <li>
            <i class="ui-icon-collect"></i>
            <div class="code">&#xf63b;</div>
            <div class="fontclass">.ui-icon-collect</div>
        </li>
    
        <li>
            <i class="ui-icon-commented"></i>
            <div class="code">&#xf63c;</div>
            <div class="fontclass">.ui-icon-commented</div>
        </li>
    
        <li>
            <i class="ui-icon-like"></i>
            <div class="code">&#xf63d;</div>
            <div class="fontclass">.ui-icon-like</div>
        </li>
    
        <li>
            <i class="ui-icon-liked"></i>
            <div class="code">&#xf63e;</div>
            <div class="fontclass">.ui-icon-liked</div>
        </li>
    
        <li>
            <i class="ui-icon-comment"></i>
            <div class="code">&#xf63f;</div>
            <div class="fontclass">.ui-icon-comment</div>
        </li>
    
        <li>
            <i class="ui-icon-collected"></i>
            <div class="code">&#xf640;</div>
            <div class="fontclass">.ui-icon-collected</div>
        </li>
    
</ul>

基础样式

文本大小

标题：h1, 36px

栏目：h2, 34px

内文：导航，正文段落h3, 32px

内文：人名歌名标题等h4, 32px

副内文：h5, 同ui-txt-sub, 28px

辅助文字：h6, 同ui-txt-tips, 24px

文本颜色

文本两端对齐

平铺

flex布局排列，默认横排

flex布局排列纵向,以此类推

flex网格布局

布局1

布局2

float网格适合多行

flex网格

竖排flex

三列

高尔夫 2.3M

高尔夫 2.3M

高尔夫 2.3M

高尔夫 2.3M

两列

占位解决方案失去响应时，相对居中，默认高宽比为31.25%，重写需覆盖padding-top属性

图片占位

1px解决方案

箭头链接

一行文字截断

一行文字截断弹性布局

多行文字截断，默认两行

两端留白,640以下10px，以上15px

text-align:justify两端对齐一行多行

弹性布局

ui-icon 图标

w88优德是什么