397day（模式轉換複習，例子練習，顯示隱藏）
阿新 • • 發佈：2018-11-21
《2018年11月4日》【連續397天】
標題：模式轉換複習，例子練習，顯示隱藏；
內容：
/* flaot , postion 自動轉換為inline-block */< !--盒子排列 --> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } div { width: 250px; height: 400px; border: 1px solid #ccc; float: left; margin-left: -1px; /*position: relative;*/ } div:hover { border: 1px solid #f40; position: relative; /*z-index: 1*/ } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body>
display: none; /*隱藏，不保留位置*/
visibility: hidden/visible /*隱藏，顯示，保留位置*/視訊介面：
<style type="text/css"> * { margin: 0; padding: 0; } a { width: 448px; height: 252px; display: block; position: relative; } .mask { width: 100%; height: 100%; background: rgba(0,0,0,0.4) url(images/arr.png) no-repeat center; position: absolute; top: 0; left: 0; display: none; /*初始隱藏*/ } a:hover .mask { display: block; /*顯示*/ } </style> </head> <body> <a href="#"> <img src="images/tudou.jpg" width="448" height="252" alt=""> <div class="mask"> </div> </a> </body>
