淘宝首页上的一个设计
之前看到QQ群里讨论淘宝首页上的一个设计。
当鼠标放到某个元素上的时候这个元素周围的边框改变颜色,不可以用表格。
我折腾了一下,效果一样,改天看看淘宝是不是也是这么弄的。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>taobao</title> <style> * { margin: 0; padding: 0; } .box { width: 430px; overflow: hidden; } a { text-decoration: none; display: block; float: left; color: #333; width: 200px; height: 200px; border: 10px solid #BBB; margin-right: -10px; margin-bottom: -10px; position: relative; } a:hover { z-index: 1; border-color: blue; text-decoration: none; } </style> </head> <body> <div class="box"> <a>el</a> <a>el</a> <a>el</a> <a>el</a> <a>el</a> </div> </body> </html>