Miten luodaan: chat-viesti

Miten luodaan chat-viesti

Vaihe 1 - Lisää HTML:

<div class="cotainer">
  <img src="/w3images/bandmember.jpg" alt="Avatar">
  <p>Hello. Miten sinä olet tänään?</p>
  <span class="time-right">11:00</span>
</div>
<div class="cotainer pimeämpi">
  <img src="/w3images/avatar_g2.jpg" alt="Avatar" class="oikea">
  <p>Moi! Olen kunnossa. Kiitos kysymyksestäsi!</p>
  <span class="aika-vasen">11:01</span>
</div>
<div class="cotainer">
  <img src="/w3images/bandmember.jpg" alt="Avatar">
  <p>Mukavaa! Joten, mitä haluat tehdä tänään?</p>
  <span class="aika-oikea">11:02</span>
</div>
<div class="cotainer pimeämpi">
  <img src="/w3images/avatar_g2.jpg" alt="Avatar" class="oikea">
  <p>Ei, en tiedä. Pelaa jalkapalloa.. tai ehkä oppia enemmän koodausta?</p>
  <span class="aika-vasen">11:05</span>
</div>

Vaihe 2 - Lisää CSS:ää:

/* Keskustelukontti */
.cotainer {
  rasti: 2 px solida #dedede;
  taustaväri: #f1f1f1;
  kulmavarsi: 5 px;
  täyttö: 10 px;
  margin: 10 px 0;
}
/* Keskeneräinen keskustelukontti */
.pimeämpi {
  rastiväri: #ccc;
  taustaväri: #ddd;
}
/* Puhdistaa pyörivän liikkuvuuden */
.cotainer::after {
  sisältö: "";
  puhdistus: molemmat;
  näyttö: taulukko;
}
/* Määrittää kuvan tyylin */
.cotainer img {
  float: left;
  enintään-leveys: 60 px;
  leveys: 100%;
  margin-oikea: 20 px;
  kulmavarsi: 50%;
}
/* Määrittää oikean kuvan tyylin */
.cotainer img.oikea {
  liikkuvuus: oikealle;
  margin-vasen: 20 px;
  margin-oikea:0;
}
/* Määrittää oikeanpuoleisen ajatietotekstin tyylin */
.aika-oikea {
  liikkuvuus: oikealle;
  varsi: #aaa;
}
/* Määrittää vasemmanpuoleisen ajatietotekstin tyylin */
.aika-vasen {
  float: left;
  color: #999;
}

Kokeile itse