: Home / HTML / CSS / kurs CSS / Listy

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/45-listy.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Listy
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 03:00

W zwykłym html-u można stworzyć całkiem ciekawe listy, ale nigdy nie będą one tak różnorodne jak te, stworzone przy pomocy css.

Może najpierw pokaże jakąś listę, bo nie każdy wie co to jest:

  • To jest pierwsza pozycja listy
  • To jest druga pozycja listy

Można także sprawić by były numerowane i by przy kolejnych pozycjach były inne "znaczki". No, ale skoro świat idzie do przodu, wymyślono CSS to czemu z niego nie skorzystać, szczególnie, że dzięki niemu można uzyskać dużo lepsze efekty, a dodatkowo wszelkie zmiany w wyglądzie 100 stron dokonywane są przez zmianę w jednym pliku. Więc zacznijmy.

Skopiuj plik 'index.htm' i nadaj kopi nazwę 'listy.htm'. Od tego momentu wszelkie zmiany na stronie index.htm (w 99%) będziesz musiał także przeprowadzić na innych stronach - poradzisz sobie! (choćby dlatego, że musisz:-)) )

Budowanie strony 'listy.htm':

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Tytuł strony</title>
        <link rel="stylesheet" href="/style.css" type="text/css">
    </head>
<body>
    <table width="780" cellpadding="0" cellspacing="0">
        <tr>
            <td > </td>
        </tr>
    </table>
    <table width="780" cellpadding="0" cellspacing="0">
        <tr>
            <td class="menu"> </td>
            <td class="txt">
                <ul // 1
                    style="list-style-image: // 2
                    url('lista.gif');"> // 3
                    <li>Pierwsza pozycja</li> // 4
                    <li>Druga pozycja</li>  // 4
                </ul>
            </td>
        </tr>
    </table>
     <table width="780" cellpadding="0" cellspacing="0">
        <tr>>
            <td> </td>
        </tr>
    </table>
</body>
</html>

Opis:
* - spokojnie, specjalnie zrobiłem takie małe napisy w górnej i dolnej części strony, ponieważ są mało istotne. Najważniejsza treść jest bordowo-brązowa.
1 - 'ul' oznacza lista punktowana (taka jak w przykładzie na górze strony). Inną możliwością jest 'ol' wtedy lista będzie numerowana.
2 - określam wygląd dla tej konretnej listy. I tak kolejno mówię przeglądarce co chciałbym zmienić list-style-image: url('lista.gif'); co możnaby przetłumaczyć na dla_listy[list]-wygląd[style]-obrazek[image].
3 - zostanie wczytany plik 'lista.gif', zamiast tych zwykłych czarnych punktów. Nazwa pliku może być dowolna, odradzam jednak stosowania polskich liter i spacji. Mogłeś już spostrzeć, że zawsze kiedy jest możliwość wczytania pliku graficznego schemat jest ten sam obiekt-image: url('ścieżka/plik.gif'); Podobna sytuacja była już wcześniej z tłem [ background-image: url(plik.gif);].
4 - znacznik <li> oznacza początek pierwszej pozycji.

Jak zawsze CSS daje jeszcze kilka możliwości. Opiszę tu jedną z najczęściej używanych. Otóż jest to dodawanie jako punktów jakichś symboli, które są ładowane na poziomie przeglądarki [kwadraty na górze strony]. Mogą to być:

  • style="list-style-type: disc;"
  • style="list-style-type: circle;"
  • style="list-style-type: square;"
  • style="list-style-type: decimal;"
  • style="list-style-type: lower-roman;"
  • style="list-style-type: upper-roman;"
  • style="list-style-type: lower-alpha;"
  • style="list-style-type: upper-alpha;"
  • style="list-style-type: none;"

W przypadku list można jak najbardziej robić także klasy. Tu ich nie używałem ponieważ w ten sposób było mi łatwiej i krócej przeprowadzić tę lekcję.

A teraz zadanie bojowe dla Ciebie: zrób klasę, w której będą opisane właściwości listy. Popróbuj także nadać jej inne właściwości - tło, obramowanie itp (prawie wszystko czego do tej pory nauczyłeś się w tym kursie będzie działać!). Stworzoną wcześniej stronę zachowaj. Próby możesz przeprowadzać w niej. Niech na tej stronie w komórce określonej klasą 'txt' znajdzie się kilka przykładów. Ich treść i liczba zależy jedynie od Ciebie!

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież