webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 3

Tworzenie list za pomocą CSS

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-15

szukaj: listy uporządkowane listy uporządkowane listy nieuporządkowane listy nieuporządkowane kurs css kurs css

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:

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:

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

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!

Patryk 'yarpo' Jar

Zagadnienia poruszane w tej części kursu:

Szukasz profesjonalnej firmy?
Projektowanie stron www.
Skontaktuj się z nami!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org