文档

Mocha使用好帮手

title(标题)

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

标题模块

标题文字


1
2
3
4
<div class="mocha-title">
<h3 class="mocha-title-txt">标题文字</h3>
<div class="mocha-title-extra"><a href="#">链接1</a><a href="#">链接2</a></div>
</div>

标题模块-修改不同皮肤

mocha.css已提供3套预设皮肤

  • 皮肤1(灰底上划线) .mohca-title-skin1
  • 皮肤2(白底上下划线) .mohca-title-skin2
  • 皮肤2(灰底左划线) .mohca-title-skin3

标题文字

标题文字

标题文字


1
2
3
4
5
6
7
8
9
10
11
12
<div class="mocha-title mocha-title-skin1">
<h3 class="mocha-title-txt">标题文字</h3>
<div class="mocha-title-extra"><a href="#">链接1</a><a href="#">链接2</a></div>
</div>
<div class="mocha-title mocha-title-skin2">
<h3 class="mocha-title-txt">标题文字</h3>
<div class="mocha-title-extra"><a href="#">链接1</a><a href="#">链接2</a></div>
</div>
<div class="mocha-title mocha-title-skin3">
<h3 class="mocha-title-txt">标题文字</h3>
<div class="mocha-title-extra"><a href="#">链接1</a><a href="#">链接2</a></div>
</div>


您可以在您项目的page.css里修改.mocha-title-skin1.mocha-title-skin2.mocha-title-skin3皮肤类,或者新增.mocha-title-skin4

1
2
3
4
5
6
7
8
9
10
/* skin */
.mocha-title-skin1{background-color: #eee;border-top: 2px solid #666;}
.mocha-title-skin1 .mocha-title-txt{color: #000;}
.mocha-title-skin1 .mocha-title-extra a{color: #333;background-color: #fff;border:1px solid #eee;border-radius:0.1rem;}
.mocha-title-skin2{background-color: #fff;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
.mocha-title-skin2 .mocha-title-txt{color: #000;}
.mocha-title-skin2 .mocha-title-extra a{color: #333;background-color: #f6f6f6;border:1px solid #eee;border-radius:0.1rem;}
.mocha-title-skin3{background-color: #eee;padding:0 0.1rem 0 0;}
.mocha-title-skin3 .mocha-title-txt{color: #000;padding:0.1rem;border-left:6px solid #333;background-color: #fff;padding:0 0.1rem;}
.mocha-title-skin3 .mocha-title-extra a{color: #fff;background-color: #333;border-radius:0;}