재미있는 css 면접문제
2959 단어 css
그때 대답을 못 하고 돌아와서 두 가지 작법을 생각해 봤는데 모두 최우선이 아니었다.
1. html 부분
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
css 부분
*{ margin:0; padding:0;}
ul{ padding:20px 0 0 20px; width: 360px; height: 360px; background-color: #ff0000; overflow: hidden;}
li{ float: left; width: 100px; height: 100px; margin:0 20px 20px 0; background-color: #000000; list-style-type: none;}
li:hover{ box-shadow:0 0 0 20px orange;}
이것은 박스 shadow를 사용했는데, 분명히 가장 좋은 것은 아니다.
2.html부분
<ul>
<li><a></a> </li>
<li><a></a> </li>
<li><a></a> </li>
<li><a></a> </li>
<li><a></a> </li>
<li><a></a> </li>
<li><a></a> </li>
<li><a></a> </li>
<li><a></a> </li>
</ul>
css 부분
*{ margin:0; padding:0;}
ul{ padding:20px 0 0 20px; width: 360px; height: 360px; background-color: #ff0000; overflow: hidden;}
li{ position: relative; float: left; width: 100px; height: 100px; margin:0 20px 20px 0; background-color: #000000; list-style-type: none;}
li a{ position: absolute; left: 0; top: 0; width: 100%; height:100%;}
li:hover a{ left: -20px; top: -20px; border:20px solid orange;}
이것은 라벨을 하나 더 썼는데, 분명히 가장 좋은 것도 아니다.
모두들 어떤 고견을 가지고 있는지 모르겠다.
온라인 테스트 페이지 1:http://iridescent.cn/test/ 첨부 2: http://iridescent.cn/test/test2.html
---------------------------------------------------------------
풍운의 대신은 역시 대신이다. 분만에 이 문제를 해결하고 코드를 올린다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
