8. diel - Tvorba Bootstrap šablóny z PSD - Dokončenie pre desktop
V minulej lekcii, Tvorba Bootstrap šablóny z PSD - Dokončenie panela a navigácia , sme dokončili panel s tlačidlami, dodatočne nastylovali sekcii MODERNÉ BÝVANIE a začali pracovať na poslednej časti našej bootstrapové šablóny, navigačným menu. Dnes celú šablónu dokončíme!
Podčiarknutie a ostylování textu
Prvé, čím dnes začneme, bude ostylování textu v navigačnom menu. Text potrebujeme menší, s pozadím as podčiarknutím.
Presunieme sa teda do CSS súboru. Chceme, aby sa text podčiarkovali len
vtedy, keď cez neho prejdeme kurzorom. To znamená, že nás zaujíma selektor
.navbar-white-underline:hover. Túto triedu budeme prideľovať iba
<li>, teda si zjednodušíme prácu a použijeme
.navbar-white-underline li:hover.
Môžeme tak prejsť do HTML a triedu prideliť <ul>,
nemusíme ju dávať každému <li> zvlášť. Výsledkom
bude:
.navbar-white-underline li:hover { border-bottom: 2px solid white; }
Teraz ale nastane zrada. Celé navigačné menu začne pri prejdení myšou poskakovať. A to samozrejme nechceme. Zrazu totiž máme 2px rozdiel medzi
...koniec náhľadu článku...
Pokračuj ďalej
Došiel si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiovej sekcie.
ročné PREDPLATNÉ
44 €
mesačne, platené ročne (528 €)14 000+ lekcií, cvičení a testov
6 000+ ti zostane navždy
Neobmedzený prístup ku všetkým aktuálnym
aj pripravovaným kurzom.
Kúpiť iba tento kurz
Získaj okamžitý prístup ku kurzu bez
časového obmedzenia.
17 €
Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel
Obsah článku spadá pod licenciu Premium no-reselling, kúpou článku súhlasíš s Prevádzkovými podmienkami.
Komerčný článok (licencia no-reselling)
Tento článok vznikol na základe mnohoročných skúseností v odbore a opisuje vývoj profesionálneho komerčného produktu alebo jeho súčasti, ktorú možno priamo využiť za účelom zisku alebo k preniknutiu do komerčnej sféry IT odvetvia.
Tieto vrcholové znalosti sprístupňujeme samozrejme iba niektorým členom komunity, ktorí sa majú záujem vypracovať na profesionálov v odbore a preto sú k dispozícii len za kredity. Kód z článku môžete použiť pre jeden svoj komerčný projekt. Nie je ho však možné prepredávať (raz zakúpiť a následne predať ďalej v niekoľkých projektoch). Ak potrebujete širšie využitie kódu, radi sa s vami dohodneme na komerčnej licencii. Viac informácií nájdete v článku Licencia.
Ste pripravení stať sa profesionálmi v odbore? Stačí kliknúť.
Popis článku
Požadovaný článok má nasledujúci obsah:
V HTML a CSS tutoriálu dokončíme bootstrapovou šablónu, ktorá tak bude kompletný pre zobrazenie na veľkých zariadeniach.
