帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → 请教css 【本版专题贴子】  
主题：请教css [加入收藏夹]   

shzwjd
用户头衔：举人

精华贴   ：0
发贴数   ：218
经验值   ：916
注册时间：2003-12-29
信息 搜索 好友 发送悄悄话 【精益求精－帝国网站管理系统7.5正式版开源发布】   [第 1 楼]
请教css
我做个"滑门"效果,可是有链接时标题下有横线,颜色是蓝颜色的,阅读后是红色.
如何修改成:链接时标题下面无横线、颜色是黑色、鼠标放在上面是红色、阅读后仍为黑色，谢谢..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>事务公开</title>
<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}

/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:2px;clear:both;border:0px solid #000000;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:355px;/*这里调整整个滑动门的宽度*/}

/* TAB 切换效果 */
.tb_{background-image: url('upload/200704251357112077.gif]'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 80px;cursor:pointer;}

/* 用于控制显示与隐藏的css类 */
.normaltab   { background-image:url('/upload/200704251356222664.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url('/upload/200704251355406346.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
//本功能非常OK,兼容IE7,FF,IE6;
for(var i=1;i<=4;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>

<body>

<div class="w936">
  <div id="tb_" class="tb_">
      <ul>
        <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">
        会议纪要</li>
        <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
        通知公告</li>
        <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
        技术标准</li>
        <li id="tb_4" class="normaltab" onmouseover="HoverLi(4);">
        制度汇编</li>
        
      </ul>
  </div>
  <div class="ctt">
    <div class="dis" id="tbc_01"><a href="#">[ecmsinfo]39,7,42,0,0,3,0[/ecmsinfo]</a></div>
    <div class="undis" id="tbc_02">[ecmsinfo]38,7,42,0,0,3,0[/ecmsinfo]</div>
    <div class="undis" id="tbc_03">[ecmsinfo]40,7,42,0,0,3,0[/ecmsinfo]</div>
    <div class="undis" id="tbc_04">[ecmsinfo]41,7,42,0,0,3,0[/ecmsinfo]</div>
   
  </div>
</div>

</body>
</html>

[该贴被修改 1 次，最后修改时间 2007-10-14 01:03:58 ]


2007-10-14 01:00:20 已设置保密 顶部 回复 引用 报告 编辑 删除

gojorare
用户头衔：书生

精华贴   ：0
发贴数   ：21
经验值   ：106
注册时间：2005-12-29
信息 搜索 好友 发送悄悄话 【免费开源－EBMA系统：更安全的MYSQL管理和备份系统】   [第 2 楼]
没有学过css?看看css的文档吧,MS是最基本的吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>事务公开</title>
<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
a{color:#000;text-decoration: none;}
a:visited{color:#333;}
a:hover{color:#f00;text-decoration:underline;}
a:active{color:#000;text-decoration:underline;}

/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:2px;clear:both;border:0px solid #000000;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:355px;/*这里调整整个滑动门的宽度*/}

/* TAB 切换效果 */
.tb_{background-image: url('upload/200704251357112077.gif]'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 80px;cursor:pointer;}

/* 用于控制显示与隐藏的css类 */
.normaltab   { background-image:url('/upload/200704251356222664.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url('/upload/200704251355406346.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
//本功能非常OK,兼容IE7,FF,IE6;
for(var i=1;i<=4;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>

<body>

<div class="w936">
  <div id="tb_" class="tb_">
      <ul>
        <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">
        会议纪要</li>
        <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
        通知公告</li>
        <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
        技术标准</li>
        <li id="tb_4" class="normaltab" onmouseover="HoverLi(4);">
        制度汇编</li>
        
      </ul>
  </div>
  <div class="ctt">
    <div class="dis" id="tbc_01"><a href="#">[ecmsinfo]39,7,42,0,0,3,0[/ecmsinfo]</a></div>
    <div class="undis" id="tbc_02">[ecmsinfo]38,7,42,0,0,3,0[/ecmsinfo]</div>
    <div class="undis" id="tbc_03">[ecmsinfo]40,7,42,0,0,3,0[/ecmsinfo]</div>
    <div class="undis" id="tbc_04">[ecmsinfo]41,7,42,0,0,3,0[/ecmsinfo]</div>
   
  </div>
</div>

</body>
</html>

[该贴被修改 1 次，最后修改时间 2007-10-14 11:44:32 ]


2007-10-14 11:43:52 已设置保密 顶部 回复 引用 报告 编辑 删除

sunrise
用户头衔：书生

精华贴   ：0
发贴数   ：23
经验值   ：123
注册时间：2006-10-25
信息 搜索 好友 发送悄悄话 【精益求精－帝国网站管理系统7.5正式版开源发布】   [第 3 楼]

楼上正解！



2007-10-14 22:22:55 已设置保密 顶部 回复 引用 报告 编辑 删除

快速回复
内容

表情
使用EBB代码 使用smile代码 显示签名 自动分析url 自动分析img
     【进入高级模式】   (按 Ctrl+Enter 直接提交)
    顶部  加入收藏夹
关于帝国 | 广告服务 | 联系我们 | 法律声明 | 隐私条款 | 许可协议
Powered by： EBB Version 2.2.1