为什么我做的不出效果？？？？-慕课网

为什么我做的不出效果？？？？

来源：1-2 tab页面布局-标题布局

慕运维5178013

2015-08-04 10:19

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>实践题 -tab 选项卡</title>
    <script src="js/script.js" type="text/javascript"></script>
    <link type="text/css" href="css/style.css" rel="stylesheet" ></link>
</head>
    <body>

<div id="notice">
   <div id="notice-tit">
       <ul>
           <li>
               <a href="#">公告</a>
            </li>
           <li>
               <a href="#">规则</a>
            </li>
           <li>
               <a href="#">论坛</a>
            </li>
           <li>
               <a href="#">安全</a>
            </li>
           <li>
               <a href="#">公益</a>
            </li>

        </ul>
    </div>

</div>

</body>
</html>

///////////////////////////css样式部分

*{
   margin:0;
   padding:0;
   list-style:none;
   font-size:12px;
   }
.notice{
   width:298px;
   height:98px;
   border:1px solid #ddd;
   overflow:hidden;
   margin:0 auto;
   }
.notice-tit   {
   height:27px;
   position:relative;
   background:#f7f7f7;
   }
.notice-tit ul{
   position:absolute;
   width:301px;
   left:-1;
   }
.notice-tit li{
   float:left;
   width:58px;
   height:26px;
   line-height:26px;
   text-align:center;
   background:#fff;
   padding:0 1px;
   background:#f7f7f7;
   border-bottom:1px solid #ddd;
   }
.notice-tit li a{
   text-decoration:none;
   }
.notice-tit li.select{
   background:#fff;
   border-bottom-color:#fff;
   border-left:1px solid #ddd;
   border-right:1px solid #ddd;
   padding:0;
   }
.notice-tit li a:link,.notice-tit li a:visitied{
   color:#000;
   }
.notice-tit li a:hover{
   color:#f90;
   }
.notice-con .mod{
   margin:10px 10px 10px 19px;
   }
.notice-con .mod ul li{
   float:left;
   width:134px;
   height:25px;
   overflow:hidden;
   }
.mod ul a{
   text-decoration:none;
   color:#000;
   }

写回答关注

1回答

HeyLuckyGirl

2016-01-07 23:39:19

你的代码很多细节错误。比如visited拼写错误，还有给div设置样式的时候，你的css是.notice，可是你的代码里是id=“notice”，应该在div那里加上class=“notice”，上面还有很多诸如此类的错误，建议仔细看看视频，然后核查。

0 0

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65466 学习 · 581 问题

查看课程

相似问题

为什么效果出不来

回答 1

为什么效果出不来，哪里错了

回答 2

为什么效果出不来呢？$这个也可以用吗？

回答 5

为什么没效果啊？？？？求大神指出错误

回答 4

为什么我的divs[this.id].style.display='block';没有效果呢

回答 2

打开慕课网App查看更多内容