Pasul 1. Să începem cu faptul că avem o imagine și un paragraf de text.
Să presupunem că vrem să ne asigurăm că imaginea noastră este pe dreapta, iar textul se învârte în jurul ei. De asemenea, dorim să adăugăm indici pentru imaginea noastră din marginea din stânga și de jos, astfel încât textul să nu rămână în imagine. Și în final, vrem să creăm un cadru în jurul imaginii.
Deci, iată poziția de plecare:
Pasul 2 - Aplicați floatului: proprietatea dreptă la imaginea noastră.
Pentru a forța imaginea să meargă la marginea dreaptă, aplicăm clasa .floatright la ea. în care atribuim regula float: dreapta.
Ce sa întâmplat, uitați-vă la exemplul de mai jos:
Pasul 3 - adăugați liniuțe
Sunt necesare indentări pentru a muta textul din imagine de pe partea stângă și de jos.
Vom folosi o variantă scurtă de scriere a unei reguli care reglează indentarea: "margin: 0 0 10px 10px;". Amintiți-vă că, cu o astfel de înregistrare, valorile sunt aplicate în această ordine - sus, dreapta, jos, stânga.
În momentul de față avem această situație:
Pasul 4 - Adăugați un cadru
Pentru a adăuga un cadru imaginii, vom folosi regula: "border: 1px solid # 666;" .
Pasul 5 - Adăugați linii de indentare
Dacă doriți ca cadrul să se potrivească perfect cu imaginea, puteți utiliza indentarea interioară adăugând o regulă: padding: 2px;
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: