css实现九宫格
发布时间:2017-12-04 00:00:03
原理:浮动+margin负边距示例代码:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title& ...
原理:浮动+margin负边距
示例代码:
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>css实现九宫格</title> <style type="text/css"> * { margin: 0; padding: 0; } ul.box { list-style: none; width: 165px; height: 165px; padding: 30px; } .box li { /*关键--浮动*/ float: left; } .box a { display: block; width: 50px; height: 50px; border: 5px solid blue; /*关键--margin负值*/ margin-left: -5px; /*关键--margin负值*/ margin-top: -5px; } .box a:hover { /*关键--相对定位*/ position: relative; border-color: red; /*关键-- z-index*/ z-index: 100; } .box:after { content: ""; height: 0; visibility: hidden; clear: both; display: block; } </style> </head> <body> <div id="wrap"> <ul class="box"> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> </ul> </div> </body></html>
效果:
鼠标悬浮效果:
原标题:css实现九宫格
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。