Astăzi continuăm să ne familiarizăm cu elementele de construcție a site-ului și să învățăm cum să creăm un cadru CSS. În ultimul articol v-am spus și a arătat cum sunt create cadrele html. dar css-ul arată mai frumos și atractiv. Prin urmare, cine a învățat să facă cadrul html, va stăpâni crearea cadrului css. Și te voi ajuta în asta!
Așa cum am spus deja mai sus că rama css este mult mai frumos și mai practic decât domeniul de aplicare al HTML și nu va fi nici o problema de a crea un astfel de cadru css-te dacă ai învățat deja cum să facă cadre html.
Ca și în ultima lecție. unde am creat html-ul cadru. De asemenea, acum, când creăm cadrul css, vom folosi, deja cunoaștem proprietatea "frontierei", pentru care vom specifica anumite valori care sunt, de asemenea, familiare pentru noi:
cadru solid - solid;
spargerea - cadrul punctat;
punct cadru - punctat;
cadru dublu cu linie dublă;
canal - cadru cu o umbră;
creastă - cu relief;
Și două noi valori pentru noi astăzi sunt:
- grosimea cadrului;
culoare - culoarea cadrului;
Toate aceste valori sunt scrise într-o singură linie cu un spațiu:
Apoi trebuie să indentăm css-ul. Acest lucru se face prin aceste variabile:
padding - intern (indentarea scopului conținutului);
marginea - exterioară (linia cadrului de la obiectele externe);
Acum, să stabilim direcția de indentare, adică cât și unde să ne retragem. Acest lucru putem face cu aceste valori:
sus - linia de sus;
drept - liniuță dreaptă;
liniuță de jos;
stânga este marginea din stânga;
Și să scriem totul jos, după cum urmează:
Dacă trebuie să plasați textul în mijlocul cadrului css, atunci trebuie să adăugați aici acest tip de construcție:
Nu vă fie teamă, poate că toate acestea vor părea foarte complicate și vor deranja imediat, dar atunci veți înțelege totul și vă voi da și exemple practice în care totul va deveni imediat clar și ușor de înțeles!
Acum, să ne stabilim înălțimea și lățimea cadrului. Aceasta se face folosind proprietatea "lățime". Iată un exemplu:
Și pentru a putea plasa cadrul nostru pe pagina dvs. de web, avem nevoie de valoarea "marjei". De asemenea, puteți plasa cadrul nostru în centrul paginii pe site adăugând o altă valoare a "auto" la valoarea "margine". Iată un exemplu:
Acum este timpul pentru acțiuni practice care ne vor ajuta să vedem totul cu ochii noștri, care probabil vor fi mai evidente și vor deveni mai clare odată.
Iată un exemplu al unuia dintre cadrele pe care noi și eu le vom schimba mai târziu, dar nu toate, ci doar CSS, care este conținut în conținutul etichetei "stil". Și din cauza acestor modificări, CSS se va schimba și cadrul nostru css.
primul exemplu al cadrului CSS
Iată un al doilea exemplu al cadrului CSS:
al doilea exemplu al cadrului CSS
Iată cel de-al treilea exemplu al unui cadru de puncte:
al treilea exemplu al unui cadru
Acesta este cel de-al patrulea exemplu al unui cadru cu două căi:
al patrulea exemplu al unui cadru
Și dacă aplicați valoarea "creasta", atunci iată ce cadru primiți:
al cincilea exemplu al unui cadru
Acum, să realizăm marginile rotunjite ale cadrului nostru css cu ajutorul acestor valori "border-radius" și "box-shadow":
cadru cu marginile rotunde
Iată un cadru cu marginile rotunde și codul său:
Acum, să facem un cadru cu marginile neclară, de asemenea, arata destul de atractiv, și este ușor să o faci, doar în sensul "box-shadow" schimba cifra la o valoare mai mare. Și iată ce se întâmplă:
cu marginile neclare
Acum facem un cadru cu contururi multi-colorate, doar adaugam cateva scale de culoare la valoarea "box-shadow":
Și acum apogeul cadrelor noastre pe CSS este un cadru rotund. Se face, de asemenea, pur și simplu prin schimbarea valorii "marginii-rază". Uite, uite:
Iată codul ei aici:
Asta e totul pentru ziua de azi. Până data viitoare!
Dacă vă plac materialele, vă rugăm să faceți următoarele ...
Vă mulțumesc pentru atenție!
Articole similare
Trimiteți-le prietenilor: