一道灵活的css笔试题

最新推荐文章于 2024-04-01 14:10:12 发布

我的前端学习笔记

最新推荐文章于 2024-04-01 14:10:12 发布

阅读量511

点赞数

分类专栏：技术文章标签： css 面试题

本文链接：https://blog.csdn.net/u012181244/article/details/40792467

版权

技术专栏收录该内容

39 篇文章 0 订阅

订阅专栏

今天在网上看到一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;时的效果）：