În vorstke de multe ori trebuie să lucreze cu imagini. Nu în contextul creării cu decor lor de ajutor, și anume imagini ca imaginile. Și, uneori, designeri le place să inventeze moduri diferite de a proiecta legende pentru imagini, dintre care aspect poate fi dificil pentru incepatori. In acest articol voi încerca să deschidă una dintre modalitățile de semnături de impunere pentru imagini.
Deci, vrem să vedem rezultate similare cu Figura 1.
Figura 1. Sursa imagine
Pentru a face acest lucru avem nevoie pentru a scrie aici un cod html:
Până în prezent, totul este simplu: înveliți imaginea în blocul de sub imaginea în interiorul intervalului este introdus pentru semnătura ei. Recepția în sine se bazează pe adăugarea la elementul care conține semnătura (în acest caz - la durata), poziționarea absolută și dispunerea în partea de jos, permițându-i să se întindă în elementul de text nu este în jos și în sus. Dar, ca toate elementele să se comporte în mod corect, va trebui să se înregistreze pentru unele dintre stiluri și imagini, și unitatea de înveliș. Deci, în ordine.
Din moment ce se va întinde absolut, la înveliș trebuie să adăugați poziția: relativă. și specificați lățimea.
Imaginea ar trebui să fie forțat să facă un bloc pentru a elimina padding inutile sub noi și scoateți rama din IE.
Dar ne prescrie la interval de cele mai multe dintre toate stilurile:
- l-am unitate face
- Solicitarea padding textul nu a lipi marginile
- Solicitarea lățime forțată (nu uitați să-l reducă la padding'a lățime)
- Noi facem poziționare absolută și „lipici“ la partea de jos a blocului de înveliș, care este cel mai vizual și partea de jos a imaginii
- Solicitarea în continuare culoarea de fundal, transparența acestuia (în conformitate cu articolul 12 din tehnici simple și utile), pregătesc legende cu text la gust
Astfel, cel mai important lucru - acestea sunt primele cinci proprietăți. Restul puteți schimba designul după cum doriți la alegerea ta. Rezultatul a fost o astfel de pagină:
Notă bloc înveliș lățime, iar imaginea de bloc cu numele, având în vedere umplutură trebuie să fie egală!