css九宫格布局代码实例
分类:实例代码
分享一段代码实例,它实现了九宫格布局效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> body, ul, li { margin: 0; padding: 0; } .grid_wrapper { width:170px; height:170px; margin-left:auto; margin-right:auto; } .grid { margin-left:5px; margin-top:5px; list-style-type:none; } .grid:after { content: "."; display: block; line-height: 0; width: 0; height: 0; clear: both; visibility: hidden; overflow: hidden; } .grid li { float: left; line-height: 50px; } .grid li a, .grid li a:visited { display: block; border: 5px solid #ccc; width: 50px; height: 50px; text-align: center; margin-left: -5px; margin-top: -5px; position: relative; z-index: 1; } .grid li a:hover { border-color: #f00; z-index: 2; } </style> </head> <body> <div class="grid_wrapper"> <ul class="grid"> <li><a href="#" title="1">1</a></li> <li><a href="#" title="2">2</a></li> <li><a href="#" title="3">3</a></li> <li><a href="#" title="4">4</a></li> <li><a href="#" title="5">5</a></li> <li><a href="#" title="6">6</a></li> <li><a href="#" title="7">7</a></li> <li><a href="#" title="8">8</a></li> <li><a href="#" title="9">9</a></li> </ul> </div> </body> </html>
