asp.net 选项卡自己实现吗

CUMBER 2008-07-16 09:08:54

asp.net 选项卡自己实现吗

...全文

106 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

fellowcheng 2008-07-16

打赏
举报

fellowcheng 2008-07-16

打赏
举报

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title></title>

</head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<style type="text/css">

    body {

	margin:0;

	padding:0;

	font: bold 11px/1.5em Verdana;

}



h2 {

	font: bold 14px Verdana, Arial, Helvetica, sans-serif;

	color: #000;

	margin: 0px;

	padding: 0px 0px 0px 15px;

}

    #tabsF {

      float:left;

      width:100%;

      background:#efefef;

      font-size:93%;

      line-height:normal;

	  border-bottom:1px solid #666;

      }

    #tabsF ul {

	margin:0;

	padding:10px 10px 0 50px;

	list-style:none;

      }

    #tabsF li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabsF a {

      float:left;

      background:url("images/tableftF.gif") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabsF a span {

      float:left;

      display:block;

      background:url("images/tabrightF.gif") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#666;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabsF a span {float:none;}

    /* End IE5-Mac hack */

    #tabsF a:hover span {

      color:#FFF;

      }

    #tabsF a:hover {

      background-position:0% -42px;

      }

    #tabsF a:hover span {

      background-position:100% -42px;

      }

</style>

</head>



<body>

<h2>Tabs</h2>

<div id="tabsF">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

	<li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

</body>

</html>