Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/42-hiperlacza-ciekawe-efekty.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
Hiperłącza - ciekawe efekty |
Wpisany przez Patryk yarpo Jar | |||
piątek, 18 września 2009 02:59 | |||
Będzie to dział, który chyba najbadziej się każdemu z was przyda. Pamiętam, że pierwszy raz użyłem CSS do zmiany wyglądu linków. Na tej lekcji nauczysz się nie tylko jak można spowodować zmianę koloru textu, ale również jak można osiągać bardzo wciekawe efekty, jak zawsze, przy minimalnym nakładzie pracy. Będziemy dalej kontynuować pracę nad twoją stronką. Dodaj do pliku 'style.css':a { text-decoration:none; // 1 color: black} // 2 Opis: Dzięki temu, że nie użyłem tu klasy wszystkie 'a' będą miały te właściwości wyżej opisane - dziedziczenie. Teraz czas, aby opisać linki, które będą w menu po lewej w lewej komórce środkowej tabeli. Dodaj do pliku 'style.css':a.lewe { // 1 border-left: 1px solid white; // 2 border-bottom: 1px solid white; width:90%; // 3 background-color:#CBD1D3; // 4 display: block; } // 5 a.lewe:hover { // 6 background-color: white;} // 7 Opis: Nadszedł czas, aby to wszystko jakoś ze sobą połączyć(twoją stronę i nowe klasy). Otwórz plik 'index.htm' i znajdź pierwszą od lewej komórkę drugiej (środkowej tabeli).
<td class="menu">
<tr>
Fragmenty kodu o kolorze czarnym powinny się już znajdować w kodzie stron [jest to druga tabela, pierwsza komórka od lewej]. Nowe fragmenty są niebieskie. Podobnych zmian dokonaj na wszystkich stronach, które dotąd zrobiłeś. Powinny wyglądać prawie tak samo. Liczba linków jest zależna od twojej woli. Poprobuj. Zrób jedną stronę o sobie (skopiuj 'index.htm' zmień jego nazwę i napisz kilka zdań o własnej osobie), drugą z listami - np. lista zakupów (tu nie chodzi o treść), kolejną z formularzami (nie będą działać, gdyż wstawisz jedynie pola, ale popróbuj), następny link niech uruchamia program pocztowy [ >------Rada-----<Nie musisz za każdym razem pisać od nowa kodu. Stwórz jedną stronę, która będzie mieć wszystko na swoim miejscu, a nastepnie skopiuj ją x razy i pozmieniaj jedynie nazwy nowootrzymanych plików. Tags:
|