一道灵活的css笔试题

时间:2022-01-06 16:35:49

今天在网上看到一css笔试题,乍一看很简单,实则内部暗藏玄机,题目大概是:九宫格,每格长宽50px,边框宽度5px,鼠标经过边框变红,效果如下:

一道灵活的css笔试题

鼠标路过时:

一道灵活的css笔试题

以下是代码(如有不足之处望多加指正)

<!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;时的效果):

一道灵活的css笔试题

错误效果(没有margin:-5px 0 0 -5px;时的效果):

一道灵活的css笔试题

切记文档声明<DOCTYPE HTML>也很重要,如果没有此声明,IE8浏览器会出意外,如下:

一道灵活的css笔试题