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
Minul 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émiové sekcie.
Obmedzená ponuka: Nauč sa všetko a ušetri
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íš so zmluvný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.
Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.
