Meniu derulant simplu css. Cum se creează un meniu dropdown în CSS
Să creăm un meniu de navigare orizontal simplu pentru site. Pentru a face acest lucru, vom folosi tehnici simple care vor avea ca rezultat afișarea corectă a meniului nostru în toate browserele.
Deci, să începem. Să creăm o listă cu numele meniului nostru. Numele articolelor să fie: „Acasă”, „Știri”, „Produse”, „Servicii”, „Parteneri”, „Contacte”. Creați un fișier nou numit menu.html, de exemplu, utilizând programul Dreamweawer sau folosind un blocnotes obișnuit. În ea, între etichetele corpului ne plasăm meniul. Aceasta este o listă obișnuită cu marcatori de ul cu elemente li. Desigur, facem din fiecare element de meniu un link, unde în loc de URL inserăm codul hash #. Folosind Photoshop, creați o imagine cu dimensiunea de 3x30 px, cu o umplere în gradient, așa cum se arată în figura de mai jos. Vom salva fișierul în format GIF. Să-i spunem bg.gif. Această imagine va acționa ca imagine de fundal a meniului nostru.
Iată conținutul fișierului menu.html:
- Acasă
- Știri
- Produse
- Servicii
- Parteneri
- Contacte
Acum să creăm separat un fișier de stil numit main.css. Lista sa este prezentată în întregime mai jos.
Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*aliniază lista la stânga*/ width:auto;/*setează lățimea auto pe baza tipul și conținutul listei */ background-image: url(bg.gif /*set the background image*/ background-repeat:repeat-x /*repetă imaginea noastră pe orizontală*/ list-style:none); /*elimină marcatorii de listă*/ background-color:#4778c3 /*setează culoarea de fundal pentru imagine*/ font-size:13px /*set the font size*/ font-family:Arial, Helvetica, sans-serif; ; /*setează fontul*/ ) ul li ( float:left; /*aliniază elementele listei la stânga*/ ) ul a ( display:block; /*reprezintă linkurile de meniu ca elemente de bloc*/ width:100px; /* setați dimensiunea blocului*/ înălțimea: 30px /* și înălțimea blocului*/ text-align:center/*line-height: /*line spacing*/ text-decoration; eliminați sublinierea din linkuri*/ color:#fff /*link text color - white*/ border-right:#fff solid 1px /*border pe partea dreaptă a blocului (1px white line)*/ ; hover (culoare:#ccc; /*link-ul își schimbă culoarea când trece cu mouse-ul peste*/ )
Cred că nu ar trebui să existe întrebări despre conținutul fișierului main.css. Am scris sfaturile în comentarii suficient de detaliat și clar, așa că nu mă voi repeta. Nu uitați să-l conectați la pagina noastră menu.html folosind
Rezuma. Drept urmare, am obținut un meniu orizontal complet între browsere, care arată la fel nu numai în toate browserele moderne, ci și în rarități precum IE 5.5 și IE 6.0. Toate elementele de meniu sunt prezentate ca elemente de bloc și au aceleași dimensiuni de 100 px lățime și 30 px înălțime. Ca separator pentru elementele de meniu, un design de element bloc este utilizat folosind un chenar alb din dreapta de 1px grosime. Acesta este practic cel mai simplu mod de a implementa un meniu orizontal. Desigur, dacă doriți, îl puteți modifica, îl puteți face mai frumos și mai funcțional folosind imaginație, proprietăți CSS și elemente grafice suplimentare. bine si meniul nostru orizontal arata cam asa:
Avantajele acestei soluții:
Usor de facut
Cod simplu
Fără tabele sau javascript
Compatibilitate între browsere: meniul arată la fel în toate browserele
Se folosește un singur desen
Cod minim pe pagina menu.html
Cod minim pentru implementarea stilurilor în main.css
Fișierele folosite în acest exemplu pot fi descărcate în arhivă
Dacă site-ul dvs. este mai mult decât o singură pagină web, atunci ar trebui să luați în considerare adăugarea unei bare de navigare (meniu). Meniul este o secțiune a unui site web concepută pentru a ajuta vizitatorii să navigheze pe site. Orice meniu este o listă de link-uri care duc la paginile interne ale site-ului. Cel mai simplu mod de a adăuga o bară de navigare pe site-ul dvs. este să creați un meniu folosind CSS și HTML.
Meniu vertical
Primul pas în crearea unui meniu vertical este crearea unei liste cu marcatori. De asemenea, va trebui să putem identifica lista, așa că îi vom adăuga un atribut id cu identificatorul „navbar”. Fiecare element
Următoarea noastră sarcină este să resetam stilurile implicite ale listei. Trebuie să eliminăm căptușeala exterioară și interioară din listă în sine și marcatoarele din articolele din listă. Apoi setați lățimea dorită:
#navbar (marja: 0; padding: 0; list-style-type: niciunul; lățime: 100px; )
Acum este timpul să stilați link-urile în sine. Le vom adăuga o culoare de fundal, vom modifica parametrii textului: culoare, dimensiunea și greutatea fontului, vom elimina sublinierea, vom adăuga mici indentații și vom redefini afișajul element de la inline la bloc. În plus, cadrele din stânga și de jos au fost adăugate elementelor din listă.
Cea mai importantă parte a modificărilor noastre este redefinirea elementelor inline pentru a bloca elemente. Acum linkurile noastre ocupă tot spațiul disponibil al articolelor din listă, adică pentru a urmări linkul nu mai trebuie să plasăm cursorul exact peste text.
#navbar a ( culoare de fundal: #949494; culoare: #fff; umplutură: 5px; text-decor: niciunul; font-weight: bold; margine-stânga: 5px solid #33ADFF; display: block; ) #navbar li ( chenar-stânga: 10px solid #666 chenar-jos: 1px solid #666;
Am combinat tot codul descris mai sus într-un singur exemplu, acum făcând clic pe butonul de încercare, puteți accesa pagina de exemplu și vedeți rezultatul:
Când treceți mouse-ul peste un element de meniu, aspectul acestuia se poate schimba, atrăgând atenția utilizatorului. Puteți crea un astfel de efect folosind pseudo-class:hover.
Să revenim la exemplul de meniu vertical discutat mai devreme și să adăugăm următoarea regulă la foaia de stil:
#navbar a:hover (culoare de fundal: #666; chenar-stânga: 5px solid #3333FF; ) Încercați »
Meniu orizontal
În exemplul anterior, ne-am uitat la bara de navigare verticală, care se găsește cel mai adesea pe site-urile web din stânga sau dreapta zonei principale de conținut. Cu toate acestea, meniurile cu legături de navigare sunt adesea situate orizontal în partea de sus a paginii web.
Un meniu orizontal poate fi creat prin stilarea unei liste obișnuite. Afișează proprietatea elementelor
Pentru a plasa elementele de meniu pe orizontală, creați mai întâi o listă cu marcatori cu linkuri:
Să scriem câteva reguli pentru lista noastră care resetează stilul implicit folosit pentru liste și să redefinim elementele listei de la bloc la inline:
#navbar (marja: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Încercați »
Acum tot ce trebuie să facem este să definim stilul pentru meniul nostru orizontal:
#navbar (marja: 0; umplutură: 0; list-style-type: niciunul; chenar: 2px solid #0066FF; chenar-radius: 20px 5px; lățime: 550px; text-align: center; culoare de fundal: #33ADFF; ) #navbar a ( culoare: #fff; umplutură: 5px 10px; text-decor: niciunul; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( chenar-raza: 20px 5px ; culoare de fundal: #0066FF ) Încercați »
Meniu derulant
Meniul pe care îl vom crea va avea legături principale de navigare situate în bara de navigare orizontală și sub-articole care vor apărea numai atunci când cursorul mouse-ului trece peste elementul de meniu la care se referă aceste sub-articole.
Mai întâi trebuie să creăm structura HTML a meniului nostru. Vom plasa principalele legături de navigare într-o listă cu marcatori:
Vom plasa sub-articolele într-o listă separată, cuibându-l în element
Încerca "
Acum să începem să scriem codul CSS. Mai întâi, trebuie să ascundeți lista cu sub-articole folosind afișarea: declarația nici unul, astfel încât acestea să nu fie afișate tot timpul pe pagina web. Pentru a afișa sub-articole, avem nevoie de asta atunci când trecem cu mouse-ul peste un element
#navbar ul ( afișare: niciunul; ) #navbar li:hover ul ( afișare: blocare; )
Înlăturăm indentările și marcajele implicite din ambele liste. Facem elemente de listă cu link-uri de navigare plutitoare, formând un meniu orizontal, dar pentru elementele de listă care conțin sub-articole setăm float: none; astfel încât să apară unul sub celălalt.
#navbar, #navbar ul ( margine: 0; padding: 0; list-style-type: none; ) #navbar li ( float: stânga; ) #navbar ul li ( float: none; )
Apoi, trebuie să ne asigurăm că submeniul nostru drop-down nu împinge în jos conținutul de sub bara de navigare. Pentru a face acest lucru, vom seta poziţia elementelor din listă: relativă; , și o listă care conține sub-articole poziție: absolut; și adăugați o proprietate de top cu o valoare de 100%, astfel încât submeniul poziționat absolut să apară exact sub link.
#navbar ul ( afișare: niciunul; poziție: absolut; sus: 100%; ) #navbar li ( float: stânga; poziție: relativ; ) #navbar ( înălțime: 30px; ) Încercați »
Înălțimea listei părinte a fost adăugată intenționat, deoarece browserele nu consideră conținutul plutitor ca conținut element, fără a adăuga înălțime lista noastră va fi ignorată de browser, iar conținutul care urmează listei se va încheia în meniul nostru.
Acum trebuie doar să stilăm ambele liste și meniul drop-down va fi gata:
#navbar ul ( afișare: niciuna; culoare de fundal: #f90; poziție: absolut; sus: 100%; ) #navbar li:hover ul ( afișare: bloc; ) #navbar, #navbar ul (marja: 0; umplutură: 0; list-style-type: nici unul; înălțime: 100%; ) #navbar li a ( afișaj: bloc; umplutură: 6px; lățime: 100px; culoare: #fff; text-decoration: none; text-align: center; ) #navbar ul li ( float: none; ) #navbar li:hover (culoare de fundal: #f90; ) #navbar ul li:hover (culoare de fundal: #666; )
1. Meniu jQuery luminos vertical
2. Efect cool. Meniu de dans.
4. Lista derulantă folosind jQuery
Stil excelent al elementului de interfață sub forma unei liste derulante.
Când treceți mouse-ul peste buton, în partea de sus apare un panou.
6. Plugin jQuery „MobilyBlocks” pentru afișarea unui meniu radial
7. Meniu folosind sprites
Meniu javascript animat cu efect de strălucire.
Meniu proaspăt, frumos folosind jQuery.
9. Meniul jQuery „GarageDoor”.
10. Meniul de derulare vertical jQuery
Implementarea unui meniu cu un număr mare de articole. Derulează când mutați cursorul mouse-ului în sus sau în jos.
11. Designul listei derulante jQuery
12. Plugin de navigare în pagină
Derulare lină la secțiunea dorită de pe pagină. Plugin de navigare jQuery One Page.
13. Plugin „Meniul conținut animat”
Nou plugin jQuery. Implementare excelentă a navigării pe site animate. Când parcurgeți elementele de meniu, apare un bloc cu o descriere și posibile link-uri și, în funcție de elementul selectat, se schimbă fundalul paginii, care se întinde pentru a umple întregul ecran, indiferent de dimensiunea ferestrei browserului. Asigurați-vă că consultați pagina demo.
14. Plugin de meniu jQuery „Sweet Menu”.
Meniu animat cu elemente pop-up.
15. S-a remediat meniul jQuery
Când derulați în jos în pagină, meniul rămâne fix în partea de sus a ecranului.
16. Meniuri de derulare pentru kitul de glisare
Pentru a implementa un meniu vertical cu un număr mare de articole. Derularea articolelor se face folosind rotița mouse-ului sau folosind link-urile „Anterior” și „Următorul”.
17. Meniu elegant CSS3
18. Noul meniu CSS3 în stil Apple
Meniu nou în stil Apple. Pare mai întunecat decât înainte, dar nu mai puțin drăguț.
19. Meniul jQuery original
Meniu derulant cu efect de fundal. Subelementele din meniu se extind în sus. Când treceți cu mouse-ul peste un element de meniu, imaginea de fundal se schimbă.
20. Meniu animat cu jQuery
Meniu animat. Elementele de meniu sunt prezentate sub formă de pictograme și descrieri. Mai multe efecte grozave când treceți mouse-ul peste un element de meniu. Există 8 efecte, pentru a le vedea pe toate - urmați linkurile Exemple1-Exemple8 de pe pagina demo.
21. „Meniu derulare” Meniu XML cu defilare
Meniu de defilare pe verticală și orizontală. O soluție bună dacă există un număr mare de articole în meniu.
22. Meniul contextual pe un site web folosind jQuery
Un meniu apare când faceți clic dreapta pe o anumită zonă.
23. Meniu circular pe două niveluri pentru site
Când selectați un element de meniu, elementele de submeniu sunt afișate în partea dreaptă.
24. Meniul jQuery CSS3 cu efect de estompare „Blur Menu” CSS3
Meniul original jQuery CSS3 vine în 7 stiluri diferite. Când treceți mouse-ul peste unul dintre elementele de meniu, restul par să se estompeze.
25. Câteva meniuri jQuery CSS3 animate spectaculoase
10 meniuri animate creative. Meniuri CSS3 orizontale și verticale cu diferite efecte și tranziții.
Arhiva include și fișierul PSD de meniu original.
27. Meniul MagicLine
Fundalul sau sublinierea unui element de meniu urmează mouse-ul cu o ușoară întârziere, în timp ce fundalul își schimbă ușor culoarea pe măsură ce se deplasează de la un articol la altul. Efect foarte frumos, pare neobișnuit. Atenție: efectul nu funcționează în operă
28. Bule de imagine
Un efect excelent când treceți mouse-ul peste una dintre imagini. Efectul amintește oarecum de jQDock descris mai sus.
31. Meniuri jQuery interesante cu diverse efecte
Meniu orizontal, vertical. Efecte interesante.
32. Excelent meniu jQuery în stil Apple
34. Meniu jQuery cu un efect interesant
36. Meniu proaspăt cu un efect interesant folosind jQuery
Un efect foarte interesant. Perfect pentru proiectarea site-urilor web de portofoliu.
Efectul interesant al miniaturilor care apar la hover.
40. Listă derulantă cu derulare automată
Efect de tranziție plăcut între articole.
42. Excelent meniu jQuery
43. Frumos mare meniu jQuery
44. Meniuri de derulare jQuery
Elementele de meniu sunt prezentate sub formă de miniaturi.
46. Meniul de navigare radial jQuery
47. Meniul CSS și jQuery
O bară de navigare cu o casetă de căutare care devine translucidă pe măsură ce derulați în jos pe pagină.
48. Meniul jQuery orizontal
49. Meniul jQuery vertical
Meniu vertical grozav. Când treceți cursorul, apare un element de meniu.
50. Meniul jQuery orizontal
Un efect interesant când treceți cursorul peste un element de meniu.
52. Meniul dropdown jQuery
Când treceți mouse-ul peste meniu, vor apărea elementele acestuia. Elementele care apar sunt afișate sub formă de arc, a cărui rază o puteți seta la configurarea pluginului. În unele browsere nu veți vedea un arc de afișare, meniul va fi afișat direct, dar acest lucru nu va strica impresia generală a implementării acestui meniu jQuery.
53. Bara de navigare CSS și jQuery
Un efect interesant când treceți mouse-ul peste un element de meniu.
54. Panoul pop-up jQuery
Meniu animat proaspăt în tonuri de gri.
58. Navigare pe coloană pe site folosind jQuery
O soluție interesantă pentru navigație, care este prezentată sub formă de dungi verticale. Când treceți mouse-ul peste aceste bare, apar o imagine pentru element și o listă de submeniuri. Când faceți clic pe un element de submeniu, apare o pagină cu o descriere. Această implementare este perfectă pentru site-uri promoționale sau prezentări. Asigurați-vă că verificați demo-ul pluginului.
59. Navigare pe site jQuery
Navigarea pe site este prezentată sub formă de 4 imagini, când treceți cu mouse-ul peste ele veți observa un efect animat interesant.
60. Bara de navigare derulează cu conținut
Panoul de navigare. Făcând clic pe săgeată, pagina derulează. Navigarea derulează împreună cu conținutul paginii.
61. Panoul jQuery cu diverse servicii sociale
62. Meniu jQuery animat îngrijit
63. Meniul jQuery „Penele de acuarelă”.
O zi bună tuturor celor care citesc acum această publicație. Astăzi vreau să vă povestesc despre unul dintre instrumentele de creare a site-urilor web de care nicio resursă web nu se poate lipsi. Acesta este meniul site-ului sau cum se spune și harta site-ului. Astăzi există un număr nelimitat de tipuri și subtipuri de meniuri.
Dezvoltatorii de magazine online, bloguri, servicii educaționale și alte resurse experimentează și creează din ce în ce mai multe hărți noi și neobișnuite. După ce ați citit articolul, veți afla în ce grupuri principale sunt împărțite toate tipurile de panouri de navigare, veți putea încerca fiecare dintre ele și, de asemenea, veți afla cum să scrieți codul de meniu pentru un site web html. Acum să trecem la treabă!
Instrumente pentru crearea unei bare de navigare
Există mai multe moduri de a crea un meniu în limbaj de marcare. Conceptul lor de bază este utilizarea unei liste nenumerotate. Astfel, în html 4, care ne este familiar, dezvoltatorii scriu etichete pe pagină
- Și
- .
După cum sa menționat în publicațiile anterioare, elementul pereche
- creează o listă cu marcatori și
- - un element al listei. Pentru claritate, să scriem codul pentru un meniu simplu:
Navigare Navigare pe site
- Acasă
- Știrile săptămânii
- Progrese tehnologice
- conversație
Cu toate acestea, odată cu apariția platformei, limbajul de marcare a fost completat cu etichete suplimentare. De aceea meniul site-urilor web moderne este creat folosind un special etichetă< meniu>. În uz, acest element nu este diferit de listele cu marcatori.
În loc de unul < ul> este prescris < meniu>. Cu toate acestea, diferențe semnificative apar atunci când sunt judecate din partea muncii. Deci, al doilea exemplu accelerează munca programelor de căutare și a roboților în . Când analizează structura site-ului, ei înțeleg imediat că această bucată de cod este responsabilă pentru harta site-ului.
Există meniuri orizontale, verticale și derulante. Uneori, bara de navigare este concepută ca o imagine. Deoarece segmentul de tehnologie s-a extins, serviciile web sunt adaptate, de exemplu. Structura paginii se adaptează automat la dimensiunea ecranului dispozitivului. Să ne uităm la grupurile de meniuri enumerate.
Să creăm un model de navigare orizontal
Acest tip de navigare este cel mai popular. Când panoul este proiectat orizontal, toate elementele de meniu sunt situate în antetul paginii sau în „subsol” (uneori elementele de navigare sunt duplicate, apărând simultan atât în partea de sus, cât și în partea de jos).
De exemplu, vom crea un panou orizontal, ale cărui elemente de meniu vor fi proiectate folosind CSS (cascading style sheets), sau mai degrabă transformate. Deci, fiecare element individual va fi amplasat într-un dreptunghi teșit. Intrigat?
Pentru transformare folosim o proprietate css numită transforma. Pentru a specifica o transformare, utilizați funcția încorporată skewX, în care unghiul de înclinare este indicat în grade.
Din păcate, fiecare browser funcționează cu această proprietate în felul său, în ciuda standardelor prescrise. Prin urmare, au fost create prefixe speciale pentru a indica acest lucru:
- -ms- (Internet Explorer)
- -o- (Operă)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
Acum să aplicăm cunoștințele dobândite pentru a scrie un exemplu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Panou orizontal Panou orizontal Și acum pe verticală. Am zis vertical!
Pentru al doilea program folosim codul anterior ca bază. Am vrut ca elementele mele verticale din meniu să aibă colțuri rotunjite, mai degrabă decât teșite.
Pentru a face acest lucru, am folosit o altă proprietate css hotar-raza.
În articolele anterioare am lucrat deja cu acest parametru, așa că nu cred că vor fi dificultăți în înțelegerea funcționării acestuia.
Panou vertical După cum ați observat deja, principala modificare a acestui cod este absența unei declarații display: inline-block, care era de fapt responsabil pentru dispunerea orizontală a punctelor de navigație.
Sub-articole din meniu: listă derulantă
Ne-am uitat la principalele grupuri de panouri de navigare, dar există mai multe varietăți sau, mai bine, suplimente.
Uneori apar situații când unele dintre puncte le completează pe cele principale. În acest caz, nu puteți face fără liste derulante. Ele sunt create prin transformări folosind instrumente CSS.
Mai jos am atașat codul unui mic program care implementează această abordare.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Lista verticală Lista verticală De la autor: Vă urez bun venit pe blogul nostru despre crearea site-ului web. Aceasta este o serie de articole dedicate noii specificații și astăzi aș dori să vă spun cum să creați un meniu în HTML5 și cum diferă acest proces de același din versiunile anterioare ale limbajului.
Care sunt diferențele
În primul rând, aș dori să spun că specificația nu este atât de nouă - și-a început dezvoltarea în 2009. De fapt, de atunci a existat o dezvoltare constantă - noi funcții apar în html5, browserele moderne acceptă din ce în ce mai mult aceleași caracteristici, astfel încât în curând va fi posibil să vorbim despre suport complet pentru această tehnologie, deși nu este un singur întreg, este mai degrabă un set de noi posibilități, fiecare dintre acestea fiind independentă.
Ei bine, bine, dar ce este diferit la crearea navigației principale (meniu), deoarece citiți un articol pe acest subiect, atunci ar trebui să existe cu siguranță unele diferențe. Ei bine, cum a fost creat meniul înainte? De obicei, a fost folosită o listă cu marcatori, care a fost plasată într-un container suplimentar pentru toată navigația - un div obișnuit.
Deci, odată cu apariția noilor etichete, acum puteți face ceva mai corect - în loc de o etichetă div, înfășurați meniul în nav - un nou element semantic care a fost creat special pentru a colecta cele mai importante link-uri din el și pentru a le grupa împreună.
Puteți pune fie o listă, fie doar un set de link-uri în nav. Mi se pare că aceasta este o soluție și mai simplă și mai corectă, deși în multe șabloane puteți vedea în continuare implementarea meniului folosind etichetele ul, li, a.
Interesant este că containerul de navigare a fost creat special pentru link-urile prioritare din pagină. De fapt, pe o pagină poate exista mai mult de un astfel de container, dar ar trebui să plasați în ele doar acele link-uri care formează de fapt navigația principală (de exemplu, meniul principal de sus și duplicatul acestuia în subsolul paginii).
Cum să faci un meniu orizontal folosind html5
Nici măcar nu aveți nevoie de nicio încadrare în listă, totul va fi afișat inițial pe o singură linie, deoarece linkurile sunt elemente inline.
Un alt lucru este că sunt foarte limitate în design datorită proprietăților lor inline. Veți putea opera numai cu proprietăți precum: culoare, dimensiunea fontului, marginile. Dacă doriți să setați o anumită culoare de fundal, să faceți separatoare și să adăugați umplutură (sau să determinați dimensiunea fiecărui element de meniu), atunci nu veți putea face acest lucru cu o linie.
Aici va trebui să ne transformăm articolele în elemente bloc. Pentru a face acest lucru, trebuie să scrie proprietatea:
afisare: bloc;
Acum merg de sus în jos, adică navigarea noastră a devenit verticală. Pentru a-l transforma înapoi în orizontală, trebuie să adăugați anumite proprietăți. De exemplu, în loc de un tip de bloc, definiți un tip de linie de bloc pentru ele sau dați-le (float: stânga). Citiți mai multe despre aceste metode.
Navigare pe verticală
De obicei, pentru a face un meniu vertical în html5, ei folosesc o listă, dar markup-ul pe care ți l-am dat mai sus este potrivit și pentru noi. După cum ați văzut, dacă convertiți link-uri în link-uri bloc, acestea se vor alinia automat unul după altul de sus în jos, deoarece două blocuri nu pot fi pe aceeași linie.
Acum le puteți aplica regulile de proiectare necesare. Blocurile au mult mai multe proprietăți decât un element inline, așa că aveți mult mai multe opțiuni. De exemplu, am adăugat acestea:
a( text-decor: niciunul; culoare: #fff; umplutură: 5px; dimensiunea fontului: 22px; afișare: bloc; fundal: liniar-gradient(la dreapta, rgba(96,108,136,1) 0%,rgba(63,76,107) ,1) 100%) lățime: 200px;
text - decor : nici unul ;
culoare: #fff;
umplutură: 5px;
dimensiunea fontului: 22px;
afisare: bloc;
fundal: liniar - gradient (la dreapta, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%);
latime: 200px;
text - aliniere : centru
- - un element al listei. Pentru claritate, să scriem codul pentru un meniu simplu: