Start (X)HTML Listy


Designed by:
Peery


Listy PDF Drukuj Email
Wpisany przez Webmaster   
czwartek, 16 grudnia 2010 15:04

Listy punktowe, numerowane, definicje.

 

 

Lista punktowa - służy do tworzenia wykazów w których kolejne punkty są wyróżnione punktorami. Polecenie <ul></ul> tworzy główna ramę listy natomiast <li></li> odpowiada za dany punkt listy.

<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ul>

Wynik:

  • Pierwszy punkt
  • Drugi punkt
  • Trzeci punkt

Symbol kropki w liście można zastąpić innymi symbolami. Można to zrobić za pomocą stylu CSS.

Typ stylu wykazu disc:

<ul style="list-style-type: disc">

Przykład:

  • Pierwszy punkt
  • Drugi punkt
  • Trzeci punkt

Typ stylu wykazu circle:

<ul style="list-style-type: circle">

Przykład:

  • Pierwszy punkt
  • Drugi punkt
  • Trzeci punkt

Typ stylu wykazu square:

<ul style="list-style-type: square">

Przykład:

  • Pierwszy punkt
  • Drugi punkt
  • Trzeci punkt

Więcej na temat formatowania list znajduje się w kursie CSS.

Możemy zagnieżdżać kilka poziomów listy punktowej. Każdy kolejny, niższy poziom musi zawierać własną definicję listy i powinien się kończyć jej zamknięciem.

Lista numerowana - służy do sporządzenia wykazów, w których ważna jest kolejność elementów. Polecenie <ol></ol> tworzy główna ramę listy natomiast <li></li> odpowiada za dany punkt listy.

Przykładowy kod:

<ol>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ol>

Przykład użycia:

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Podobnie jak w listach nienumerowanych możemy formatować styl listy. Kilka przykładów - więcej na ten temat w kursie CSS.

Przykłady:

<ol style="list-style-type: decimal">

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

<ol style="list-style-type: lower-roman">

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

<ol style="list-style-type: upper-alpha">

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Lista definicji służy do tworzenia definicji terminów.

<dl>
<dt>pierwszy termin</dt>
<dd>wyjaśnienie terminu</dd>
<dt>drugi termin</dt>
<dd>wyjaśnienie terminu</dd>
</dl>

Przykład:

pierwszy termin
wyjaśnienie terminu
drugi termin
wyjaśnienie terminu
Tags:
 

Przydatne linki