Miten luodaan: luettelojoukko

Opi, miten CSS:ää käytetään perusluettelon muuntamiseen 'luettelojoukkoksi'.

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy

Kokeile itse

Miten luodaan luettelojoukko

Ensimmäinen vaihe - Lisää HTML:

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

Toinen vaihe - Lisää CSS:

ul {
  list-style-type: none; /* Poista luettelomerkit */
  padding: 0; /* Poista sisätila */
  margin: 0; /* Poista ulkoreunat */
}
ul li {
  border: 1px solid #ddd; /* Lisää jokaiselle luetteloaselle ohut reunaviiva */
  margin-top: -1px; /* Estä kahden kehysten双边框 */
  background-color: #f6f6f6; /* Lisää harmaa taustaväri */
  padding: 12px; /* Lisää hieman sisätilaa */
}

Kokeile itse

Liittyvät sivut

Oppitunnit:CSS-lista