今天在网上看到一css笔试题,乍一看很简单,实则内部暗藏玄机,题目大概是:九宫格,每格长宽50px,边框宽度5px,鼠标经过边框变红,效果如下:
鼠标路过时:
以下是代码(如有不足之处望多加指正)
<!DOCTYPE HTML> <html> <head> <style> *{margin:0px;padding:0px;} ul{ 165px; height:165px; margin:20px auto; } li{ 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浏览器会出意外,如下: