文档

Mocha使用好帮手

box(盒模块)

作者:sonichuang
版本:v.1
依赖:mocha.css

样式1 .mocha-box-scheme1

模块标题

{模块内容显示区}


1
2
3
4
5
6
7
8
9
10
11
<div class="mocha-box mocha-box-scheme1 mocha-box-skin1">
<div class="mocha-box-hd">
<h3 class="mocha-box-hd-title">模块标题</h3>
</div>
<div class="mocha-box-bd">
<p>{模块内容显示区}</p>
</div>
<div class="mocha-box-fd">
<a href="#" class="mocha-box-fd-more">查看更多&gt;</a>
</div>
</div>

修改模块皮肤CSS

模块的默认皮肤类.mocha-box-skin1,您可以在您项目的page.css里修改.mocha-box-skin1皮肤类,或者新增.mocha-box-skin2

1
2
3
4
5
/* skin */
.mocha-box-skin1{font-size:0.16rem;color: #666;}
.mocha-box-skin1 .mocha-box-hd{background-color: #ddd;}
.mocha-box-skin1 .mocha-box-fd{border-top-color:#ddd;}
.mocha-box-skin1 .mocha-box-fd-more{color:#666;}