Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

woras

Poziome menu zakładki

Promowane odpowiedzi

Całość kodu, składa się tylko z HTML i CSS. Chyba nie ma nic w tym trudnego, pytania w komentarzach.

HTML

Tworzymy sobie poziome menu na zakładkach w HTML...

Rozpocznij listę znacznikiem <ul> , aby uzyskać listę wypunktowaną i zakończ znacznikiem </ul>

Każda pozycja listy powinna zaczynać się znacznikiem <li> i kończyć znacznikiem </li>.

Gotowy kod HTMl:
 

<ul> 
<li><a href="#">Rejestracja</a><li> 
</ul>

Między <ul> a </ul>, możemy tworzyć więcej zakładek do menu, tym samym sposobem co tu

<li><a href="#">Rejestracja</a><li>

Teraz nadamy trochę koloru, naszemu menu.

Gotowy kod CSS

<style> 
ul, ul li {  
       display: block;  
       list-style: none;  
       margin: 0;  
       padding: 0;  
}  
ul {  
       border-bottom: 1px solid #888;  
       float: left;  
       width: 100%;  
       padding-left: 20px;  
}  
ul li {  
       float: left;  
       margin-right: 10px;  
}  
ul a:link, ul a:visited {  
width: 100px;  
       text-decoration: none;  
       display: block;  
       background-color: navy;  
       color: white;  
       padding: 5px 10px;  
       border: 1px solid #888;  
       position: relative;  
       top: 1px;  
       font-weight: bold;  
}  
#current a {  
       background-color: #33FFFF;  
       border-bottom-color: #fff;  
       color: black;  
}  
ul a:hover {  
       background-color: #fff;  
       border-bottom-color: #fff;  
       color: black;  
       border-bottom: 1px solid #888;  
} 
</style>  

Już mi się opisywać tego nie chciało, każdy kto zna na poziomie podstawowym HTML/CSS powinien wiedzieć, co w tym kodzie się znajduje, w razie jakiś problemów czy pytań proszę kierować w tym temacie.

Jak widać nasze menu składa się z 2 kolorów Niebieski ciemny i jasny, biały pojawia się po najechaniu myszką na jedną z naszych zakładek w menu. Kolorki oczywiście można sobie pozmieniać w .css jak i rozmieszczenie.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

  • Podobna zawartość

    • Przez Lord Fenrir

       
      Witajcie, jest to kolejny poradnik zaliczający się do kompendium początkującego Web Developera napisany po dość długim odstępie czasu od ostatniego tutoriala, który możecie przeczytać tutaj - Wstęp do RWD jako obowiązkowa lektura każdego Juniora. Ostatnimi czasy przesiadując na wielu grupach dotyczących Front-Endu czy też czytając posty na forach napotkałem problem jakim jest błędne zastosowanie frameworków CSS przez początkujących programistów. Dlatego postanowiłem z moją wiedzą wyjść na przeciw i poruszyć kilka kwestii, które moim zdaniem na podstawie obserwacji nawet tutaj, należy wyjaśnić.
       
      Co to jest ten cały Framework CSS?
      Więc zaczynając od początku, Framework CSS jest to po prostu zbiór gotowych klas CSS, komponentów, interaktywnych elementów, które można od razu wykorzystać na swoją stronę internetową bądź aplikacje bez potrzeby pisania całej struktury i dbania o dostępność, która w dzisiejszych czasach czy tego chcemy czy nie obejmuje więcej niż samą responsywność. Przykładowo podczas wdrążania nawigacji na naszą stronę nie musimy się przejmować tym, że zapomnimy nadać odpowiednie style dla jakiegoś elementu bądź zapomnimy o widoku na średniej wielkości ekranach gdyż każdy framework zrobi to za nas, a my jedynie musimy to dostosować pod nasze wymagania. W dobie dzisiejszego internetu do najpopularniejszych frameworków należą m.in. Bootstrap oraz Foundation, z czego ten pierwszy jakiś czas temu dostał potężnego update, który sprawia, że korzystanie z niego jest jeszcze bardziej przyjemniejsze niż było.
       
       

       
      No dobra, ale co złego jest w stosowaniu takiego narzędzia?
      Hmm... wszystko i nic. Przede wszystkim warto sobie to zapisać i zapamiętać, że wszystkie frameworki i już nie tylko CSS, ale poradnik skupia się na nich więc nie będę wybiegał poza obszar tematyczny, pomagają zbudować szybko i dokładnie stronę czy aplikacje bez dokładnej znajomości języka HTML czy CSS. Więc o co ten cały szum? Otóż jako Front-End Dev (tylko i wyłącznie) będziesz pisał projekty, które nie będą korzystały z takich pomocy jak Bootstrap, sam będziesz musiał zadbać o to aby aplikacja czy też strona miała pełną dostępność i tutaj kłania się sposób stosowania frameworka. Jeżeli dopiero uczysz się CSS-a czy HTML-a i nie masz dużego doświadczenia w budowaniu witryn, to nie używaj klocków, które oferują frameworki gdyż w ten sposób poza bezmyślnym kopiowaniem nie nauczysz się sposobu działania i zachowywania danego komponentu. A jak wspomniałem wcześniej trafi się projekt, w którym zamiast korzystać z gotowych rozwiązań sam będziesz musiał bądź musiała zaprojektować strukturę i logikę tak, by później Twój twór stał się gotowcem, z którego inni będą korzystać. Dodatkowo wielu początkujących Developerów robi jeden, ten sam błąd. Decydując się na instalację i używanie frameworka importują jego całą zawartość mimo, że w rzeczywistości wykorzystują tylko kilka procent z tego co oferuje. Tylko po co? Wszystkie znane mi frameworki oferują możliwość dowolnego dostosowania narzędzia po przez wybranie tego co jest nam niezbędne do budowy strony, tak jak to było wygodne w przypadku Bootstrapa 3.
       
      Programiści to lenie!
      Tak. Jesteśmy leniami i wiele rzeczy nam się nie chce bądź coś nam się nie podoba i właśnie z takich przypadkach rodzą się frameworki, które ułatwiają wykonanie pewnej czynności. Narzędzia te skracają czas tworzenia dzięki czemu można skupić się na funkcjonalności niż wyglądzie, ale w przypadku gdy dopiero zaczynamy i nie posiadamy wystarczającej wiedzy pozwalającej stworzyć dokładnie ten sam komponent bez korzystania z frameworka, to musimy niestety zacisnąć zęby i opanować podstawy, które później pomogą nam zrozumieć zasadę działania komponentów we frameworkach.
       
      Podsumowanie
      Na pewno poradnik ten różnicy się znacznie od pozostałych. Nie wyjaśnia dosłownie jak czegoś używać, a jedynie stara się wytłumaczyć dlaczego tak, a nie inaczej. Myślę, że to świetna odskocznia i idealnie pasuje do głównej myśli jaka nasuwa się czytając cały tutorial, a dokładnie mówiąc - Żeby podczas nauki nie kopiować bezmyślnie linijek kodu. Różne frameworki są na pewno dobrymi i ciekawymi narzędziami, które znacznie ułatwiają i przyspieszają pracę, ale też nie są zalecana do używania przez każdego, a już na pewno nie przez kogoś kto o kodowaniu witryn i aplikacji ma pojęcie znikome. Dlatego mówię i będę prawdopodobnie to mówić, ale używanie frameworka w celach edukacyjnych ma się nijak do efektów, które chce się osiągnąć.
       
      Podziękowania dla @El Profesor za text review.
    • Przez SeXpLoSioN
      Witam mam takie pytanko bo wstawiłem video w mp4 jako tło strony i tu nasuwa się jedno moje pytanie czy jest możliwość by video odtwarzało się z dźwiękiem ?.
      Mam wstawiony ten kod na stronie przy każdej próbie usunięcia mute czy modyfikacji go po tym po prostu nie wczytuje tła zbytnio się na tym nie znam.
       
×