title(标题)

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

点击运行Demo

标题模块

标题文字

链接1链接2

<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

标题文字

链接1链接2

标题文字

链接1链接2

<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。

/* 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;}