Cum de a insera o imagine și text într-o singură unitate

Acest articol va uita la modul de a insera un bloc separat de text și imagini, și puneți-le cu CSS

Ia blocul de cod html conținut.

Se introduce în ea o anumită cantitate de text.

Au existat două paragrafe. Acum, să vedem cum să atragă imagini. În primul rând, găsiți o imagine de pe Internet, iar în cazul în care site-ul este încă pe computer, puneți-le în folderul de imagini, directorul site-ului.

În cazul în care site-ul este pe un server virtual, imaginile trebuie să-l încărcați în imaginile dosarul corespunzător.

Locul va fi de trei imagini. Unul la început pentru a deveni centrul și celălalt în primul paragraf la stânga, și un al treilea în al doilea paragraf de pe dreapta. Asta e doar, cu permisiunea dumneavoastră, voi lua un bloc de fundal verde, pentru că eu nu pot găsi o imagine cu fundal.

Sa dovedit în acest fel.

Acum, proprietăți CSS, pentru a distribui imaginea în locul său.

După cum puteți vedea, imaginile sunt scrise în vrac este dat de proprietate CSS - float, și necesită textul să-și încheie în jurul imaginii, și înveliți în jurul acestuia cu o anumită mână. Și cu proprietăți marja, padding specifică textul din imagine.

Am adăugat aici o altă linie roșie.

Pe pagina următoare ne vom uita la poziționarea relativă, și va fi chiar mai interesant. Și nu este greu.

Nu aveți încă întrebări? cere

profesor de muzică Sasha:
- Te avertizez, dacă nu se comportă în mod corespunzător, voi spune părinților tăi că ai talent.

Ei bine, omul vechi se va ridica! Bună ziua Sergey!
Îmi pare rău că mult timp absent ..
Permiteți-mi să vă urez un An Nou Fericit! Vă doresc
sănătate, prosperitate, fericire, succes și ansamblul celor
Mult noroc! Pentru blog-ul și mai dezvoltat, de vești bune și elevi!
Cu mare respect, Jack

Nu, nu e corect.
În cazul în care antetul specificat de clasă, un punct în fața ei, dar cel mai probabil acesta este doar un bloc, apoi a pus #header.
Fundalul imaginea nu este nevoie de tot drumul, deci trebuie să:
background-image: URL-ul (imagini / wolf.png)
Imaginea de fundal? lățime și înălțime nu sunt specificate. Ei au făcut imediat dimensiunea corectă, și în cazul în care dimensiunea imaginii este mai mică decât un bloc, apoi începe să se multiplice în mod implicit, și dacă mai mult, atunci nu este afișat.
background-position - dreapta
background-repeat: nu-repeta: - trebuie să adăugați este o interdicție de reproducere.

în cazul în care codul este corect pentru a insera o imagine într-o pălărie?

fundal antet: # FFE4C4;
background-image: /www................../Themes/default/images(wolf.png);
height: 150px;
lățime: 250px;
background-position: centru sus 0px;

Exact. Numai despre dosarele atachment nu va spune sigur (nu știu directorul Forumului). Pe blog-ul o imagine pentru antetul este încărcat în wp-content - teme - Nume temă - imagini.
Apoi, în stilurile prescrise următoarea proprietate:
fundal: # f3ffff; / * Context, similar cu imaginea de fundal * /
background-image: url (images / s3.png); / * Imaginea din antet * /
background-repeat: no-repetare; / * Ban de reproducție * /
background-position: centru sus 0px; / * Locuri de cazare, atunci puteți experimenta cu valori, în mișcare scurt în sus și în jos * /
Dar încă. Imaginea este doar mărimea potrivită. Dacă există mai mult, nu pot apărea în fereastra.