选项卡容器 | 码农工具

​x
 
<html>
  <head>
    <title>选项卡容器</title>
    <style>
      
    </style>
  </head>
  <body>
    <h3>门户网站</h3>
    <div id="all">
      <a href="#" id="aa">新闻
        <span class="content">这是新闻的内容 1<hr/>
        这是新闻的内容 2<hr/>    这是新闻的内容 3<hr/>
        </span>
      </a>
      <a href="#" id="bb">讨论
        <span class="content">这是讨论的内容<hr/>
          zheshi<hr/>   zheshi <hr/>
        </span>
      </a>
      <a href="#" id="cc">留言
        <span class="content">zzzz<hr/>
          zzz<hr/>   sss<hr/>
        </span>
      </a>
    </div>
  </body>
</html>

HTML

xxxxxxxxxx
 
*{margin:0px  padding:0px}
h3{text-align:center;}
#all{width:400px; height:180px
    margin:0px auto; padding:10px;
    line-height:1.8em; font-size:12px;
    background-color:yellow;   border:1px solid #000;}
a{text-decoration:none; position:relitive;
  color:#00f;  font-size:12px;}
.content{display:none;}
a:hover{cursor:hand;    background:#fff;}
a:hover .content,a#aa:link  .content,a#aa:visitted .content{
        color:#f00;          display:block;
        position:absolute;     top:25px;
        width:350px;         height:150px;
        text-decoration:none;   color:#000;
        background-color:#ffc;   border:1px dashed #fc6;}
a#bb:hover .content{left:-30px;}
a#cc:hover .content{left:-60px;}
a:active{color:#00f;}
a:visited{color:#00f;}
#aa:link .content{left:0px;}
#aa:visited .content{left:0px;}

CSS