今天在网上看到一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. [PaPaPa][需求说明书][V0.2]

    PaPaPa软件需求说明书V0.2 前   言 经过第一版本的需求说明书之后,我发现博客园不让我把文章发到首页,那么对于这种情况该怎么办呢?我决定立马发布V0.2版本来挑战一下博客园的审核制度,嘿嘿 ...

  2. B2B多商铺初期权限数据库设计

    项目从无到有,两个月了.一期完成. 权限目前还很简单.USER表,ROLE表,RESOURCE表三个. 目前只有两个商铺.id是0的是我们自己,作为后台运维管理,也抽象成一个商铺,id为0.另一个商铺 ...

  3. linux下如何修改weblogic console登陆的用户名和密码

    1. 执行安装目录下config.sh ./config.sh 2.选择  2|Extend an existing WebLogic configuration 3. 别的一路跳过,到修改secur ...

  4. TFS(Team Foundation Server)敏捷使用教程(四)：工作项跟踪（1）

    工作项跟踪(1) 可跟踪性是软件过程的重要能力,TFS主要是以工作项来实现过程的可跟踪性.曾有人问:"你们实际项目里的工作项是怎么样的?能不能让我们看看?"我也一直很好奇别的公司T ...

  5. jquery选中下拉列表的某个值

    $('#villageToiletAnn').val('xxx'); id是select的ID,不是option的ID

  6. 第九篇 SQL Server代理了解作业和安全

    本篇文章是SQL Server代理系列的第九篇,详细内容请参考原文 在这一系列的上一篇,学习了如何在SQL Server代理作业步骤启动外部程序.你可以使用过时的ActiveX系统,运行批处理命令脚本 ...

  7. C++中的静态绑定和动态绑定

    C++在面向对象编程中,存在着静态绑定和动态绑定的定义,本节即是主要讲述这两点区分.我是在一个类的继承体系中分析的,因此下面所说的对象一般就是指一个类的实例.首先我们需要明确几个名词定义: 静态类型: ...

  8. 【分享】iOS功能界面漂亮的弹出框

    STPopup 为 iPhone 和 iPad提供了 STPopupController UINavigationController 弹出的风格. 特性: Extend your view cont ...

  9. SQL Server分布式数据库技术(LinkedServer,CT,SSB)

    SQL Server自定义业务功能的数据同步 在不同业务需求的驱动下,数据库的模块化拆分将会面临一些比较特殊的业务逻辑处理需求.例如,在数据库层面的数据同步需求.同步过程中,可能会有一些比较复杂的业务 ...

  10. 你得知道这3个最基础的APP技术框架

    出处:优设网作者:信籽链接:http://www.uisdc.com/3-basic-app-technical-framework 信籽(手淘设计师):不知道大家有没有遇到过这种情景,当你做好一个设 ...