We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
用 CSS 实现以上的九宫格效果,大概每个前端同学都见过不下5次吧,尤其是在面试中。记得上次看到的时候还是一年前吧,那时候想着实现最后不知道什么事耽搁了,大概是根本就没想清楚吧,前两天再次看到,就尝试了一下,实现起来也是很简单的,直接看代码吧:
<ul class="list"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
ul, li { list-style: none; } .list { width: 315px; height: 315px; padding-top: 5px; padding-left: 5px; background-color: #ccc; /* omission clearfix */ } .item { float: left; width: 100px; height: 100px; border: 5px solid #000; margin-left: -5px; margin-top: -5px; } .item:hover { border-color: #f40; position: relative; z-index: 10; }
诺,的确很简单嘛,
The text was updated successfully, but these errors were encountered:
事故。。。
Sorry, something went wrong.
imsobear
No branches or pull requests
用 CSS 实现以上的九宫格效果,大概每个前端同学都见过不下5次吧,尤其是在面试中。记得上次看到的时候还是一年前吧,那时候想着实现最后不知道什么事耽搁了,大概是根本就没想清楚吧,前两天再次看到,就尝试了一下,实现起来也是很简单的,直接看代码吧:
诺,的确很简单嘛,
The text was updated successfully, but these errors were encountered: