Crearea unui bloc în CSS. am stabilit întotdeauna în mod clar parametrii și, de asemenea, poziționați-l într-un anumit loc pe ecran. Astfel, orice bloc are două coordonate X și Y, care determină poziția blocului pe planul ecranului. Dar în CSS 2 există de asemenea o a treia coordonată spațială Z. care determină numărul stratului pe care se află blocul.
Folosind straturile în combinație cu proprietatea de vizibilitate, puteți crea diferite meniuri derulante, schimbând dinamic valoarea proprietății de vizibilitate pentru diferite straturi. Pentru a face acest lucru, submeniurile sunt situate pe straturi separate, iar atunci când utilizatorul face clic pe comanda meniului, stratul în care este stocat submeniul selectat de utilizator este evidențiat în prim-plan.
Exemplu - meniu derulant
În primul rând, vom crea principalele componente ale site-ului. Suntem de acord că vor exista trei dintre acestea: titlul site-ului, bara de meniu și blocul principal de conținut. Toate cele trei unități vor fi amplasate unul sub altul, adică site-ul va fi plasat într-o coloană.
Primul bloc va fi foarte simplu, să îl numim #head. Va fi un singur titlu în el. Să scriem stilul pentru acest bloc:
Înălțimea #head: 50px;
lățime: 100%;
poziția: absolută;
stânga: 0px;
top: 0px;
>
Am stabilit lățimea blocului la 100%, astfel încât să fie întreaga lățime a ferestrei browserului. De asemenea, am fixat înălțimea de 50 de pixeli, în timp ce unitatea este poziționată în colțul din stânga sus al ecranului. Vom scrie codul HTML:
În acest bloc există un singur titlu. Să scriem un stil simplu pentru el, care îl aliniază spre dreapta și stabilește culoarea albastră.
# culoare H1: marină;
marja: 0em;
umplutură-dreapta: 0,5 mm;
text-aliniere: drept;
>
Articole similare
Trimiteți-le prietenilor: