Hur man skapar: Kontaktchip

Lär dig hur du använder CSS för att skapa kontaktchip.

Skapa kontaktchip

Steg 1 - Lägg till HTML:

<div class="chip">
  <img src="img_avatar.jpg" alt="Person" width="96" height="96">
  Bill Gates
</div>

Steg 2 - Lägg till 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%;
{}

Prova själv

Öppningsbart kontaktchip

För att stänga/dölja kontaktchipet, lägg till ett med onclick Element med händelseegenskapen, som betyder "dölj min föräldreelement när jag klickas" - det vill säga behållaren <div class="chip">。

Exempel

<div class="chip">
  <img src="img_avatar.jpg" alt="Person" width="96" height="96">
  Bill Gates
  <span class="closebtn" onclick="this.parentElement.style.display='none'">×</span>
</div>

Tips:Använd HTML-tecken "×Skapa bokstaven "x".

Nästa, ställ in stilen för stängningsknappen:

Exempel

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

Prova själv