淘宝首页上的一个设计

之前看到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>
原文地址:https://www.cnblogs.com/shrekuu/p/3480714.html