css面试题——九宫格

 

逛博客时看到一css面试题，感觉还是比较经典的，所以动手做了一下

 

来自一淘的 WEB 前端的面试题，题目要求如下：

使用 HTML+CSS 实现如图布局，border-width:5px，格子大小是 50px*50px，hover时边框变成红色，需要考虑 IE6+ 和语义化的结构。

题目不难，主要还是考察面试者对 CSS 灵活运用程度。

 

查看Demo:

http://sandbox.runjs.cn/show/no0kubon

 

结构：

    <ul class="box">
        <li><a href="">1a>li>
        <li><a href="">2a>li>
        <li><a href="">3a>li>
        <li><a href="">4a>li>
        <li><a href="">5a>li>
        <li><a href="">6a>li>
        <li><a href="">7a>li>
        <li><a href="">8a>li>
        <li><a href="">9a>li>
    ul>

样式：

    body{background:#fff;}
    body,ul,li,a{margin: 0px;padding: 0px;}
    .box{width:165px;height:165px;margin:0 auto;}
    .box li{float:left;list-style:none;}
    .box a{display:inline-block;width:50px;height:50px;border:5px solid blue;line-height:50px;text-align:center;text-decoration:none;margin:-0 0 -5px -5px;position:relative;}
    .box a:hover{border-color:red; z-index:1;}

 

 

在雨夜带刀的博客逛到的题目

http://stylechen.com/jiugongge.html

转载于:https://www.cnblogs.com/jmjweb/p/3914036.html