Jinsi ya Kurejea: Kadi ya Mwongozo

Mwita kuhusiana na ujenzi wa Kadi ya Mwongozo kwa CSS.

Bill Gates
Bill Gates

CEO na Mwanachama wa Kuzalizia, Mfano

Harvard University

亲自试一试

Kuhakikisha Kazi ya Kitambaa

Safarini ya Kwanza - Ongeza HTML:

<!-- Ongeza muhimu wa ikoni -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
  <img src="img.jpg" alt="John" style="width:100%">
  <h1>Bill Gates</h1>
  <p class="title">CEO & Founder, Example</p>
  <p>Harvard University</p>
  <a href="#"><i class="fa fa-dribbble"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-linkedin"></i></a>
  <a href="#"><i class="fa fa-facebook"></i></a>
  <p><button>Contact</button></p>
</div>

Safarini ya Pili - Ongeza CSS:

.card {
  kifungu cha kijumla: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  kijumla cha upeo kikubwa: 300px;
  kijumla cha upeo: mawili;
  kumekaa kwa kati;
}
.title {
  mengine: mabaki;
  ukurabu wa fonti: 18px;
}
button {
  kufungua: kina;
  kiangalifu: 0;
  kuonesha: kina-block;
  mabaki ya upeo: 8px;
  mengine: mbili;
  mabaki ya upeo: #000;
  kumekaa kwa kati;
  kampuni: kipendekezo;
  kijumla cha upeo: 100%;
  ukurabu wa fonti: 18px;
}
a {
  mifano ya maandiko: kina;
  ukurabu wa fonti: 22px;
  mengine: mabaki ya mawili;
}
button:hover, a:hover {
  透明度：0.7;
}

亲自试一试