Salutări, prieteni. Altă zi a trebuit să se joace cu blocuri și posibilitățile de utilizare a acestora în proiectarea. De aceea, mă grăbesc să împărtășesc cu voi câteva idei.
La sfârșitul articolului - un bonus: un ghid detaliat cu privire la modul de a face un clearance-ul, display-uri diferite pe computere și dispozitive mobile.
Explicație pentru incepatori:
Exemplu # 1: Fundaluri și imagini. Cadru și umbră.
Asigurați-un bloc cu imaginea de fundal pentru ao umple cu text și imagini. Pentru mai multe colțuri rotunjite estetice ale blocului și se adaugă o umbră.
Aici block_1 este responsabil pentru proiectarea unității principale, fundal și block_2 - pentru un semn de exclamare în colț.
Cu o marjă de valoare negativă block_2 am învățat în colț, și chiar dincolo de elementul de bază.
Block_1 pentru mine este înălțimea. Acest lucru se face mai mult pentru vizibilitate, deoarece dimensiunea unui cadru gol foarte mult distorsionat. Tu nu va fi un text, astfel încât înălțimea liniei poate elimina, astfel încât să nu blocheze restricțiile severe. Dar, în block_2 lățime-înălțime poate fi lăsat, pentru că avem nevoie de o pictogramă de o anumită dimensiune.
Exemplu # 3: Domeniul de aplicare și lipsa acestora
Iată o imagine cu un border'om elegant lipsă se poate face prin specificarea stiluri separate pentru fiecare din cadru. Inscripția «Sfârșitul» este puțin probabil să fie folositoare, dar poate fi înlocuit, de exemplu, pentru a lega pagini, articole sau coloane.
În acest exemplu, proiectarea fiecare bucată de text și de a obține volumul eliberat separat în CSS. Cu primele unități din stânga unele confuzii, astfel încât acestea nu sunt în textul ordinului.
Exemplu # 7: Mai multe blocuri care răspund la dispozitiv și extinderea
Soluția pe care suntem acum este cazul, ar fi logic să se plaseze materialele pe aspectul mobil. Dar aș dori să colecteze opțiuni interesante cu div'ami într-un singur loc, astfel încât toată lumea de aici și-a găsit ceva util.
Deci, avem mai multe unități aranjate într-un rând și executat, de exemplu, folosind .bl. Dimensiuni Procentaj, totul este în regulă. Dar este destul de îngust pe lățimea ecranului mic în procente face blocul, iar textul este afișat în interior nu este foarte frumos.
Deoarece blocurile sunt situate pe marele ecran ...
Ajutorul vine @media de directivă, care vă permite să setați stiluri individuale pentru anumite dispozitive. Este necesar să se adauge la container
(Header.php fișier). În acest caz, condiția este după cum urmează: