今天在网上看到一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. 为Ubuntu笔记本电脑设置WiFi热点共享上网

    该文由土木坛子转译而来,说是转译,其实看截图就可以方便的设置,没有任何命令,全是图形界面,方便容易.我们都知道怎样在 windows 7 系统上如何设计 Wifi 热点,当你只有一条网线,多台计算机的 ...

  2. 关于python协程的一个例子的学习

    例子来自https://blog.tonyseek.com/post/event-manage-with-greenlet/ 加了一些注释看懂了: 注释中的数字表示执行的顺序,这个简单的例子用到了py ...

  3. 理解RxJava:(三)RxJava的优点

    理解RxJava:(三)RxJava的优点 在第一部分,讲解了RxJava的基本结构.在第二部分,展示了operators的强大之处.但是你们可能仍然没有被说服,也没有足够的理由信服.下面是一些能让你 ...

  4. Devexpress treelist 树形控件 实现带三种状态的CheckBox

    树形控件是使用频率很高的一种控件.对于属性控件往往需要下面两个功能 1.TreeList带有CheckBox,并且节点要有三种状态(所有的子节点都选中,所有的子节点都没选择,一部分子节点选中).使用 ...

  5. HTML CSS——margin和padding的学习

    你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和paddi ...

  6. Apache 配置多端口网站

    跳过安装步骤. 1. apache安装目录/conf/httpd.conf,如果你是采用wamp集成环境,那么在 wamp/bin/apache下. 2. 在httpd.conf中,找到 #LoadM ...

  7. JS思维之路菜鸟也能有大能量-序幕

    准备写一类关于Js的开发思想的文章,这系列文章需要有一定的js基础,在这里不会去说太多的js基础知识,因为这系列文章不是写基础东西,而是一种编程思想,如果你还是js新手,那么建议你有一定基础后再看. ...

  8. NPM使用详解（上）

    1.NPM是什么? NPM是JavaScript的包管理工具,在安装NodeJS(什么?你不知道node?来,我们合计合计:https://nodejs.org/)的时候,会自动安装上npm. 要查看 ...

  9. Java hashCode() 和 equals()的若干问题解答

    本章的内容主要解决下面几个问题: 1 equals() 的作用是什么? 2 equals() 与 == 的区别是什么? 3 hashCode() 的作用是什么? 4 hashCode() 和 equa ...

  10. [SLAM] 01 "Simultaneous Localization and Mapping" basic knowledge

    发信人: leecty (Terry), 信区: ParttimeJobPost标 题: 创业公司招SLAM 算法工程师发信站: 水木社区 (Thu Jun 16 19:18:24 2016), 站内 ...