您当前的位置: <!doctype html><html lang="en"><head><meta charset="UTF-8"><title>九宫格</title><style>body{ padding: 30px;}ul,li{ margin:0; padding: 0;}li{list-style:none;}.wrap{ width: 165px; height: 165px; margin:0 auto; padding: 0 0 5px 5px; overflow: hidden; background: #007ca3}.wrap li{ width: 50px; height: 50px; line-height: 50px; margin:5px 5px 0 0; text-align: center; background: #f0f0f0; float: left; position:relative;}.wrap li a{ width: 50px; height: 50px; display: block; text-decoration: none; color: #a90c40}.wrap li a:hover{ border: 5px solid #dd0000; position: absolute; left: -5px; top: -5px;}</style></head><body><ul class="wrap"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li></ul></body></html>
效果图：