今天在网上看到一css笔试题，乍一看很简单，实则内部暗藏玄机，题目大概是：九宫格，每格长宽50px，边框宽度5px，鼠标经过边框变红，效果如下：

鼠标路过时：

以下是代码（如有不足之处望多加指正）

<!DOCTYPE HTML>

<html>

<head>

<style>

*{margin:0px;padding:0px;}

ul{

    width:165px;

    height:165px;

    margin:20px auto;

}

li{

    width: 50px;

    height:50px;

   margin:-5px 0 0 -5px;  //关键代码

    float:left;

    background: #ccc;

    border:5px solid blue;

    text-align:center;

    line-height:50px;

    cursor:pointer;

    list-style-type: none;

}

li:hover{

    border-color:red;

    position:relative; //最为重要的一条代码，否则会出现下图中的错误

}

</style>

<script language="JavaScript">

</script>

 	<body>

			<ul>

                <li>1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

                <li>6</li>

                <li>7</li>

                <li>8</li>

                <li>9</li>

            </ul>

	</body>

</html>

错误效果（没有position:relative;时的效果）：

错误效果（没有margin:-5px 0 0 -5px;时的效果）：

切记文档声明<DOCTYPE HTML>也很重要，如果没有此声明，IE8浏览器会出意外，如下：

一道灵活的css笔试题的更多相关文章

  1. 一道简单的 Java 笔试题，但值得很多人反思！

    前言 面试别人,对我来说是一件新奇事,以前都是别人面试我.我清楚地知道,我在的地域与公司,难以吸引到中国的一流软件人才.所以,我特地调低了期望,很少问什么深入的技术问题,只问一些广泛的.基础的.我只要 ...

  2. OpenJDK源码研究笔记(五)-缓存Integer等类型的频繁使用的数据和对象，大幅度提升性能(一道经典的Java笔试题)

    摘要 本文先给出一个看似很简单实则有深意的Java笔试面试题,引出JDK内部的缓存. JDK内部的缓存,主要是为了提高Java程序的性能. 你能答对这道"看似简单,实则有深意"的J ...

  3. 一道有意思的 CSS 面试题，FizzBu​​zz ~

    FizzBu​​zz 是一道很有意思的题目.我们来看看题目: 如果遇见了 3 的倍数要说 Fizz,5 的倍数就说 Buzz,如果即是 3 的倍数又是 5 的倍数就说 FizzBuzz. 如果是在一些 ...

  4. CSS笔试题

    如何实现移动端9宫格 如何实现移动端下列8宫格 实现移动端图片画廊CSS样式 写一个简单的animation的css动画 美化select,radio,range样式,只需考虑谷歌浏览器,下面给出的是 ...

  5. 关于Java基础的一些笔试题总结

    针对近期腾讯.京东.网易等公司的笔试,遇到一些有关Java基础的问题,在此总结,希望能通过这几道经典问题题发散,举一反三,借此打牢基础!自己总结,望提出宝贵意见! 一.关于null的一道小题  先开开 ...

  6. 有关Java基础的一些笔试题总结

    针对近期腾讯.京东.网易等公司的笔试.遇到一些有关Java基础的问题,在此总结.希望能通过这几道经典问题题发散,举一反三.借此打牢基础! 自己总结,望提出宝贵意见! 一.关于null的一道小题 先开开 ...

  7. 【Android】一道Android OpenGL笔试题

    一道Android OpenGL笔试题 SkySeraph May. 5th 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sky ...

  8. 用CSS创建小三角形问题（笔试题常考）

    笔试题中经常遇到用CSS实现某个Div边框添加三角形问题,掌握一点,合理利用div的边框,当div有宽有高时,边框就是不起眼的边框,当div的宽高为0时,边框就是一个小方块,把剩下的三个边透明就是神奇 ...

  9. Java中有关构造函数的一道笔试题解析

    Java中有关构造函数的一道笔试题解析 1.详细题目例如以下 下列说法正确的有() A． class中的constructor不可省略 B． constructor必须与class同名,但方法不能与c ...

随机推荐

  1. 【Java设计模式】单例模式

    ### 1. 概述> 单例模式是确保某一个类中有且只有一个实例. ----------### 2. 饿汉式单例``` javapublic class SingletonInstance { p ...

  2. [原]Android Native Debug

    1,安装adt插件,cdt插件2,SDK目录配置: Eclipse文件菜单选择“Window”--->“Preferences”--->“Android”--->设置“SDK Loc ...

  3. JavaScript进阶内容1：各种对象类型判断

    该文章主要用来介绍JavaScript中常用的一些对象检测判断方法,整理资源来自书本和网络,如有错误或说明不详之处,望评论提出,本菜定提名感谢……(本文章知识比较基础,大牛请提些意见再绕道,三克油^_ ...

  4. Android自定义之TextView跑马灯的监听

    TextView都有跑马灯的效果,如果说让你去监听跑马灯效果的执行,我觉得这个需求有点二了,但是也要实现. 思路: 1.自定义View  继承TextView   这种方法过于麻烦,只是监听一个跑马灯 ...

  5. 伸展树(三)之 Java的实现

    概要 前面分别通过C和C++实现了伸展树,本章给出伸展树的Java版本.基本算法和原理都与前两章一样.1. 伸展树的介绍2. 伸展树的Java实现(完整源码)3. 伸展树的Java测试程序 转载请注明 ...

  6. MPU9250调试

    MPU9250 芯片概述 MPU9250芯片是一个9轴姿态传感芯片,其中包含了3轴加速度传感器.3轴角速度传感器以及三轴磁力计. 其本质上是MPU6050芯片+AK8963. 可以获取传感芯片的加速度 ...

  7. WEB 安全之 SQL注入 < 三 > 提权

    SQL注入是一个比较“古老”的话题,虽然现在存在这种漏洞的站点比较少了,我们还是有必要了解一下它的危害,及其常用的手段,知己知彼方能百战不殆.进攻与防守相当于矛和盾的关系,我们如果能清楚了解 攻击的全 ...

  8. Ember Charts – 基于 Ember & D3 的图表库

    Ember Charts 是一个基于 Ember.js 和 D3.js 的图表库.它包括时间序列.柱状图.饼图.点图,很容易扩展和修改.这些图表组件代表图表交互性和演示的最佳实践,是高度可定制和可扩展 ...

  9. "浅谈Android"第二篇：活动(Activity)

        距离上一篇文章,过去有半个多月了,在此期间忙于工作,疏于整理和总结,特此写下这篇博文,来谈谈自己对Activity的理解.总所周知,Activity组件在Android中的重要性不言而喻,我们 ...

  10. CentOS6.5菜鸟之旅：安装rpmforge软件库

    一.rpmforge软件库    rpmforge是包含4000多种CentOS软件的软件库,被CentOS社区认为是安全和稳定的软件库. 二.安装rpmforege       1. 在http:/ ...