@import url("/extension/eznewsletter/design/standard/stylesheets/eznewsletter.css"); @import url("/extension/ezlabel/design/standard/stylesheets/ezlabel.css");
6. Formatowanie list - Webhosting.pl
#site{
background-image:url("/design/webhosting/images/side_shadows.png");
}
#top-icons{
background-image:url("/design/webhosting/images/top_menu_right_bg.png");
}
.content_box-bottom{
background-image:url("/design/webhosting/images/bottom_shadow.png");
}
.left_poll_link_vote{
background-image:url("/design/webhosting/images/left_poll_vote.png");
}
.content_box-wrapper{
background-image:url("/design/webhosting/images/right_shadow.png");
}
.content_box-head{
background-image:url("/design/webhosting/images/right_shadow_top.png");
}
.button{
background-image:url("/design/webhosting/images/button_middle.png");
}
#searcher{
background-image:url("/design/webhosting/images/searcher_background.png");
}
#tagcloud{
background-image:url("/design/webhosting/images/tagcloud_background.png");
}
#tagcloud-after{
background-image:url("/design/webhosting/images/tagcloud_after.png");
}
kontakt
newsletter
rss
zaloguj
ANKIETA
Czy serwis MySpace odniesie w Polsce sukces?:
Tak
Nie
Nie mam zdania
Wyniki Głosuj
E-WYDANIA
Webhosting 4/2007:
- Platforma hostingowa .NET w home.pl,
- .NET od kuchni,
- Własna darmowa galeria internetowa,
- Polska odłona Google Analytics,
- Konfigurujemy filtry antyspamowe,
- Wszystko o telefonii VoIP,
- Bezpieczeństwo dynamicznych stron WWW.
WYDRUKUJ | WYŚLIJ
Kurs CSS 2.1. Budujemy nowoczesne i stylowe witryny
Marcin Modestowicz 12 sierpnia 2007 10:46
6. Formatowanie list
6.1. Definiowanie markerów
Reguły arkuszy stylów pozwalają również na podstawowe formatowanie
wyglądu elementów listy poprzez określenie wcięcia i rodzaju
wyróżnienia dla ich poszczególnych elementów. Przy użyciu właściwości list-style-position możemy ustalić, by marker wyróżniający poszczególne elementy listy był oddzielony od nich eleganckim wcięciem tekstu (wartość outside) lub też był przez ten tekst otaczany (wartość inside). Oprócz położenia znaku wyróżniającego możemy także określić jego rodzaj. Właściwość list-style-type wskazuje właśnie na typ markera, wykorzystując do tego celu następujące słowa kluczowe:
disc – kropka,
circle – kółko,
square – kwadrat,
decimal – liczby dziesiętne począwszy od 1 (1, 2, 3, 4 itp.),
lower-roman – liczby rzymskie małe (i, ii, ii, iv itp.),
upper-roman – liczby rzymskie duże (I, II, III, IV itp.),
lower-alpha – litery małe (a, b, c, d itp.),
upper-alpha – litery duże (A, B, C, D itp.),
none – brak markera.
Specyfikacja CSS 2.1 przewiduje także szereg innych słów kluczowych,
jednak fakt, że nie zaimplementowano ich obsługi w przeglądarkach
Microsoft Internet Explorer, pozbawia je w zasadzie możliwości
szerszego użycia. Zamiast określonych wyżej oznaczeń możemy też pokusić
się o użycie własnych obrazków jako markerów. W tym celu jako wartość
właściwości list-style-image wpisujemy w arkuszu stylów adres URL do wybranego pliku, np. ul {list-style-image: url("http://xyz.com/lista.gif") }.
6.2. Przykład nr 5
Aby zaprezentować przykład zastosowania możliwości arkuszy stylów w
zakresie formatowania list, sporządźmy dokument index.html zawierający
jedynie listę postaci:
<html>
<head>
<link rel="stylesheet" href="arkusz.css" type="text/css">
</head>
<body>
<ol>
<li>Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
</li>
<li>Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy
</li>
</ol>
</body>
</html>
Następnie dodajmy arkusz stylów z jedną regułą:
ol {
list-style-position: inside;
list-style-type: upper-roman;
}
W ten sposób nasza lista będzie zawierała markery w postaci dużych
liczb rzymskich, otoczone dookoła tekstem umieszczonym w kolejnych jej
pozycjach:
poprzednia | 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
następna |
| SKOMENTUJ |
CZYTAJ KOMENTARZE(0)
Wykop.pl | gwar.pl | delicious
var searcher = new SearcherBox("searcher_")
searcher.add("0");
searcher.add("1");
searcher.add("2");
Szukaj
Artykuły | Forum | Google
Szukaj
Artykuły | Forum | Google
Szukaj
Artykuły | Forum | Google
TOP
10
AKTUALNOŚCI
Najdroższe domeny tygodniaczytaj
Microsoft i Oracle wspierają PHPczytaj
AP przeciwko VeriSignczytaj
Chude lata na rynku serwerów?czytaj
BitTorrent DNA dla Hollywoodczytaj
Microsoft Windows XP Service...czytaj
Domeny ze znakami innymi niż...czytaj
Allegro.pl wyświetla oferty...czytaj
Najwięksi rejestratorzy miesiącaczytaj
Niebezpieczne routeryczytaj
Najnowsze | Najpopularniejsze
TOP
10
AKTUALNOŚCI
Miranda IM w wersji 0.7czytaj
Rusza sprzedaż domen .asiaczytaj
Nazwa.pl wprowadza usługę...czytaj
Pierwsze urządzenia przenośne z...czytaj
Hosting Windows w home.plczytaj
Allegro.pl wyświetla oferty...czytaj
Najwięksi rejestratorzy miesiącaczytaj
GoogleOS systemem operacyjnym...czytaj
Tańszy Internet satelitarnyczytaj
Pensylwania przeciwko piractwu...czytaj
Najnowsze | Najpopularniejsze
var tops = new StaticBox("top_")
tops.add("0");
tops.add("1");
BLOGI
YouTube na reklamowo
Jeśli zastanawialiście się kiedyś, dlaczego Google kupił YouTube, to
spieszę z odpowiedzią: oczywiście po to, by na nim zarabiać. Nie
widzieliście w serwisie YouTube żadnych reklam? Nie szkodzi,...
czytaj
Expression Blend - uruchamiamy produkt /arturz/czytaj
Ściągasz pliki? Zapłacisz karę /dAREuS/czytaj
Expression Blend - zaczynamy pracę /arturz/czytaj
Naucz się IIS 7 /arturz/czytaj
TOP
10
ARTYKUŁY
Cybersquatting. (Nie)legalne domeny EURO 2012czytaj
Kurs PHP. Wstęp do programowania w popularnym języku skryptowymczytaj
Najlepsze sprzętowe firewalleczytaj
Kurs "ABC hostingu"czytaj
Czym się różnią procesory serwerowe od zwykłychczytaj
Kurs CSS 2.1. Budujemy nowoczesne i stylowe witrynyczytaj
Biuro w Sieciczytaj
Kurs XHTML. Formatujemy strony WWWczytaj
Siedem najgroźniejszych ataków na serwisy WWWczytaj
Visual Web Developer 2005 Express Edition. Prosty sposób na tworzenie stron WWWczytaj
FORUM
GORĄCE TEMATY
Nowa poczta w o2.plczytaj
Hosting Windows w home.plczytaj
Intel zmienia nazwy procesorówczytaj
Tajemnicze zniknięcie Demonoidaczytaj
Kurs "ABC hostingu"czytaj
TOP
5
PLIKI
Spamihilator 0.9.9.32czytaj
Internet Explorer 7czytaj
Notepad++ 4.2.2czytaj
Pixel 1.0 Beta 7.699 dla Windowsczytaj
Majster 1.1czytaj
TAGI
802.11n cpu chiny cybersquatting google intel internet microsoft nokia p2p skype sun microsystems www wi-fi youtube atak bezpieczeństwo blokada cenzura cyberprzestępczość domena domeny e-mail firewall ftp hosting html kurs php piractwo procesory serwer serwery serwis społecznościowy
więcej tagów
Technologie
Czym się różnią procesory serwerowe od zwykłych
Kursy
Kurs CSS 2.1. Budujemy nowoczesne i stylowe witryny
Microsoft
Visual Web Developer 2005 Express Edition. Prosty sposób na tworzenie stron WWW
Google
Biuro w Sieci
Kursy
Kurs "ABC hostingu"
© 2007 by Webhosting.pl | Powered by home.pl | Kontakt | Reklama | Polityka prywatności
_uacct = "UA-2712831-1";
urchinTracker();
var pp_gemius_identifier = new String('p3XldnOByUbcszHKIpd_bPVnnOlFx5gJUp7qLSqRzzj.T7');
Wyszukiwarka
Podobne podstrony:
show listFadal Format 2 (AC) B807 12track listanonymous ftp sites list nl 2anonymous ftp sites list org 7Fadal Format 2 [MM] MW60 89Fadal Format 2 [PEP] M116 89 1List motywacyjnySGH Flasher Dumper v 07 dif formatKonwersja Filmów Z Płyt Dvd Do Formatu DivxBenedykt XVI 2007 07 07 list apostolski Summorum Pontyficum instrlist motywacyjny prosty informacja uzyskana od znajomych2więcej podobnych podstron