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>

  • 相关阅读:
    Mysql权限控制
    Linux查看端口
    linus 下redis守护进程启动
    pymongo创建索引
    mongo批量操作存在更新否则插入
    梯度下降推导过程资料整理
    [转]mitmproxy套件使用攻略及定制化开发
    终极利器!利用appium和mitmproxy登录获取cookies
    how-to-pass-a-class-variable-to-a-decorator-inside-class-definition
    python进阶之魔法函数
  • 原文地址:https://www.cnblogs.com/vic_lu/p/1809304.html
Copyright © 2011-2022 走看看