zoukankan      html  css  js  c++  java
  • WEB页面中的选项卡实例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    <style>
    div.RoundedCorner{background: #9BD1FA}
    b.rtop, b.rbottom{display:block;background: #FFF}
    b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
    b.r1{margin: 0 5px}
    b.r2{margin: 0 3px}
    b.r3{margin: 0 2px}
    b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}


    #tabMenu{
      margin:0px;
      padding:0px;
      100%;
      font-family: Arial, 宋体, sans-serif;
      font-size: 12px;
      line-height:normal;
      background:url("bg.gif") repeat-x bottom;
    }

    #tabMenu li {
     float:left;
     padding-right:4px;
    }

    #tabMenu a {
     display:block;
      padding:4px;
      padding-bottom:3px;
      80px;
      text-align:center;
      border:1px solid #999;
      border-bottom:0px;
      background:#eee;
      text-decoration:none;
      color:black;
    }

    #tabMenu a.current {
     color:#333;
     padding-bottom:4px;
       background:white;
    }

    #tabMenu a:hover{
       background:white;
    }

    #tabContent {
      clear:both;
      100%;
      border:1px solid #999;
      border-top:0px;
    }


    </style>
    <BODY>
    <div class="RoundedCorner">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    <br>欢迎光临 www.i5tt.com<br><br>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
    </div>

    <P>

    <div id="tabMenu">
      <ul>
        <li><a class="current" href="#">爱我天堂1</a></li>
        <li><a href="#">爱我天堂2</a></li>
      </ul>
    </div>
    <div id="tabContent">
    内容...
    </div>

    <P>

    <fieldset>
      <legend>爱我天堂</legend>
      欢迎测试使用
    </fieldset>
    <P>

    </BODY>
    </HTML>

  • 相关阅读:
    设计模式之三:Abstract Factory(转)
    设计模式之二:adapter模式(转)
    设计模式之一:设计原则(转)
    双链表操作
    单链表操作
    C#-Activex插件操作指南
    积分源码上线
    換友情鏈接
    企业短信群发
    掉了,全掉了。
  • 原文地址:https://www.cnblogs.com/vic_lu/p/1809304.html
Copyright © 2011-2022 走看看