一道灵活的css笔试题
今天在网上看到一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笔试题的更多相关文章
- 一道简单的 Java 笔试题，但值得很多人反思！
前言 面试别人,对我来说是一件新奇事,以前都是别人面试我.我清楚地知道,我在的地域与公司,难以吸引到中国的一流软件人才.所以,我特地调低了期望,很少问什么深入的技术问题,只问一些广泛的.基础的.我只要 ...
- OpenJDK源码研究笔记(五)-缓存Integer等类型的频繁使用的数据和对象，大幅度提升性能(一道经典的Java笔试题)
摘要 本文先给出一个看似很简单实则有深意的Java笔试面试题,引出JDK内部的缓存. JDK内部的缓存,主要是为了提高Java程序的性能. 你能答对这道"看似简单,实则有深意"的J ...
- 一道有意思的 CSS 面试题，FizzBuzz ~
FizzBuzz 是一道很有意思的题目.我们来看看题目: 如果遇见了 3 的倍数要说 Fizz,5 的倍数就说 Buzz,如果即是 3 的倍数又是 5 的倍数就说 FizzBuzz. 如果是在一些 ...
- CSS笔试题
如何实现移动端9宫格 如何实现移动端下列8宫格 实现移动端图片画廊CSS样式 写一个简单的animation的css动画 美化select,radio,range样式,只需考虑谷歌浏览器,下面给出的是 ...
- 关于Java基础的一些笔试题总结
针对近期腾讯.京东.网易等公司的笔试,遇到一些有关Java基础的问题,在此总结,希望能通过这几道经典问题题发散,举一反三,借此打牢基础!自己总结,望提出宝贵意见! 一.关于null的一道小题 先开开 ...
- 有关Java基础的一些笔试题总结
针对近期腾讯.京东.网易等公司的笔试.遇到一些有关Java基础的问题,在此总结.希望能通过这几道经典问题题发散,举一反三.借此打牢基础! 自己总结,望提出宝贵意见! 一.关于null的一道小题 先开开 ...
- 【Android】一道Android OpenGL笔试题
一道Android OpenGL笔试题 SkySeraph May. 5th 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sky ...
- 用CSS创建小三角形问题（笔试题常考）
笔试题中经常遇到用CSS实现某个Div边框添加三角形问题,掌握一点,合理利用div的边框,当div有宽有高时,边框就是不起眼的边框,当div的宽高为0时,边框就是一个小方块,把剩下的三个边透明就是神奇 ...
- Java中有关构造函数的一道笔试题解析
Java中有关构造函数的一道笔试题解析 1.详细题目例如以下 下列说法正确的有() A． class中的constructor不可省略 B． constructor必须与class同名,但方法不能与c ...
随机推荐
- android xml解析添加到listview中的问题
一个问题不知什么原因,代码: public class OtherActivity extends ListActivity { @Override protected void onCreate(B ...
- windows7 中开启无线热点
我用的是移动的 CMCC-EDU 上网,但是这个只能在一个设备上登陆,那么问题就来了,当我电脑需要用网,手机也想要用网(不用 2/3/4G)该怎么办? 电脑操作系统:windows7 接下来是开启 w ...
- URAL 1549 Another Japanese Puzzle（构造）
题目大意 构造一条闭合路线,使得路线不能相交,并且走直线的步数小于等于 S,转弯(左转和右转)的步数小于等于 T.(0≤S,T≤1000) 求一条最长的路线 做法分析 注意到,因为要求路线闭合,那么转 ...
- make no mistake, we are the last line of defense.
make no mistake, we are the last line of defense.
- 【团购活动】接口最全最好用的S5PV210开发板Sate210-F 开发板开始团购活动了，一起学习linux！
接口最全最好用的S5PV210开发板Sate210-F 开发板开始团购活动了,一起学习linux!http://bbs.eeworld.com.cn/forum.php?mod=viewthread& ...
- Virgo Tomcat Server 指南-Hello World
Eclipse发布了最新的Virgo Tomccat Server.VTS是一个应用服务器与OSGi紧密结合并且可以开发bundles形式的Spring web apps应用,他们同样拥有OSGi和S ...
- UVAoj 11324 - The Largest Clique(tarjan + dp)
题意:给定一个有向图,寻找一个点数最大集合,使得这个集合中的任意两个点 u,v, 都有u->v 或者 v->u 或者u<==>v 思路:首先将强连通分量通过tarjan算法求出 ...
- Mysql学习笔记（十一）临时表+视图
学习内容: 临时表和视图的基本操作... 临时表与视图的使用范围... 1.临时表 临时表:临时表,想必大家都知道这个概念的存在...但是我们什么时候应该使用到临时表呢?当一个数据库存在着大量的数 ...
- Java魔法堂：String.format详解
目录 一.前言 二.重载方法 三.占位符 四.对字符.字符串进行格式化 五.对整数进行格式化 六.对浮点数进行格式化 七.对日期时间进行格式化 ...
- iOS实现图像素描效果
使用GPUImageSketchFilter对象实现图像素描效果 NSString *const kGPUImageSketchFragmentShaderString = SHADER_STRING ...