包含块的分离与显示 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>包含块的显示</title>
  6         <style type="text/css">
  7             
  8             
  9             #div1{
 10                 width: 100px;
 11                 height: 100px;
 12                 background-color: red;
 13                 position: absolute;
 14                 left: 100px;
 15                 top: 100px;
 16             }
 17             #div2{
 18                 width: 200px;
 19                 height: 200px;
 20                 background-color: white;
 21                 display: none;
 22                 position: absolute;
 23                 left: 100px;
 24             
 25             }
 26             #div3{
 27                 width: 400px;
 28                 height: 400px;
 29                 background-color: cyan;
 30                 display: none;
 31                 position: absolute;
 32                 left: 200px;
 33                 top: 0px;
 34             }
 35             #div1:hover>#div2{
 36                 display: block;
 37             }
 38             /*包含块的显示*/
 39             #a1:hover>#div4{display: block;}
 40             #a2:hover>#div5{display: block;}
 41             #a3:hover>#div6{display: block;}
 42             
 43             #a1:hover{background-color: mediumseagreen;}    
 44             #a2:hover{background-color: magenta;}
 45             #a3:hover{background-color: cornflowerblue;}
 46             
 47             #div4{background-color: mediumseagreen;}
 48             #div5{background-color: magenta;}
 49             #div6{background-color: cornflowerblue;}
 50             
 51             table tr:hover{background-color: darkgray;}
 52             table tr td{width: 200px;}
 53             #div4,#div5,#div6{
 54                 width: 500px;
 55                 height: 300px;
 56                 /*不显示*/
 57                 display: none;
 58                 /*绝对定位*/
 59                 position: absolute;
 60                 left: 198px;
 61                 top: 0px;
 62             }
 63             table div div,table,table div{
 64                 border: none;
 65             }
 66             </style>
 67     </head>
 68     <body>
 69         <div id="div1">
 70             <div id="div2">
 71                 <table>
 72                     <tr><td>
 73                         <div id="a1">
 74                             1<div id="div4">
 75                                 <ul>
 76                                     <li>sajb</li>
 77                                     <li>df</li>
 78                                     <li>asf</li>
 79                                     <li>sb</li>
 80                                     <li>rh</li>
 81                                     <li>rruuuuuu</li>
 82                                 </ul>
 83                             </div>
 84                         </div>
 85                     </td></tr>
 86                     
 87                     <tr><td>
 88                         <div id="a2">
 89                             2<div id="div5">
 90                                 <marquee>java script</marquee>
 91                             </div>
 92                         </div>
 93                     </td></tr>
 94                     
 95                     <tr><td>
 96                         <div id="a3">
 97                             3<div id="div6">
 98                                 <img src="img/product/3.jpg" />
 99                             </div>
100                         </div>
101                     </td></tr>
102                 </table>
103             </div>
104             
105         </div>
106     </body>
107 </html>

 

posted @ 2016-01-31 20:13  SSSSSIU  阅读(127)  评论(0)    收藏  举报