作者Hopemaydie (黑日影月)
看板Blog
标题[乐多] 可做出「树状分类」的语法
时间Sat Jul 25 02:28:23 2009
在网路上无意间发现的语法
先创一个自由栏位,格式选择「不自动换行」,然後贴入下列文字:
<style>ul.mktree li { list-style: none; }ul.mktree, ul.mktree ul , ul.mktree
li { margin-left:10px; padding:0px; }ul.mktree li .bullet {
padding-left: 15px; }ul.mktree li.liOpen .bullet { cursor: pointer;
background: url(
http://finalevillee.googlepages.com/minus.gif) center left
no-repeat; }ul.mktree li.liClosed .bullet { cursor: pointer; background:
url(
http://finalevillee.googlepages.com/plus.gif) center left no-repeat;
}ul.mktree li.liBullet .bullet { cursor: default; background:
url(
http://finalevillee.googlepages.com/bullet.gif) center left no-repeat;
}ul.mktree li.liOpen ul { display: block; }ul.mktree li.liClosed ul {
display: none; }ul.mktree li { font-size: 10pt; }ul.mktree li ul li {
font-size: 10pt; }ul.mktree li ul li ul li { font-size: 8pt; }ul.mktree li
ul li ul li ul li { font-size: 6pt; }</style><script
src="
http://finalevillee.googlepages.com/tree.js"></script>
<ul class="mktree">
<li><a href="大分类1的网址">大分类1</a>
<ul>
<li><a href="小分类1的网址">小分类1</a></li>
<li><a href="小分类2的网址">小分类2</a></li>
</ul>
</li>
<li><a href="大分类2的网址">大分类2</a>
<ul>
<li><a href="小分类3的网址">小分类3</a></li>
<li><a href="小分类4的网址">小分类4</a></li>
<li><a href="小分类5的网址">小分类5</a></li>
</ul>
</li>
</ul>
<script>convertTrees();</script>
其中
http://finalevillee.googlepages.com/minus.gif
http://finalevillee.googlepages.com/plus.gif
http://finalevillee.googlepages.com/bullet.gif
都是可更改的图档
大分类中的小分类数量可随喜好增减
目前我觉得这个语法唯一明显的缺点就是在侧边栏位里只能用一次,
如果有两个栏位同时贴了这样的语法的话会出现一点点小问题...
范例请见:
http://blog.roodo.com/leoraph/
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 118.161.202.88
1F:推 ChienBear:谢谢啦^^ 怎麽改连结颜色呢 07/28 00:21
2F:→ ChienBear:显示成功但是是透明的... 07/28 00:21
透明的呀?有实际画面可以看吗?@@
※ 编辑: Hopemaydie 来自: 118.161.200.146 (07/28 02:55)
3F:推 ChienBear:可以了 我自己改颜色噜^^ 07/28 23:55