zoukankan      html  css  js  c++  java
  • 一道有意思的css面试题,9宫格

    今天出去面试,遇到了一道有意思的面试题:写一个css9宫格,要求边框是5px,鼠标hover的时候边框变色。

    当时没有答出来,回来想了两个写法感觉都不是最优解。

    1.html部分

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    

     css部分

            *{ margin:0; padding:0;}
            ul{ padding:20px 0 0 20px;  360px; height: 360px; background-color: #ff0000; overflow: hidden;}
            li{ float: left;  100px; height: 100px; margin:0 20px 20px 0; background-color: #000000; list-style-type: none;}
            li:hover{ box-shadow:0 0 0 20px orange;}
    

     这个用到了box-shadow,显然不是最优解。

    2.html部分

    <ul>
        <li><a></a> </li>
        <li><a></a> </li>
        <li><a></a> </li>
        <li><a></a> </li>
        <li><a></a> </li>
        <li><a></a> </li>
        <li><a></a> </li>
        <li><a></a> </li>
        <li><a></a> </li>
    </ul>
    

     css部分

            *{ margin:0; padding:0;}
            ul{ padding:20px 0 0 20px;  360px; height: 360px; background-color: #ff0000; overflow: hidden;}
            li{ position: relative; float: left;  100px; height: 100px; margin:0 20px 20px 0; background-color: #000000; list-style-type: none;}
            li a{ position: absolute; left: 0; top: 0;  100%; height:100%;}
            li:hover a{ left: -20px; top: -20px; border:20px solid orange;}
    

     这个多用了一个标签,显然也不是最优解。

    不知大家有何高见。

    附上线上测试页1:http://iridescent.cn/test/      2:http://iridescent.cn/test/test2.html

    ---------------------------------------------------------------

    风云的大神不愧是大神,分分钟就把这道题给搞定了,上代码:

    <style type="text/css">
        .main{
            190px;
            height:190px;
        }
        .box{
            float: left;
             50px;
            height: 50px;
            background: #000;
            border: 10px solid red;
            margin:-10px 0px 0px -10px;
            position:relative;
            z-index:1;
        }
        .box:hover{
             border: 10px solid yellow;
             z-index:2;
        }
    </style>
    <div class="main">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>


    完美的答案。

  • 相关阅读:
    偶对学习C#以及理解.Net平台的一些看法(二,Junior Bibliography)
    聊聊编程那些破事0.Prehistory
    偶对学习C#以及理解.Net平台的一些看法(一,Prerequisites)
    [转帖]c#.net常用函数列表
    一个编程小题目引发的思考(上)
    geoTools学习笔记001(简介)
    ArcGIS Server 10安装配置(JAVA)
    ARCGIS中label(标注)和Annotation(注记
    JSTL入门开发包详解
    基于C/S的网盘设计(JAVA) 网盘源码实现部分功能
  • 原文地址:https://www.cnblogs.com/childsplay/p/4342132.html
Copyright © 2011-2022 走看看