arkusze - Kurs HTML i CSS
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...Skrypt menu rozwijanego, otwieranego, wysuwanego Wymagana wiedza Listy definicyjne <dl>...</dl> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów, klasy selektorów i pozycjonowanie absolutne) Skrypt menu rozwijanego, otwieranego, wysuwanego Aby wstawić na swoją stronę menu rozwijane, postępuj według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku menu.js: /** * @author Sławomir Kokłowski {@link...
- Menu rozwijane, otwierane, wysuwane / Menu wysuwane
Normalnie pozycje menu są rozwijane począwszy od pierwszej do ostatniej, a zwijane od ostatniej do pierwszej. Można odwrócić te kolejności, dzięki czemu uzyskamy efekt wysuwania: <script> new Menu('menu0', '', false, true); </script> Przykład HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno
Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset...arkusz stylów <link "stylesheet"> <head> (...) <link rel="stylesheet" href="style.css"> (...) </head> gdzie "style.css" jest zewnętrznym arkuszem stylów. Natomiast znaki (...) oznaczają inne polecenia, które zwykle pojawiają się w nagłówku dokumentu, np. deklaracja strony kodowej. Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie...
- Menu drzewiaste / Skrypt menu drzewiastego
...Kolekcje dokumentów Wyrażenia regularne Wymagana wiedza Zagnieżdżanie wykazów <ul>...</ul> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów i klasy selektorów) Skrypt menu drzewiastego Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim: ul.tree { display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li...
- Oprawa graficzna / "Duszki" CSS
...szerokim (jedna obok drugiej). W ten sposób, nie licząc tła graficznego powielanego w obu kierunkach, każdy serwis można zbudować w oparciu o trzy arkusze z "duszkami" CSS: zwykły, poziomy i pionowy. Ponadto na jednym arkuszu nie warto mieszać ręcznie rysowanych ikon (które zwykle zapisujemy w formacie GIF lub PNG) z wielokolorowymi zdjęciami (zwykle zapisywane w JPG), ponieważ wtedy albo rozmiar pliku niewspółmiernie wzrośnie albo znacznie stracimy na jakości. Najczęściej jednak, chyba...
HTML5 / Nowe elementy HTML5Spis treści Wstęp Sekcje Nagłówki sekcji Znaczniki grupujące Semantyka tekstu Elementy osadzone Formularze Pole INPUT Elementy interaktywne Skrypty Wstęp Standard HTML5 nie jest już taki nowy, ale nadal mogą być do niego wprowadzane nowe znaczniki. Przeglądarki które ich jeszcze nie odsługują, zwykle próbują wyświetlać je w linii. Nie jest to zgodne z domyślnym sposobem prezentacji części z tych elementów określonym w specyfikacji. Aby ujednolicić sposób wyświetlania...
- Szablon strony na DIV-ach / Responsywny szablon
Spis treści Wstęp Powiększenie strony Skalowalny szablon Strona mobilna Responsive Web Design (RWD) Skalowanie Responsywne obrazki Punkty przeskoku Wstęp Nie powinno być chyba dla nikogo zaskoczeniem, że urządzenia mobilne (smartfony, tablety) są dzisiaj używane tak samo chętnie lub nawet częściej niż tradycyjne komputery stacjonarne czy laptopy. Cechą wspólną tego typu urządzeń zwykle jest mniejszy ekran. W końcu trochę dziwnie by wyglądało taszczenie pod pachą...
- Ikony (symbole) / Akcje interfejsu użytkownika
...przełącznika switch_access switch_access Gotowa strzałka przesyłania arrow_upload_ready arrow_upload_ready Średni błąd error_med error_med Dolne arkusze bottom_sheets bottom_sheets Bańki bubbles bubbles Modelowanie modeling modeling Popraw amend amend Skocz do elementu jump_to_element jump_to_element Kółko wyniku output_circle output_circle Alert wdrożonego kodu deployed_code_alert deployed_code_alert Automatyczne ukrywanie półki shelf_auto_hide shelf_auto_hide Zamknij dolny panel...
- Ikony (symbole) / Formatowanie tekstu
Możesz szybko wyszukać dowolną ikonę używając w tym celu specjalnego generatora. Wybierz wariant ikony, a następnie kliknij przycisk "Pobierz". Możesz dopasować kolor i rozmiar przy użyciu kontrolek znajdujących się w nagłówku tabeli. Nazwa Wariant Opis description description Kopia treści content_copy content_copy Pulpit nawigacyjny dashboard dashboard Edytuj notatkę edit_note edit_note Książka menu menu_book menu_book Widok siatki grid_view grid_view Lista list list Folder folder...
- Wstawianie stylów CSS / Import arkusza stylów @import
...dodatkowych znaczników <link rel="Stylesheet">. W takim przypadku dołącza się tylko jeden zewnętrzny plik *.css, a w nim importuje pozostałe arkusze. UWAGA! Jeżeli polecenie importu znajduje się w zewnętrznym arkuszu stylów, to relatywną ścieżkę dostępu do arkusza importowanego należy konstruować względem położenia arkusza CSS, w którym jest wstawione polecenie @import, a nie względem dokumentu HTML! Wszystkie polecenia importu (może ich być kilka) muszą się znajdować zaraz na...