De la psd la html

În această lecție, creați un bloc cu un coș. În fișierul index.html, scrieți următorul cod pentru acest bloc:

Am creat două blocuri: pentru capace

și pentru partea de conținut
. Acum mergeți la fișierul cu stiluri și scrieți proprietățile antetului, adică pentru selectorul de cap:







Aici am indicat indentarea în interiorul blocului, în stânga am făcut o indentare egală cu 35px pentru a potrivi pictograma acolo. A fost indicată raza de rotunjire a colțurilor, respectiv colțul din stânga sus și colțul din dreapta sus. Specificați proprietățile pentru font: chip, dimensiune, spațiere, culoare.







Să adăugăm proprietățile pentru imaginea de fundal - poziția fundal și repetarea fundalului:

Deoarece fiecare bloc din coloana din stânga are o pictogramă proprie, vom adăuga clasa proprie în aceste blocuri, de exemplu, pentru un bloc cu un coș va fi o clasă de coș.

:

În fișierul cu stiluri, vom scrie calea către imaginea blocului cu coșul:

Când blocul are două sau mai multe clase, puteți scrie la fișierul cu stiluri sau un selector de clasă, sau toate împreună, fără goluri, la fel ca în exemplul de mai sus .block.basket

Pentru blocul cu clasa de conținut. localizat în interiorul blocului cu blocul de clasă. scriem următoarele proprietăți:

Și proprietățile pentru paragraful din interiorul blocului:

Trecem la bloc cu formularul de căutare.







Articole similare

Trimiteți-le prietenilor: