CSS로 메뉴에 확인 표시를 구현하는 방법은 무엇입니까? (암호)-CSS 튜토리얼-php.cn

CSS로 메뉴에 확인 표시를 구현하는 방법은 무엇입니까? (암호)

不言

풀어 주다： 2018-08-09 16:51:50

원래의

3042명이 탐색했습니다.

이 글의 내용은 CSS로 메뉴에 체크 표시를 구현하는 방법에 관한 것입니다. (코드), 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>:after :before</title>
    <style>
    li {
        list-style-type: none;
        position: relative;
        margin: 2px;
        padding: 0.5em 0.5em 0.5em 2em;
        background: lightgrey;
        font-family: sans-serif;
    }
    
    li.done {
        background: #CCFF99;
    }
    
    li.done::before {
        content: &#39;&#39;;
        position: absolute;
        border-color: #009933;
        border-style: solid;
        border-width: 0 0.3em 0.25em 0;
        height: 1em;
        top: 1.3em;
        left: 0.6em;
        margin-top: -1em;
        transform: rotate(45deg);
        width: 0.5em;
    }
    </style>
</head>

<body>
    <ul>
        <li>Buy milk</li>
        <li>Take the dog for a walk</li>
        <li>Exercise</li>
        <li>Write code</li>
        <li>Play music</li>
        <li>Relax</li>
    </ul>
</body>
<script>
var list = document.querySelector(&#39;ul&#39;);
list.addEventListener(&#39;click&#39;, function(ev) {
    if (ev.target.tagName === &#39;LI&#39;) {
        ev.target.classList.toggle(&#39;done&#39;);
    }
}, false);
</script>

</html>

로그인 후 복사

효과는 다음과 같습니다:

Key CSS:

li.done::before {
    content: &#39;&#39;;
    position: absolute;
    border-color: #009933;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 1.3em;
    left: 0.6em;
    margin-top: -1em;
    transform: rotate(45deg);
    width: 0.5em;
}

로그인 후 복사

* bootstrap 아래쪽 삼각형은 드롭다운 메뉴에 사용됩니다.

.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px dashed;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    width: 0;
}

로그인 후 복사