文档

Mocha使用好帮手

box(盒模块)

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

点击运行Demo

样式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;}