Helion dhtml site
H1{ font:bold 20pt/20pt Verdana, Tahoma, Arial,sans-serif;}
H2{ font:normal 18pt/18pt Verdana, Tahoma, Arial,sans-serif;}
P{
font : normal 1.9ex/2.2ex arial, sans-serif;
text-indent : 2%;
}
.meenu{
font:normal 10pt/10pt Arial,Verdana, Tahoma, sans-serif;
}
A.menu{
font:normal 13pt/12pt Arial,Verdana, Tahoma, sans-serif;
}
Dziś w menuPiotrX
[strona główna] [skrypty]
Każdy na pewno lubi, gdy odwiedzana strona wygląda ładnie. Strony zawierające grafikę są przeważnie bardzo ładne, ale mają podstawową wadę - ich wczytywanie trwa bardzo długo. Dla odmiany strony zawierające głównie tekst - są już z definicji nieładne, ale wczytują się bardzo szybko. Nikogo nie odwiodę od stosowania grafiki, więc chciałbym przedstawić mały przykład, co można zrobić z tekstem - aby wyglądał ładnie (IMHO, oczywiście ;-).
Nie ma jak w menu
Jeżeli zdecydowałeś się oprzeć stronę na tekście, to na pewno rozmyślasz nad stosownym systemem nawigacji - czyli menu. Najbardziej oczywistym rozwiązaniem będzie jak sądzę układ stary jak świat, czyli:
[pozycja 1] [pozycja 2] [pozycja 3]
To jest rzeczywiście wiekowe rozwiązanie, ale przetrwało próbę czasu - i wciąż cieszy nas swym widokiem na wielu stronach. Nie łatwo jest stworzyć coś równie doskonałego w swej prostocie, ale po co tworzyć nowe, skoro można ulepszyć stare. Skoro już mowa o ulepszaniu, to zapraszam do następnego rozdziału, o wiele mówiącym tytule:
Coraz świeższe menu
Na początku trochę kodu -
<html>
<head>
<title>Menu</title>
<style type="text/css">
.menu{font-family: Arial,sans-serif;
font-size : 10 pt;}
.link{font-size:13pt; }
</style>
</head>
<body>
<div class="menu">
[<a href="#" class="link">pozycja 1</a>]
[<a href="#" class="link">pozycja 2</a>]
[<a href="#" class="link">pozycja 3</a>]
</div>
</body>
</html>
- który tworzy następujący efekt:
[Pozycja 1] {Pozycja 2} (Pozycja 3)
Przykład prawie niczym nie różni się od swojego "starszego brata", ale przyjrzyj się uważniej... jeszcze uważniej... tak - nawiasy zamykające odnośniki są wyraźnie mniejsze niż wyżej wymienione odnośniki (dla wzmocnienia efektu - użyłem kilku rodzajów nawiasów).
Pozwolę sobie wyjaśnić w czym rzecz, otóż w przykładzie zastosowałem element <DIV> z klasą .menu, w którym zamknięte są odnośniki (<A>) z klasą .link. Dalej działa już CSS, czyli klasa .menu, ze swoją czcionką, o trzy punkty mniejszą od klasy .link, którą potraktowane są odnośniki.
Mała rzecz, a cieszy :-).
© Wydawnictwo Helion
Wyszukiwarka
Podobne podstrony:
listart cgi id=3listart cgi id=22listart cgi id=25listart cgi id=5listart cgi id=24listart cgi id=2listart cgi id=16listart cgi id=26listart cgi id=15listart cgi id=18listart cgi id=4listart cgi id=4listart cgi id=20listart cgi id=21listart cgi id=6listart cgi id=10listart cgi id=11listart cgi id=19listart cgi id=28więcej podobnych podstron