Howa ya kufanya: utu wa matukio

Jifunze kuhakikisha kufanya utu wa matukio wa kijani kinachoweza kuwa kinavyofanana na kijani.

Utu wa matukio inatoa jina inasikitisha wengine na ukingo wako au ujenzi wako.

Avatar

Chris Fox. CEO wa Mighty Schools.

John Doe kumemkia tukio kikuu cha web.

Avatar

Rebecca Flex. CEO wa Company.

Hakuna mtu bora ya John Doe.

Avatar

Julia Roberts. Mwimbaji.

Kupendeza kweli Johnny Boy.

亲自试一试

Jina la muundo wa matukio ya mtaalamu wa mwanasheria

Mwaka 1 - Ongeza HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO kwa Mighty Schools.</p>
  <p>Bill Gates kumaliza tu kwenye kipindi cha kikwetu.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO kwa Company.</p>
  <p>Hakuna mtu bora kati ya Bill Gates.</p>
</div>

Mwaka 2 - Ongeza CSS:

/* Ongeza mibabu ya kikwetu, mabackgroundi ya kijasiri na mabaki kubwa na kubadilika kwenye kikwetu. */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
/* Ongeza kufungua kwenye kikwetu kwenye kikwetu. */
.container::after {
  content: "";
  clear: both;
  display: table;
}
/* Ongeza picha kwenye kikwetu kikifuatilia kushika kushoto. Ongeza margin kwenye nyumba ya nje ya kushoto na ongeza muundo wa picha kwa kujua. */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
/* Ongeza ukubwa wa fonti ya elementi ya span. */
.container span {
  font-size: 20px;
  margin-right: 15px;
}
/* Kuingiza media query ili kumaliza muundo wa kusasa. Hii itakupa taarifa na picha kwa kushika kwenye kikwetu. */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

亲自试一试