20160614 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;
              width: 33.3%;
              float: left;
              box-sizing: border-box;
          }
          
      ul li img{
              width: 100%;
              display: block;
          }
      .pox{
          font-size: 30px;
      }
      .show img{
        width: 50%;        
       padding: 3%;
       }  
          
       @media only screen and (min-width:960px){
        html{
           font-size: 19px;           
             }        
        }
       @media only screen and (max-width:959px){
        html{
           font-size: 15px;
         }
          ul li{
           width: 50%;
           }
           .pox{
               font-size: 20px;
           }
       }
       @media only screen and (max-width:767px){
        html{
           font-size: 12px;
         }
         ul li{
           width: 100%;
           float: none;
            }
             .pox{
               font-size:12px;
           }
       }         
                     
       .dn{
           display: none;
       }             
 
 
    
    /*html{
        font-size: 20px;
    }*/
    /*.box{
        box-sizing: border-box;
       width: 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" ></li>
            <li><img src="images/banner2.png" ></li>
            <li> <img src="images/banner3.png" ></li>
     </ul>
  </div>
  <div class="show">
      <dl>
          <dt>001</dt>
          <img src="images/g1.jpg" >
      </dl>
  </div>
  <div class="show dn">
       <dl>
          <dt>002</dt>
          <img src="images/g4.jpg" >
      </dl>
  </div>
  <div class="show dn">
       <dl>
          <dt>003</dt>
          <img src="images/g3.jpg" >
      </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>

时间： 2024-08-11 03:42:56

20160614 html5学习代码（选项卡）的相关文章

20160614 html5学习代码（图册）

index.html部分 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图册</title>    <link rel="stylesheet" href="css/index.css">     <script src="js

20160606 html5学习代码

index.html部分 <!--banner-->   <div class="banner">      <div id="slideBox" class="slideBox">            <div class="hd">                <ul><li></li><li></li><

20160607 html5学习代码

index.html 部分 <!--footer部分--> <footer>   <div class="bottom">      <div class="wp fix">        <div class="box-bottom1 fix">         <div class="messages fix">            <div

20160617 html5学习代码（banner滚屏不用插件版）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>单页-01</title>    <script src="js/jquery.js"></script>               <style>      *{margin:0;paddi

20160603 html5学习代码

接上部分index.html <!--导航-->   <nav >       <div class="wp">         <ul>            <li class="on">                <a href=""  >首页</a>            </li>            <li>       

20160602 html5学习代码

index.html部分 <!DOCTYPE html><html lang="zh-cn">    <head>        <meta charset="utf-8">        <title>我的第一个网站首页面</title>        <link rel="stylesheet" href="css/index.css"> 

20160608 html5学习代码

滚动 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>        <style>        *{margin: 0;padding: 0;}        body{            height: 100%;            /*p

20160612 html5学习代码（雪花特效）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>snow</title>    <style>    *{margin: 0;padding: 0;}    html{        height:100%;    }    body{        height:100%;     

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h