今天在网上看到一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. UNIX环境高级编程笔记之线程

    本章涉及到线程的一些基本知识点,讨论了现有的创建线程和销毁线程的POSIX.1原语,此外,重点介绍了线程同步问题,讨论了三种基本的同步机制:互斥量.读写锁.条件变量.

  2. What's New in iOS9 iOS9功能改进

    What's New in iOS9 This article summarizes the key developer-related features introduced in iOS 9, w ...

  3. Android动态设置android:drawableLeft|Right|Top|Bottom 并根据分辨率自适应

    http://blog.sina.com.cn/s/blog_4b93170a0102e1m9.html //调用setCompoundDrawables时,必须调用Drawable.setBound ...

  4. centos 7 卸载 mariadb 的正确命令

    #列出所有被安装的rpm package rpm -qa | grep mariadb #卸载 rpm -e mariadb-libs-5.5.37-1.el7_0.x86_64 错误:依赖检测失败: ...

  5. 十六、【适合中小企业的.Net轻量级开源框架】EnterpriseFrameWork框架核心类库之单点登录SSO

    回<[开源]EnterpriseFrameWork框架系列文章索引> EFW框架源代码下载:http://pan.baidu.com/s/1qWJjo3U 单点登录(Single Sign ...

  6. right-click an action, missing "Go to slot"

    According to the tutorial,to connect the actions to slots, right-click an action and select Go to sl ...

  7. [0x00 用Python讲解数据结构与算法] 概览

    自从工作后就没什么时间更新博客了,最近抽空学了点Python,觉得Python真的是很强大呀.想来在大学中没有学好数据结构和算法,自己的意志力一直不够坚定,这次想好好看一本书,认真把基本的数据结构和算 ...

  8. ruby -- 问题解决（六）link_to to destroy not working

    在Rails的development环境下开发时,使用link_to进行destroy时顺利进行,最近将环境配置成production时,使用link_to,结果not working 代码如下: & ...

  9. VC2013的一个bug

    前段时间在尝试使用一个C++的GUI库nana.这个库最大的特点在于使用现代C++风格去编写GUI程序,而不需要使用大量的比较丑陋的代码(如MFC中的各种宏),或者其它的非C++元素.这是一个比较新的 ...

  10. linux常见进程与内核线程

    发现大量jdb2进程占用io资源.jdb2进程是一个文件系统的写journal的进程 kthreadd:这种内核线程只有一个,它的作用是管理调度其它的内核线程.它在内核初始化的时候被创建,会循环运行一 ...