CSS：田字格

最新推荐文章于 2024-07-30 20:28:19 发布

weixin_33693070

最新推荐文章于 2024-07-30 20:28:19 发布

阅读量651

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/4045971/blog/3025756

版权

2019独角兽企业重金招聘Python工程师标准>>>

问题描述：写一个田字格，每一边的边距都为1px，当点击每一个小格子时，它周围的框颜色都发生变化

解决方法：

将四个元素浮动在同一行，在清除第三个元素的浮动[clear：left; 清除浮动是影响自身，让自己在某个方向上没有之前浮动元素（清除之前的元素对自己的影响），所以第三个元素会掉下来，而第三，四个元素是浮动的所以会在一行；]//或者用位移）
再使用位移(transform:translate())或者定位（position:relative;）将多余的1px的边款合并；
最后当点击某个元素时，将z-index{定位的元素才能设z-index}设为》0的数，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>field</title>
    <style type="text/css">
        .field {
            width: 100px;
            height: 100px;
            border: 1px solid #ff00ff;
        }
        .field2{
            transform: translate(101px,-102px);
        }
        .field3{
            transform: translateY(-103px);
        }
        .field4{
            transform: translate(101px,-205px);
        }
        .field:hover{
            position: relative;
            z-index: 1;
            border-color: aquamarine;
        }
      /*  .field {
            width: 100px;
            height: 100px;
            border: 1px solid #ff00ff;
            float: left;
        }
        .field2{
            position: relative;
            left: -1px;
        }
        .field3{
           clear: both;
            position: relative;
            top: -1px;
        }
        .field4{
            position: relative;
            left: -1px;
            top: -1px;
        }
        .field:hover{
            border-color: greenyellow;
            position: relative;
            z-index: 1;
        }
            */
    </style>
</head>
<body>
<div class="field field1"></div>
<div class="field field2"></div>
<div class="field field3"></div>
<div class="field field4"></div>

</body>
</html>

转载于:https://my.oschina.net/u/4045971/blog/3025756