今天在网上看到一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. node递归属性目录结构

    要求,读取结束后才能输出所有文件 var fs = require('fs');var path = require('path'); var list = [];var count = 0;func ...

  2. 为什么要提倡“Design Pattern呢

    为什么要提倡“Design Pattern呢?根本原因是为了代码复用,增加可维护性. 那么怎么才能实现代码复用呢?面向对象有几个原则:开闭原则(Open Closed Principle,OCP).里 ...

  3. 跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByName

    按照name属性获取多元素 -- getElementsByName 标准 DOM 1 定义在HTMLDocument Interface 中,原型NodeList getElementsByName ...

  4. CocoStudio教程三：认识并利用CocoStudio的果实 运行2.2.1版本

    原文:CocoStudio教程三:认识并利用CocoStudio的果实 原文用的老版,用2.21搞起来好像有些问题,然后自己摸索了下,有的都是乱找的方法,只求能运行... 1,原文的CCJsonRea ...

  5. mysql 性能优化 配置优化

    http://download.csdn.net/album/detail/1397/2

  6. php XML 读写 创建

    一 .XML 读 1.1. 首先同目录定义好一个XML文件 : book.xml <?xml version="1.0" encoding="utf-8" ...

  7. 安卓开发笔记——自定义广告轮播Banner（实现无限循环）

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  8. sublime text 3安装package console

    打开Packages目录,Preferences > Browse Packages 就可以进入这个目录. $ cd Packages/$ git clone https://github.co ...

  9. MyBatis知多少（12）私有数据库

    如果你从事软件开发工作有了一段时间的话,那么肯定听过关于“自己动手还是花钱购买” 的争论.该争论是说,针对一个业务问题,我们是应该自己动手构建自己的解决方案呢,还是应 该花钱购买一个声称已经解决了此问 ...

  10. 后端码农谈前端（CSS篇）第一课：CSS概述

    一.从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可 ...