◆列表目录样式 (CSS代码)
<style type="text/css">
*{margin:0;padding:0}
// 边沿、填充
body{background:#333;font-size:12px}
// body背景色、字号
.clist{text-align:left}
// clist文本对齐-左边
clist div.box{width:100%;margin-bottom:0.5px}
// clist div.box 宽度、边沿底部
.clist div.box div.boxtop{height:25px;line-height:25px;text-indent:26px;font-size:14px;font-weight:bold;background:#333 url(http://www.91849.com/images/j.gif) no-repeat 10px 6px;border-bottom:1px #777 solid;border-top:1px #000 solid;cursor:pointer;color:#d3d8c9}
// 目录展开前情形：高度；行高；图片与文本距离；字号；字体；背景色、+号图地址、+号图位置；底部边框粗细、颜色、实线；边框上边粗细、颜色、实线；光标指针；目录文字颜色。
.clist div.box div.boxtopj{height:25px;line-height:25px;text-indent:26px;font-size:14px;font-weight:bold;background:#333 url(http://www.91849.com/images/ja.gif) no-repeat 10px 6px;border-bottom:1px #777 solid;border-top:1px #000 solid;cursor:pointer;color:#ff0000;margin-bottom:1px}
// 目录展开后情形：高度；行高；图片与文本距离；字号；字体；背景色、－号图地址、－号图位置；底部边框粗细、颜色、实线；边框上边粗细、颜色、实线；光标指针；目录文字颜色；底边留白。
.clist div.box div.boxmain{width:100%}
// clist div.box div.boxmain 频道名称宽度
.clist div.box div.boxmain a{width:100%;height:25px;line-height:25px;background:#7c7c7c url
(http://www.91849.com/images/tv.gif) no-repeat 20px 3px;text-indent:45px;border-bottom:1px #000 solid;border-top:1px #9e9e9e solid;color:#1E2F00;display:block;text-decoration:none}
// 频道连接前情形：宽度；高度；行高；背景色、图标地址、图标位置；图标与文本距离；底部边框粗细、颜色、实线；边框上边粗细、颜色、实线；频道名颜色；显示块；文本无装饰。
.clist div.box div.boxmain a:hover{background:#333 url(http://www.91849.com/images/tv.gif) no-repeat 20px 3px;font-weight:bold;color:#ffffff;border-bottom:1px #000 solid;}
// 频道连接后情形：背景色、图片地址、图片位置；字体；频道名颜色；底部边框粗细、颜色、实线。
</style>
◆目录展开关闭 (JS代码)
<script language="javascript">
function $(v){ return document.getElementById(v);} // 获取文件返回值
function setmenu(id){
if ($('m' + id).style.display == 'none') {
$('m' + id).style.display = '';
$('mt' + id).className = 'boxtopj';
} else {
$('m' + id).style.display = 'none';
$('mt' + id).className = 'boxtop';
}
}
</script>
说明：以上均放在<head></head>中。
◆列表目录内容
<div class="clist">
<div class='box'><div class='boxtop' id='mt1' onclick="javascript:setmenu('1')">目录名1</div>
<div class='boxmain' id='m1' style='display:none'>
<a href="频道播放相对地址">频道名称</a>
………………………………………
</div>
<div class='box'><div class='boxtop' id='mt2' onclick="javascript:setmenu('2')">目录名2</div>
<div class='boxmain' id='m2' style='display:none'>
<a href="频道播放相对地址">频道名称</a>
………………………………………
</div>
…………………………………………………………
</div>
说明：以上放在<body></body>中。
实例：港澳台电视列表 港澳台电视
登陆您的帐号 | 免费注册帐号