如何 - 聯繫芯片

了解如何創建接觸芯片。

聯繫芯片

李四

錢德勒兵×

創建接觸片

步驟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" -這是容器DIV (class="chip")

例

提示：使用HTML實體“ × ”創造字母"x"

接下來，風格關閉按鈕：

例

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

.closebtn:hover {
    color: #000;
}