방법 - 연락처 칩

❮ 이전 다음 장 ❯

연락처 칩을 만드는 방법에 대해 알아보십시오.

연락 칩

존 도우

챈들러 빙 ×

연락 칩 만들기

1 단계) HTML을 추가합니다 :

예

2 단계) CSS를 추가 :

예

.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
}

.chip img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

»그것을 자신을 시도

폐쇄 연락 칩

라는 onclick 이벤트 속성을 가진 요소를 추가, 연락처 칩을 숨기 / 닫으려면 "when you click you on me, hide my parent element" 컨테이너 사업부입니다 - (class="chip") .

예

팁 : HTML 엔티티 사용 " × "편지를 만들기 위해 "x" .

다음으로, 스타일 닫기 버튼 :

예

.closebtn {
    padding-left: 10px;
    color: #888;
    font-weight: bold;
    float: right;
    font-size: 20px;
    cursor: pointer;
}

.closebtn:hover {
    color: #000;
}