设为首页 | 收藏本页
登陆您的帐号 | 免费注册帐号
全部栏目 > 计算机 > 互联网络 > 在线视频
下一篇上一篇 首页图文展示(无图)

电视频道列表目录编辑

发布人:hy58
发布日期:2015-06-08 12:24:06
刷新日期:2015-06-08 12:24:51
回复或评论:0
阅览:638
◆列表目录样式 (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>中。

实例:港澳台电视列表   港澳台电视 
评论(0) 暂无回帖


打印 收藏 关闭窗口 下一篇上一篇