zoukankan      html  css  js  c++  java
  • html5 选项卡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
          <style>
          *{margin: 0;padding: 0;}
          ul li{
                  padding: 3%;
                  list-style: none;
                  33.3%;
                  float: left;
                  box-sizing: border-box;
              }
              
          ul li img{
                  100%;
                  display: block;
              }
          .pox{
              font-size: 30px;
          }
          .show img{
            50%;        
           padding: 3%;
           }  
              
           @media only screen and (min-960px){
            html{
               font-size: 19px;           
                 }        
            }
           @media only screen and (max-959px){
            html{
               font-size: 15px;
             }
              ul li{
               50%;
               }
               .pox{
                   font-size: 20px;
               }
           }
           @media only screen and (max-767px){
            html{
               font-size: 12px;
             }
             ul li{
               100%;
               float: none;
                }
                 .pox{
                   font-size:12px;
               }
           }         
                         
           .dn{
               display: none;
           }             
     
     
        
        /*html{
            font-size: 20px;
        }*/
        /*.box{
            box-sizing: border-box;
           100%;         
            height: 26.9rem;  乘以根元素10px     
            background:  url(images/caodi.png) no-repeat center top ;
           -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }   */
        </style>
    </head>
    <body>
         <div class="pox">
         hello,world!
      </div>
      <div class="box">
          <ul class="ul-Pic TAB" id=".show">        
                <li><img src="images/banner1.png" alt="" ></li>
                <li><img src="images/banner2.png" alt="" ></li>
                <li> <img src="images/banner3.png" alt=""></li>
         </ul>
      </div>
      <div class="show">
          <dl>
              <dt>001</dt>
              <img src="images/g1.jpg" alt="">
          </dl>
      </div>
      <div class="show dn">
           <dl>
              <dt>002</dt>
              <img src="images/g4.jpg" alt="">
          </dl>
      </div>
      <div class="show dn">
           <dl>
              <dt>003</dt>
              <img src="images/g3.jpg" alt="">
          </dl>
      </div>
     
     <script src="js/jquery.js"> </script>
     
     <script>     
     // 鼠标经过选项卡
           $(".TAB li").mousemove(function(){
                var $vv=$(this).parent(".TAB").attr("id");
                $($vv).hide();
                $(this).parent(".TAB").find("li").removeClass("hover");
                var xx=$(this).parent(".TAB").find("li").index(this);
                $($vv).eq(xx).show();
                $(this).addClass("hover");
            });

     // 鼠标点击选项卡
            // $(".TAB_CLIKE li").click(function(){
            //             var $vv=$(this).parent(".TAB").attr("id");
            //             $($vv).hide();
            //             $(this).parent(".TAB").find("li").removeClass("hover");
            //             var xx=$(this).parent(".TAB").find("li").index(this);
            //             $($vv).eq(xx).show();
            //             $(this).addClass("hover");
            //         });
     </script>
    </body>
    </html>

  • 相关阅读:
    无法import的原因(ImportError: No module named *****)
    Mac 安装终端软件
    MyEclipse中拷贝J2EE项目,发布到tomcat中名字一样的解决办法
    微PE工具箱 v2.1 正式版,最好用的PE工具箱
    Windows 10 v2004 (OS Build 19041.329)
    Microsoft Visual C++ 2019 14.27.28914.0[2020.06.03]
    Visual C++ 运行库合集包完整版 v20200603
    VMware-workstation-full-15.5.6-16341506官方版及密钥
    [转载]使用PRIMO组件,让你的硬盘快几倍!
    [转载]goldendict下优质词典简介及安装
  • 原文地址:https://www.cnblogs.com/liaoliao985786516/p/5585534.html
Copyright © 2011-2022 走看看