文档

Mocha使用好帮手

test-list(文本列表)

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

点击运行Demo

样式1-带图标 .mocha-txt-list-scheme1


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="mocha-txt-list mocha-txt-list-scheme1 mocha-txt-list-skin1">
	<ul class="mocha-txt-list-ul">
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon style1">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
	</ul>
</div>

样式2 不带图标 .mocha-txt-list-scheme2


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="mocha-txt-list mocha-txt-list-scheme2 mocha-txt-list-skin1">
	<ul class="mocha-txt-list-ul">
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon style1">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
	</ul>
</div>

样式3 显示一行 .mocha-txt-list-scheme3


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="mocha-txt-list mocha-txt-list-scheme3 mocha-txt-list-skin1">
	<ul class="mocha-txt-list-ul">
		<li class="mocha-tlu-item">
			<span class="mocha-tlu-item-sup"><a href="#">[玩家社区]</a></span>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<span class="mocha-tlu-item-sup"><a href="#">[玩家社区]</a></span>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<span class="mocha-tlu-item-sup"><a href="#">[玩家社区]</a></span>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><time>11/03</time></p>
		</li>
	</ul>
</div>

修改模块皮肤CSS

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

1
2
3
4
5
6
7
/* skin */
.mocha-txt-list-skin1{font-size:0.14rem;}
.mocha-txt-list-skin1 a:link,.mocha-txt-list-skin1 a:visited{color: #666;}
.mocha-txt-list-skin1 .mocha-tlu-item{border-bottom: 1px solid #ddd;}
.mocha-txt-list-skin1 .mocha-tlu-item-meta{color: #999;}
.mocha-txt-list-skin1 .mocha-tlu-item-icon{color: #fff;background-color: #00c2f5;}
.mocha-txt-list-skin1 .mocha-tlu-item-icon.style1{background-color: #f97d01;}