ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ°. CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ object-fit
Π§Π°ΡΡΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΡΠΊΠ°ΠΆΠ°Π»ΠΎΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ²Π°Π΅Ρ Π½ΡΠΆΠ΅Π½ ΡΠ°Π·Π½ΡΠΉ. ΠΠ½ΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π±Π»ΠΎΠΊΠ°. Π ΠΈΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² CSS Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ object-fit. ΠΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
object-fit: fill — ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ Π±Π»ΠΎΠΊ Π±Π΅Π· ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
object-fit: cover — ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ Π²ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Ρ ΠΈΠ· Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠΎΡΠΌΠ° Π±Π»ΠΎΠΊΠ° Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ ΡΠΎΡΠΌΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
object-fit: contain — Π²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² Π±Π»ΠΎΠΊΠ΅. Π§Π°ΡΡΡ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° ΠΈΠ· Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠΎΡΠΌΠ° Π±Π»ΠΎΠΊΠ° Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ ΡΠΎΡΠΌΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
object-fit: none — ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΡΠ²ΠΎΡΠΌ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π΅
object-fit: scale-down — ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π»ΠΈΠ±ΠΎ contain Π»ΠΈΠ±ΠΎ none. ΠΠ· ΡΡΠΈΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ΅Π½ΡΡΠ΅.
object-fit: initial — Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΡΠ°Π½Π΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
object-fit: inherit — Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° object-fit Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
fill
cover
contain
none
scale-down
ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° object-fit ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ ΡΠ΅Π»Π΅ΠΉ:
- cover ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΎΠ±Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π·Π°ΠΏΠΎΠ»Π½ΠΈΠ»Π° Π²Π΅ΡΡ Π±Π»ΠΎΠΊ ΠΈ Π² Π½ΡΠΌ Π½Π΅ Π±ΡΠ»ΠΎ ΠΏΡΡΡΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΊΠΎΠ³Π΄Π° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΈ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΈΠ»Π΅. Π£ Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π°Ρ ΡΠΎΡΠΌΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ, ΡΡΠΎ ΡΠ°ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ Π²ΠΈΠ΄Π½Π°.
- contain ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΠΎ ΡΠΎΡΠΌΠ° Π±Π»ΠΎΠΊΠ° ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΠΎΡΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π§Π°ΡΡΡ Π±Π»ΠΎΠΊΠ° ΠΎΡΡΠ°ΡΡΡΡ ΠΏΡΡΡΠΎΠΉ. ΠΠ°ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±Π»ΠΎΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠ³ Π΅Π³ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ.
- none Π½ΡΠΆΠ½Π° Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΈΡΡΠ°ΡΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° Π½Π΅Π»ΡΠ·Ρ ΠΌΠ΅Π½ΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π½ΠΎ Π΄Π»Ρ Π½Π΅Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
- scale-down ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ΅Ρ ΠΆΠ΅ ΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎ contain. ΠΠΎ ΠΌΡ ΡΡΠΈΡΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ Π±Π»ΠΎΠΊΠ°. contain Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΡΡΡΠ½Π΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΡΠ°Π·ΠΌΡΡΡΠΌ. Π Π²ΠΎΡ scale-down Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π² Π±ΠΎΠ»ΡΡΠΎΠΌ Π±Π»ΠΎΠΊΠ΅.
Π§ΡΠΎΠ±Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ object-fit ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΠΎΠ³Π΄Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π² Π±Π»ΠΎΠΊΠ΅, ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡ: 100%. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ°. ΠΡΠΎΡΡΠΎ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ°. ΠΠΎ ΡΠ°Π±ΠΎΡΠ° object-fit Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π° Π½Π΅ ΠΎΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π±Π»ΠΎΠΊ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² Π½Π΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΡΠ°ΡΡΡΠ½Π΅ΠΌ Π΅Ρ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°:
Π‘ΡΠΈΠ»Ρ:
+
7 | div { width: 100px; height: 130px; border: 1px solid Red; } img { width: 100%; height: 100%; object-fit: contain; } |
HTML ΠΊΠΎΠ΄:
22 | <div><img src="sizeimage.jpg"></div> |
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ object-position ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ΄Π²ΠΈΠ½ΡΡΡ Π΅Π³ΠΎ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ°. Π Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π» Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π±ΡΠ²Π°Π΅Ρ: left, center, right, Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π±ΡΠ²Π°Π΅Ρ: top, center, bottom. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ CSS. Π’ΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΎΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΠ³Π»Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Ρ:
18 | object-position: left top; |
ΠΠ°ΠΊ ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠ΅ΡΡ Π² Π±Π»ΠΎΠΊΠ°Ρ
ΠΠ°ΠΊ ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠ΅ΡΡ Π² Π±Π»ΠΎΠΊΠ°Ρ , Π½Π° ΠΏΠΎΠ»Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ CSS? ΠΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ°ΡΡΠΎ Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ CSS. ΠΠ΅ΡΠ΅Π΄ΠΊΠΎ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π»ΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π·Π°Π½ΠΈΠΌΠ°Π» Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΡΠ»Π΅Π²Π° Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Β ΡΡΡΠ°Π½ΠΈΡΡ.
Β
Β
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>SiteName</title> </head> <body> <article> <header></header> <nav></nav> β¦contentβ¦ <footer></footer> </article> </body> </html>
ΠΠ½Π΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΡΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π°Β CSS:
article { width: 70%; margin: 0 auto; }
Π’Π°ΠΊ ΠΊΠ°ΠΊΒ ΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠΉΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ½, Π·Π°ΠΏΠΎΠ»Π½ΡΡΡΠΈΠΉ Π²ΡΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°? ΠΡΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΡ ΡΡ ΡΠ²Π΅ΡΡ Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅Π³Ρ body,Β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
body { background: url(header.png) 0 0 repeat-x; }
ΠΠΎ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Π½Π΅ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° footer, ΡΠ°ΠΊ ΠΊΠ°ΠΊΒ ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π±Π»ΠΎΠΊΠ΅ article ΠΈΒ Π΅Π³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Ρ.Β Π΅., ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ½Π΅ΠΌ Π±Π»ΠΎΠΊ footer ΠΈΠ· Π±Π»ΠΎΠΊΠ° article ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉΒ Π±Π»ΠΎΠΊ:
β¦contentβ¦ </article> <footer> <div> <p>Footer content.</p> </div> </footer>
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π² ΠΊΠΎΠ΄Β CSS:
footer { width: 100%; background: url(footer.png) 0 0 repeat-x; } div.content { width: 70%; margin: 0 auto; }
ΠΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Ρ ΠΎΡΡ ΠΎΠ½ΠΎ ΠΈΒ Π½Π΅ ΠΈΠ·ΡΡΠ½ΠΎΠ΅. ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ Π±Π»ΠΎΠΊ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ CSS, Π°Β Π½Π΅ Π΄Π»ΡΒ ΡΡΡΡΠΊΡΡΡΡ.
Π ΡΡΠ°ΡΡΡΡ, Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΡΠ°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΈΒ Π½Π΅ ΡΡΠ΅Π±ΡΡΡΠ΅Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ° Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ, Π·Π°ΡΠ΅ΠΌ ΡΠ΄Π²ΠΈΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Π·Π°Π΄ Π²Β Π΅Π³ΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ°. ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ°Π²Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ, Π° Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΒ ΡΠΈΡΠΈΠ½Π΅:
body { overflow-x: hidden; } .extendfull, .extendleft { padding-left: 3000px; margin-left: -3000px; } .extendfull, .extendright { padding-right: 3000px; margin-right: -3000px; }
ΠΠΎΠ³Π΄Π° ΠΊΠ»Π°ΡΡ .extendleft ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎΠ΄ΠΎΠ±Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΊΠ»Π°ΡΡ .extendright ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° ΠΊΠ»Π°ΡΡ .extendfull ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ Π²Β ΠΎΠ±Π΅ ΡΡΠΎΡΠΎΠ½Ρ. Π§ΡΠΎΠ±Ρ Π½Π΅ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°, Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ΅Π³Ρ body ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x: hidden, ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²ΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠΊΠ½Π°Β Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡΒ ΡΠ°Π±ΠΎΡΡ
ΠΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Internet Explorer ΠΎΡ Π²Π΅ΡΡΠΈΠΈ 8, Firefox, Chrome, Safari ΠΈΒ Opera. ΠΠ½ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΠΏΠΎΡΠΎΠ± Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π½ΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΡΡΠΎ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ. ΠΠΎ Π½Π΅ ΡΡΠΎΠΈΡ Π·Π°Π±ΡΠ²Π°ΡΡ, ΡΡΠΎΒ ΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ Π±ΡΡΡΡΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅Β ΡΠ°ΠΉΡΠ°.
ΠΠ²ΡΠΎΡ ΡΡΠΎΠΊΠ°Β CraigΒ Buckler
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄Β βΒ ΠΠ΅ΠΆΡΡΠΊΠ°
Π‘ΠΌΠΎΡΡΠΈΡΠ΅Β ΡΠ°ΠΊΠΆΠ΅:
ΠΠ΅ΡΡΡΠΊΠ° ΡΠ»ΠΎΡ-ΠΏΠΎΠ΄ΠΊΠ»Π°Π΄ΠΊΠΈ Π²ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ viewport
Π Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠ±Π΅Π³Π°ΡΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΠΏΡΠΈΠ΅ΠΌΡ β ΡΠΎΠ½ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠΎΠ² ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π°.
ΠΡΠ»ΠΈ ΡΠ°Π±Π»ΠΎΠ½ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π²Π΅ΡΡΡΠ°Π΅ΡΡΡ Ρ ΡΡΠ΅ΡΠΎΠΌ ΡΠ°ΠΊΠΈΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΎΠ½Π°, ΡΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ wrapper-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠ°Π²Π½ΡΡ 100% ΡΠΈΡΠΈΠ½Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
<div> <div> … </div> </div> <div> <div> … </div> </div> … <div> <div> … </div> </div> <style> .wrapper { width: 100%; } .content { max-width: 1000px; margin: 0 auto; } </style>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div> Β Β <div> … </div> </div> <div> Β Β <div> … </div> </div> … <div> Β Β <div> … </div> </div> <style> Β Β .wrapper { Β Β Β Β width: 100%; Β Β } Β Β .content { Β Β Β Β max-width: 1000px; Β Β Β Β margin: 0 auto; Β Β } </style> |
Π’Π°ΠΊΠ°Ρ Π²Π΅ΡΡΡΠΊΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠΎΠ½Π° ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π·Π°Π΄Π°Π²Π°Ρ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΉ ΡΠ΅ΠΊΡΠΈΠΈ.
ΠΡΠ»ΠΈ ΠΆΠ΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ ΠΎΠ±ΡΠΈΠΉ wrapper Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ, Π° ΡΠ°Π·Π±ΠΈΠ²ΠΊΠ° Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΡΡΡΠ΄ΠΎΡΠΌΠΊΠ° (Π²Π»Π΅ΡΠ΅Ρ Π·Π° ΡΠΎΠ±ΠΎΠΉ ΡΠ΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠΈΡΠ»Π° ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ²), ΡΠΎ Π΅ΡΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΡΡΡΠΊΡΡΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ:
<div> <div> <div> … </div> </div> <div> <div> … </div> </div> … <div> <div> … </div> </div> </div> <style> .wrapper { max-width: 1000px; margin: 0 auto; } </style>
1 2 3 4 5 6 7 8 10 11 12 13 14 15 16 17 18 |
<div> Β Β <div> Β Β Β Β <div> … </div> Β Β </div> Β Β <div> Β Β Β Β <div> … </div> Β Β </div> Β Β … Β Β <div> Β Β Β Β <div> … </div> Β Β </div> </div> <style> Β Β .wrapper { Β Β Β Β max-width: 1000px; Β Β Β Β margin: 0 auto; Β Β } </style> |
Π’ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠΎΠ½ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΉ ΡΠ΅ΠΊΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΠ΅Ρ Π½ΠΈΠΊΡ (Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π² CSS):
#sectionN { position: relative; } #sectionN:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: «»; // ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ½Π° background: url(…) top center repeat; // ΠΏΡΠΎΠ΄Π»ΡΠ΅ΠΌ ΡΠΎΠ½ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° padding-right: 9999px; margin-right: -9999px; padding-left: 9999px; margin-left: -9999px; } #sectionN .content { position: relative; } body { // ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ scrollbar overflow-x: hidden; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
#sectionN { Β Β position: relative; } #sectionN:before { Β Β position: absolute; Β Β top: 0; Β Β bottom: 0; Β Β left: 0; Β Β right: 0; Β Β content: «»; Β Β // ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ½Π° Β Β background: url(…) top center repeat; Β Β // ΠΏΡΠΎΠ΄Π»ΡΠ΅ΠΌ ΡΠΎΠ½ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Β Β padding-right: 9999px; Β Β margin-right: -9999px; Β Β padding-left: 9999px; Β Β margin-left: -9999px; } #sectionN .content { Β Β position: relative; } body { Β Β // ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ scrollbar Β Β overflow-x: hidden; } |
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΏΡΠ΅Π²Π΄ΠΎ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π½ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ»ΠΎΠΉ Π² Π²Π΅ΡΡΡΠΊΠ΅. Π‘ΠΌΡΡΠ» Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ΅ΠΊΡΠΈΠΈ, Π½ΠΎ ΠΏΠΎ ΠΊΡΠ°ΡΠΌ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ Π½Π° 9999 ΠΏΠΈΠΊΡ, Π·Π°Π»ΠΈΠ²Π°Ρ ΡΠΎΠ½ΠΎΠΌ Π²ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»Ρ.
ΠΠ°ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉΠΠ°Π½Π½Π°Ρ Π·Π°ΠΏΠΈΡΡ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π° Π² 16.04.2019 12:50 ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π° Π² Π’Π°Π½ΡΡ Ρ CSS. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π² ΠΊΠΎΠ½Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΠ°Π²ΠΈΡΡ Π²Π°Ρ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ.
ΠΠ°Π»ΠΎ Π±ΡΠΊΠ°ΡΡ? Π§ΠΈΡΠ°ΠΉΡΠ΅ Π΅ΡΡΠΎ !
ΠΡΡΠ°Π²ΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π² ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² LESS
ΠΠ²Π³ΡΡΡ 29, 2019 Π³.
ΠΠ΅Π±ΠΎΠ»ΡΡΠΈΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΊΠ°ΠΊ ΡΠ°ΡΡΡ CSS ΠΊΠΎΠ΄Π°. Π₯ΠΎΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ Π΅ΡΠ΅ ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΠΌΡΠΌΠΈ, ΠΏΡΠΈ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ ΠΈΠ· LESS. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΏΡΠΈ ΡΠ΅Π±ΡΠ΅Π½Π΄ΠΈΠ½Π³Π΅ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΡΡΠΎΡΠΊΠ° ΡΡΠΈΠ»Π΅ΠΉ Π½Π° Π΄ΡΡΠ³ΠΎΠΌ ΡΠ°ΠΉΡΠ΅, Π²Ρ …
Π§ΠΈΡΠ°ΡΡΠΊΠ°ΠΊ Π² html ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ
ΠΠ½ΠΎΠ³ΠΈΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠ΅ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΈ, ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΠΈΠΊΠ°ΡΡΠΈΠ΅ Π² ΡΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ², ΡΠ°ΡΡΠΎ Π·Π°Π΄Π°ΡΡΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ, ΠΊΠ°ΠΊ Π² html ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ. Π Π΅ΡΠ»ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ, ΡΠΎ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ, ΡΡΠΎΠ±Ρ ΡΠ°ΠΉΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ Π½Π° Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΠΈ. ΠΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ½ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ: Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΡΠ΅Π³ΠΎΠ² ΠΈ CSS ΡΡΠΈΠ»Ρ. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°ΠΌ Π΄Π»Ρ ΡΠ΅Π±Ρ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, CSS ΡΡΠΈΠ»Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΡΠ΄ΠΎΠ±Π½Π΅Π΅, Π²Π΅Π΄Ρ Π΅Π³ΠΎ ΠΊΠΎΠ΄ Ρ ΡΠ°Π½ΠΈΡΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ ΠΈ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π»ΠΈΡΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ΅Π³Π°Ρ ΡΠ°ΠΉΡΠ°, Π½ΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠΎΠ½ ΡΠ°ΠΉΡΠ°.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ΅Π³ΠΈ HTML Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ½Π°
ΠΡΠ°ΠΊ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΊ Π²ΠΎΠΏΡΠΎΡΡ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ Π² html Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½. ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠ°ΠΉΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π», Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²Π°ΠΆΠ½ΡΡ Π΄Π΅ΡΠ°Π»Ρ: Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ ΡΠΎΠ½ ΠΈΠ»ΠΈ Π·Π°ΠΊΡΠ°ΡΠΈΡΡ Π΅Π³ΠΎ ΠΎΠ΄Π½ΠΎΡΠΎΠ½Π½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΠ°Π²ΠΈΡΡ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΠΎΠ½Π° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΡΠ°ΠΊΠΈΠΌ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Ρ Π²Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠ°ΠΉΡΠ°. Π’ΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³ΠΎΡΠΎΠ²ΠΎ, ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΠΌ Π΅Π³ΠΎ Π² ΠΏΠ°ΠΏΠΊΡ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«ImagesΒ». Π Π½Π΅ΠΉ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Ρ ΡΠ°Π½ΠΈΡΡ Π²ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ. ΠΡΠ° ΠΏΠ°ΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΌ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²Π°ΡΠΈΠΌΠΈ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ html. Π’Π΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΈ ΠΊ ΠΊΠΎΠ΄Ρ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π·Π°ΠΏΠΈΡΠΈ ΠΊΠΎΠ΄Π°, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
- ΠΠ°ΠΏΠΈΡΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ ΡΠ΅Π³Π°.
- Π§Π΅ΡΠ΅Π· CSS ΡΡΠΈΠ»Ρ Π² HTML ΠΊΠΎΠ΄Π΅.
- ΠΠ°ΠΏΠΈΡΠ°ΡΡ CSS ΡΡΠΈΠ»Ρ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅.
ΠΠ°ΠΊ Π² HTML ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, ΡΠ΅ΡΠ°ΡΡ Π²Π°ΠΌ, Π½ΠΎ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠ°ΡΡ ΡΠ»ΠΎΠ² ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π±ΡΠ»ΠΎ Π±Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ. ΠΠ΅ΡΠ²ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΡΡΡΠ°ΡΠ΅Π». ΠΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΎΡΠ΅Π½Ρ ΡΠ΅Π΄ΠΊΠΈΡ ΡΠ»ΡΡΠ°ΡΡ , ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Π ΡΡΠ΅ΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ°ΠΌΡΠΉ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ. ΠΠΎΡ HTML ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ΅Π³ΠΎΠ²:
- ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΏΠΈΡΠΈ ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° (body) Π² ΡΠ°ΠΉΠ»Π΅ index.htm. ΠΠ½ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠ°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅: (body background= «ΠΠ°Π·Π²Π°Π½ΠΈΠ΅_ΠΏΠ°ΠΏΠΊΠΈ/ΠΠ°Π·Π²Π°Π½ΠΈΠ΅_ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅»)(/body). Π’ΠΎ Π΅ΡΡΡ Π΅ΡΠ»ΠΈ Ρ Π½Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«PictureΒ» ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ JPG, Π° ΠΏΠ°ΠΏΠΊΡ ΠΌΡ Π½Π°Π·Π²Π°Π»ΠΈ ΠΊΠ°ΠΊ Β«ImagesΒ», ΡΠΎΠ³Π΄Π° Π·Π°ΠΏΠΈΡΡ HTML-ΠΊΠΎΠ΄Π° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ: (body background=»Images/Picture.jpg»)β¦ (/body).
- ΠΡΠΎΡΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π·Π°ΠΏΠΈΡΠΈ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°Π΅Ρ CSS ΡΡΠΈΠ»Ρ, Π½ΠΎ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΡΠ°ΠΉΠ»Π΅ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ index.htm. (body).
- Π ΡΡΠ΅ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΏΠΈΡΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Π² Π΄Π²ΡΡ ΡΠ°ΠΉΠ»Π°Ρ . Π Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ index.htm Π² ΡΠ΅Π³Π΅ (head) Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΊΠ°Ρ ΡΡΡΠΎΡΠΊΠ°: (head)(link rel=»stylesheet» type=»text/css» href=»ΠΡΡΡ_ΠΊ CSS_ΡΠ°ΠΉΠ»Ρ»)(/head). Π Π² ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ style.css ΡΠΆΠ΅ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ: body {background: url(Images/Picture.jpg’)}.
ΠΠ°ΠΊ Π² HTML ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, ΠΌΡ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ. Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Π²ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π°.
Π‘ΠΏΠΎΡΠΎΠ±Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°
ΠΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ Π½Π°Ρ ΡΠΊΡΠ°Π½ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅. ΠΠΎΠ»ΡΡΠ°Π΅ΡΡΡ, ΡΡΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Π° ΠΈ Π΄Π»ΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 100% Ρ 100%. ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° ΡΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π·Π°ΠΏΠΈΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°ΠΉΠ» style.css ΡΡΡΠΎΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π΄Π»ΠΈΠ½Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°. ΠΠ°ΠΊ ΡΡΠΎ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² CSS ΡΡΠΈΠ»Π΅? ΠΡΠ΅ ΠΏΡΠΎΡΡΠΎ!
body
{
background: url(Images/Picture.jpg’)
background-size: 100%; /* ΡΠ°ΠΊΠ°Ρ Π·Π°ΠΏΠΈΡΡ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² */
}
ΠΠΎΡ ΠΌΡ ΠΈ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ Π² html Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½. ΠΡΡΡ Π΅ΡΠ΅ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΏΠΈΡΠΈ Π² ΡΠ°ΠΉΠ»Π΅ index.htm. Π₯ΠΎΡΡ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΈ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΉ, Π½ΠΎ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΅Π³ΠΎ Π·Π½Π°ΡΡ ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ. Π ΡΠ΅Π³Π΅ (head)(style) div { background-size: cover; } (/style) (/head) ΡΡΠ° Π·Π°ΠΏΠΈΡΡ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΡ Π²ΡΠ΄Π΅Π»ΡΠ΅ΠΌ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ ΡΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎ Π²ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠΊΠ½Π°. ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ 2 ΡΠΏΠΎΡΠΎΠ±Π°, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ html, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π»ΠΎΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π° Π² Π»ΡΠ±ΠΎΠΌ ΠΈΠ· ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ½
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΡΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠ°, ΡΠΎΠ³Π΄Π° Π²Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π½Π΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π»ΡΡ Π² Π΄Π»ΠΈΠ½Ρ ΠΈ Π½Π΅ ΠΏΠΎΡΡΠΈΠ» ΡΡΡΠ΅ΡΠΈΡΠ½ΡΠΉ Π²ΠΈΠ΄. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΊΠΎΠ΄Π° ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π² ΡΠ°ΠΉΠ»Π΅ style.css Π΄ΠΎΠΏΠΈΡΠ°ΡΡ ΠΎΠ΄Π½Ρ ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ background: url(Images/Picture.jpg’) fixed; ΠΈΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΡΠΊΠΈ Ρ Π·Π°ΠΏΡΡΠΎΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΡΡΠΎΡΠΊΡ — position: fixed. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Π°Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ ΡΡΠ°Π½Π΅Ρ Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΠΌ. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΡΠ°ΠΉΡΠ΅, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ, Π° ΡΠΎΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅. ΠΠΎΡ Π²Ρ ΠΈ Π½Π°ΡΡΠΈΠ»ΠΈΡΡ, ΠΊΠ°ΠΊ Π² html ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
Π Π°Π±ΠΎΡΠ° Ρ ΡΠ°Π±Π»ΠΈΡΠ΅ΠΉ Π² HTML
ΠΠ½ΠΎΠ³ΠΈΠ΅ Π½Π΅ΠΎΠΏΡΡΠ½ΡΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡ Ρ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, ΡΠ°ΡΡΠΎ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊ Π² html ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠ°ΠΊ ΠΈ Π²ΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ HTML ΠΈ CSS ΡΡΠΈΠ»Ρ, ΡΡΠΎΡ ΡΠ·ΡΠΊ Π²Π΅Π± ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ. Π ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΊΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠ°ΡΡ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°. ΠΡ ΡΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ, ΡΡΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΠ½ΡΡ ΡΡΡΠΎΠΊ ΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅ΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΊΠ°ΠΊ ΡΠ΅Π³ΠΈ (tr) ΠΈ (td). Π§ΡΠΎΠ±Ρ ΡΠΎΠ½ ΡΠ°Π±Π»ΠΈΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠΏΠΈΡΠ°ΡΡ ΠΊ ΡΠ΅Π³Ρ (table), (tr) ΠΈΠ»ΠΈ (td) ΠΏΡΠΎΡΡΡΡ ΡΡΠ°Π·Ρ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ: background = URL ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠ»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠ²Π΅Π΄Π΅ΠΌ ΠΏΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
Π’Π°Π±Π»ΠΈΡΡ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ½Π°: HTML ΠΏΡΠΈΠΌΠ΅ΡΡ
ΠΠ°ΡΠΈΡΡΠ΅ΠΌ ΡΠ°Π±Π»ΠΈΡΡ 2Ρ 3 ΠΈ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΅Π΅ ΡΠΎΠ½ΠΎΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΠΎΡ ΡΠ°Π½Π΅Π½Π½ΡΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ βImagesβ: (table background = βImages/Picture.jpgβ) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Π’Π°ΠΊ Π½Π°ΡΠ° ΡΠ°Π±Π»ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΡΠ°ΡΠ΅Π½Π° Π² ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠΈΡΡΠ΅ΠΌ ΡΡΡ ΠΆΠ΅ ΡΠ°Π±Π»ΠΈΡΠΊΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ 2Ρ 3, Π½ΠΎ Π²ΡΡΠ°Π²ΠΈΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΡΡΠΎΠ»Π±ΠΈΠΊΠΈ ΠΏΠΎΠ΄ Π½ΠΎΠΌΠ΅ΡΠΎΠΌ 1, 4, 5 ΠΈ 6. (table)(tr)(td background = βImages/Picture.jpgβ)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = βImages/Picture.jpgβ)4(/td) (td background = βImages/Picture.jpgβ)5(/td) (td background = βImages/Picture.jpgβ)6(/td) (/tr) (/table). ΠΠΎΡΠ»Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ ΡΠΎΠ½ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ΅Ρ ΡΡΠ΅ΠΉΠΊΠ°Ρ , Π² ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π»ΠΈ, Π° Π½Π΅ Π²ΠΎ Π²ΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅.
ΠΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ ΡΠ°ΠΉΡΠ°
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΅ΡΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ½ΡΡΠΈΠ΅, ΠΊΠ°ΠΊ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠ°Ρ ΠΈ Π²Π΅ΡΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΡΠΈ ΡΡΠΎΠΌ Π½ΡΠΆΠ½ΠΎ HTML ΠΊΠΎΠ΄ ΠΈ CSS ΡΡΠΈΠ»Ρ ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΡΡ ΠΏΠΎΠ΄ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·Π²ΠΈΡΠΈΡ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΡΠ°ΡΠ°ΡΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡΡ, Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΠΈ ΠΏΠΎΠ΄ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΠΉ Π²ΠΈΠ΄.
Css ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 3.0+ | 9.6+ | 3.1+ | 3.6+ | 2.0+ | 1.0+ |
ΠΠ°Π΄Π°ΡΠ°
Π Π°ΡΡΡΠ½ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3.
Π Π΅ΡΠ΅Π½ΠΈΠ΅
ΠΠ»Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size , Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ 100%, ΡΠΎΠ³Π΄Π° ΡΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ»Ρ ΡΡΠ°ΡΡΡ Π²Π΅ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠ°ΠΌΠΈ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 1.
ΠΡΠΈΠΌΠ΅Ρ 1. Π Π°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠΎΠ½
HTML5 CSS 2.1 IE Cr Op Sa Fx
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. ΠΠΈΠ΄ ΡΠΎΠ½Π° ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΠΎΠΊΠ½Π°
ΠΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΡΠ½ΡΡ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΡ ΡΠ΄ΡΠ΅Π½ΠΈΡ Π²ΠΈΠ΄Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (ΡΠΈΡ. 2).
Π ΠΈΡ. 2. ΠΠΈΠ΄ ΡΠΎΠ½Π° ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΠΎΠΊΠ½Π°
ΠΠ΄Π΅ Π±ΡΠ΄Π΅ΠΌ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΠ°ΠΊ ΡΡΠΎΠ± ΠΎΠ½Π° ΡΠΌΠΎΡΡΠ΅Π»ΠΎΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ ΠΈΠ΄Π΅Ρ ΡΠΎΠ½ ΠΏΠΎΠ΄ ΠΎΠ΄Π½ΠΈΠΌ ΠΎΡΡΠ΅Π½ΠΊΠΎΠΌ ΡΠ²Π΅ΡΠ°, Ρ Π½ΠΈΠΌ Π»Π΅Π³ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΠ΅ Π·Π°Π±ΡΠ²Π°Π΅ΠΌ ΠΏΡΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π° Π΅Π΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ. Π ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΎΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. Π§ΡΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅, Π²ΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠ΅ Π΄Π΅Π»ΠΎ, Π±Π΅Π· ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠ°Ρ ΠΈΠ½Π°ΡΠΈΠΉ Ρ flash.
ΠΠ΅ΡΠΎΠ΄ CSS3 background
ΠΡΠΎ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°ΠΌΡΠΉ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΡΠ½ΡΡΡ background Π½Π° ΡΠΈΡΡΠΎΠΌ CSS, ΠΈ Π²ΡΠ΅ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΎΠ΄Π½ΠΎΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ, ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ background-size, ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π² CSS3.
ΠΠ΄Π΅ΡΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ background ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈ Π²ΡΡΡΠ°Π²ΠΈΠΌ Π΅Π³ΠΎ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ, ΡΡΠΎ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π΅Π³ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ, Π³Π΄Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-size, ΡΡΠΎ Π²ΡΠ΅ ΠΈΠ΄Π΅Ρ ΠΏΠΎΠ΄ ΡΡΡΠ»ΠΊΡ Π½Π° ΡΠΎΠ½.
Π ΠΎΠ±ΡΠΈΠΌ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΡΠ΅ΠΌΡΡ Ρ Π±Π»ΠΎΠΊΠΎΠΌ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ ΡΡΠΈΠ»ΠΈ ΠΈ Π΄ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π² ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ ΡΡΠΎΠΌΡ Π±Π»ΠΎΠΊΡ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
ΠΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ background, Π³Π΄Π΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΡΡΡ Π½Π° ΠΊΠ°ΡΡΠΈΠ½Ρ, Π³Π΄Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΎΠΊΠ½Π° ΡΠΊΡΠ°Π½Π°. ΠΡΠ»ΠΈ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡ, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ center ΠΈ top ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ΅Π½ΡΡ ΠΈ ΠΏΡΠΈΠΆΠ°ΡΠΈΠ΅ ΠΏΠΎ Π²ΡΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½Π°ΠΌ, ΡΡΠΎΠ± Π½Π΅ Π±ΡΠ»ΠΎ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ². Π§ΡΠΎΠ± ΠΏΠΎΠ½ΡΡΠ½ΠΎ Π±ΡΠ»ΠΎ, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ fixed β ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΡΠ½ΠΊΡΠΈΡ ΡΠΈΠΊΡΠ°ΡΠΈΠΉ.
ΠΠ΅ΡΠΎΠ΄ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΠΉ, ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΈ ΠΎΠ½ ΠΌΠ΅Π½Ρ ΡΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ Π½Π° Π²ΡΠ΅ 100% ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ².
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ± :
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π²ΠΎΠΏΠ»ΠΎΡΠΈΡΡ Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ½Π° ΡΡΠ°Π½Π΅Ρ ΠΎΠ±Π»Π°Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π° Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ. ΠΡ ΠΏΡΠΈΡΠ²ΠΎΠΈΠΌ Π΅ΠΉ min-width ΠΈ min-height 100%. ΠΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π±Π»Π°Π³ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠΈΠ³ΠΎΡΠΎΠ²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½Ρ, Π² Π½Π°ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΠΎΡΠΎΠ½.
ΠΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π½Π΅ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅Ρ background image, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΡΡΡΠΎ Π²ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΠΊ Π½ΡΠΆΠ½ΠΎ, Π° ΡΠΎΡΠ½Π΅Π΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²Π·ΡΡΠΈΡ Π΅Π΅ Π² div.
ΠΠ° ΡΡΠΎΠΌ Π²ΡΠ΅, Π·Π΄Π΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π½Π΅ Π²ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ, Π° ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΡΠ΅ΠΌΠ΅Π½ΡΡΡ.
Π’Π°ΠΊΠΆΠ΅ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ, Π³Π΄Π΅ Π²ΡΠ΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΠΎΠ±ΡΡΡΠ½ΡΡΡ ΠΏΠΎ ΠΊΠ°ΠΊ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠΎΠ½ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½.
ΠΠΎΠ±ΡΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΡΡΠΎΠΊ. 🙂
ΠΠΎΠ³Π΄Π°-ΡΠΎ ΠΈΡΠΊΠ°Π» ΡΠΏΠΎΡΠΎΠ±, ΠΊΠ°ΠΊ ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠΎΠ½ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ Π²ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ. ΠΡΠΈΡΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΠ»ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½Π°. Π’ΠΎ Π΅ΡΡΡ, Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈ ΠΏΠΎΡΠ΅ΡΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° ΡΡΠΎΠ±Ρ Π²ΡΠ΅ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π±Π΅Π· ΠΈΡΠΊΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠΌΠ½Ρ ΠΏΠ΅ΡΠ΅ΡΡΠ» ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈ ΠΈΡΠΏΡΠΎΠ±ΠΎΠ²Π°Π» Π½Π΅ ΠΌΠ°Π»ΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ², ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΡΠ΅Π» ΠΈΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² ΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ.
ΠΠΈΠΆΠ΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ 3 ΡΠΏΠΎΡΠΎΠ±Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΡΠΎΠ½ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°.
Π‘ΠΏΠΎΡΠΎΠ± β1
ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΈΡΡΡΠΉ CSS3. ΠΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ background-size. Π ΠΌΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°ΠΈ Ρ Π±ΡΠ΄Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΡΠΎ Π΅ΡΡΡ ΠΏΡΠΈΡΠ²ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊ ΡΠ΅Π³Ρ body. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎ Π½Π°Π΄ΠΎΠ±Π½ΠΎΡΡΠΈ ΠΊ Π±Π»ΠΎΠΊΡ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ.
Π Π°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½ Π±ΡΠ΄Π΅ΠΌ Π²ΠΎΡ ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Ρ ΠΌΠΈΠ»ΠΎΠΉ Π΄Π΅Π²ΡΡΠΊΠΎΠΉ 🙂
Π ΠΎΠ±ΡΠΈΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌΡΡ Ρ Π±Π»ΠΎΠΊΠΎΠΌ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ ΡΡΠΈΠ»ΠΈ ΠΈ Π΄ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π² ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π°Π½Π½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π² ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ΅ background Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΡΠ°Π½Π°. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°ΠΈ ΡΡΠΎ center ΠΈ top. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π±ΡΠ΄Π΅Ρ Π² ΡΠ΅Π½ΡΡΠ΅ ΡΠΊΡΠ°Π½Π°, ΠΈ ΠΏΡΠΈΠΆΠ°ΡΠ° ΡΠ²ΠΎΠΈΠΌ Π²Π΅ΡΡ ΠΎΠΌ ΠΊ Π²Π΅ΡΡ Ρ ΡΠΊΡΠ°Π½Π°. ΠΡΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ»ΠΎ Π²ΠΈΠ΄Π½ΠΎ Π»ΠΈΡΠΎ Π΄Π΅Π²ΡΡΠΊΠΈ. ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΡΠΉ ΡΠΎΠ½ ΠΈΠ»ΠΈ ΠΏΡΠΈΡΠΎΠ΄Π°, Π³Π΄Π΅ Π²ΠΈΠ΄Π½ΠΎ Π½Π΅Π±ΠΎ, ΠΏΠΎΠ»Π΅, Π³ΠΎΡΠΈΠ·ΠΎΠ½Ρ, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ center ΠΈ center. Π ΠΎΠ±ΡΠΈΠΌ Π΅ΡΠ»ΠΈ Π²Ρ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ CSS, ΡΠΎ Π΄ΡΠΌΠ°Ρ ΡΠ°Π·Π±Π΅ΡΠ΅ΡΠ΅ΡΡ. Π’Π°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ fixed, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
Π‘ΠΏΠΎΡΠΎΠ± ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ, Ρ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΡΠ΅Π³Π΄Π° ΠΈ ΠΎΠ½ ΠΌΠ΅Π½Ρ ΡΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ Π½Π° Π²ΡΠ΅ 100%. ΠΡΡΡ Π»ΠΈΡΡ ΠΎΠ΄Π½ΠΎ Π½ΠΎ. Π‘ΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ CSS3, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ΅ ΠΊΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄ΡΠ΅Π²Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ Π½Π΅ ΡΠ²ΠΈΠ΄ΡΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
Π‘ΠΏΠΎΡΠΎΠ± β2
ΠΠ°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΠ±ΡΡΠ½ΡΠΉ CSS. ΠΠΎ ΡΡΡΠΈ ΡΠΎΠΆΠ΅ ΠΏΡΠΎΡΡΠΎΠΉ. ΠΡΠ²ΠΎΠ΄ΠΈΠΌ Π² ΡΠ΅Π»Π΅ ΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΡΠ²ΠΎΠΈΠ² id β bg:
Π ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΡΠΈΠ»ΠΈ:
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½.ΠΠΎΡ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ :).
Π‘ΠΏΠΎΡΠΎΠ± β3
Π’ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ jQuery. ΠΠΎΡΡΠΎΠΌΡ ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° Π½Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π° ΡΠ°Π½Π΅Π΅.
ΠΠΎΡΠ»Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΠΊΡΠΈΠΏΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈ Π±ΡΠ΄Π΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ Π½Π°Ρ ΡΠΎΠ½
ΠΠ°Π»Π΅Π΅ ΡΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π²ΠΎ Π²ΡΠΎΡΠΎΠΌ ΡΠΏΠΎΡΠΎΠ±Π΅, Π² ΡΠ΅Π»Π΅ ΡΠ°ΠΉΡΠ° Π²ΡΠ²ΠΎΠ΄ΠΈΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ Π΅ΠΉ id, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ bg.
Π Π² ΠΊΠΎΠ½ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ. ΠΡΠΊΡΡΠ²Π°Π΅ΡΠ΅ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
ΠΠΎ ΡΡΠΈΠ»ΡΠΌ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°ΠΈ ΡΡΠΎ fixed. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, Π΅ΡΠ»ΠΈ ΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° absolute, ΡΠΎ ΡΠΎΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ. ΠΡΡΠ°ΡΠΈ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈ Ρ ΠΏΠ΅ΡΠ²ΡΠΌΠΈ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
Π’Π°ΠΊΠΆΠ΅ ΡΠΊΠ°Π·Π°Π½ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ β z-index: -1, Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π±ΡΠ»Π° Π·Π° ΡΠ΅ΠΊΡΡΠΎΠΌ. ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ Π½Π΅Ρ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠΏΠ΅ΡΠ΅Π΄ΠΈ, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ±ΡΠ°ΡΡ ΡΡΠΎΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ.
ΠΠ°ΠΊΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΠ΅ΡΠ°ΡΡ ΠΠ°ΠΌ. ΠΠ°ΠΊ ΠΈ ΠΏΠΈΡΠ°Π» ΠΡΡΠ΅, ΠΌΠ½Π΅ Π±ΠΎΠ»Π΅Π΅ Π±Π»ΠΈΠ·ΠΎΠΊ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ±. ΠΠ½ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π½Π΅ Ρ ΡΠΆΠ΅ Π΄ΡΡΠ³ΠΈΡ .
ΠΠ° ΡΡΠΎΠΌ Π²ΡΠ΅, ΡΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. 🙂
ΠΡΠ»ΠΈ ΠΠ°ΠΌ Π±ΡΠ» ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ ΠΌΠΎΠΉ ΡΡΡΠ΄, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠ°ΡΡ ΡΠ°ΠΉΡ, ΠΎΠ±ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎ ΠΌΠ½ΠΎΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌΠΈ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ΅ΠΊΠ»Π°ΠΌΠΊΡ, ΡΡΠΎ Π·Π°ΠΉΠΌΠ΅Ρ 2 ΠΌΠΈΠ½ΡΡΡ π
ΠΠ°ΠΊ ΡΠ°ΡΡΡΠ½ΡΡΡ SVG ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΏΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ β ΠΠ»ΠΎΠ³ΠΎ-Π΄Π°ΡΡ
Π’Π΅ΠΌΠ° ΡΠΏΡΠ°Π²Π΅Π΄Π»ΠΈΠ²Π° ΡΠ°ΠΊ ΠΆΠ΅ Π΄Π»Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠΈ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΠ΅. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π·Π°Π΄Π°ΡΠ° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½Π°Ρ, Π²Π΅Π΄Ρ Π·Π°ΡΠ΅ΠΌ ΡΠΎΠ·Π½Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΊΠ°ΠΆΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ/ΠΈΠΊΠΎΠ½ΠΊΡ, ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΡΠ»ΡΡΠ°ΠΈ Π±ΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅. Π ΠΌΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π»ΡΡ Π±Ρ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΈ Π΅Π³ΠΎ Β«ΡΠ³ΠΎΠ»ΠΎΠΊΒ» Π±ΡΠ» Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ. Π‘Π°ΠΌΡ ΡΠ°Π±ΠΎΡΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Π²ΡΡΠ°Π²Π»ΡΡΡ Π½Π΅ Π±ΡΠ΄Ρ, Ρ.ΠΊ. Π·Π°ΠΏΠΈΡΡ Π½Π΅ ΠΎΠ± ΡΡΠΎΠΌ, Π° ΠΎ ΡΠ°ΠΌΠΎΠΌ Π²ΠΎΠΏΡΠΎΡΠ΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ svg ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΡΠΎΡΠΎΠ½, ΠΏΠΎΡΡΠΎΠΌΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π΄ΠΎΠ±Π°Π²Π»Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅:
ΠΡΠ°ΡΠΊΠΎ ΠΎΠ±ΡΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ: ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ divβa ΠΈ svg β ΡΠ³ΠΎΠ»ΠΊΠ° ΡΠΏΡΠ°Π²Π°. Π’Π°ΠΊ Π²ΠΎΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΠΎΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠΈ svg Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΡΠ΄Π°Π²Π°Π»ΠΎΡΡ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, ΠΎΡΡΠ°Π²ΠΈΠ² ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ. Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»ΠΎΡΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅:
preserveAspectRatio=»none»
preserveAspectRatio=»none» |
ΡΠΊΠ°Π·Π°Π² ΠΊΠΎΡΠΎΡΡΠΉ ΠΊ ΡΠ΅Π³Ρ svg, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠ°Π»ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ ΡΠΏΡΠ°Π²Π»ΡΡΡ, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
See the Pen OvZJrP by Sergey (@norzserge) on CodePen.
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΌΠΎΡ Π·Π°ΠΏΠΈΡΡΒ Π½Π°ΡΠΎΠ»ΠΊΠ½Π΅ΡΒ ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π½Π° ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠ΅ΠΉ Π½Π΅ ΡΡΠΈΠ²ΠΈΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ. ΠΡΠ΅ΠΌ ΡΠ΄Π°ΡΠΈ!
P.S. Π ΡΠ»ΠΎΠ²Ρ ΡΠΊΠ°Π·Π°ΡΡ, Π΄ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ SVG Π±ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΏΡΠΈΠ½ΡΡΡ ΠΏΠΎΠΏΡΡΠΊΠΈ:
β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±Π»ΠΎΠΊ Ρ background ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ-ΡΠ³ΠΎΠ»ΠΊΠΎΠΌ, Π½ΠΎ ΠΏΡΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΠΈ Π±ΡΠΊΠ³ΡΠ°ΡΠ½Π΄Π°, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π·Π°ΠΌΠ΅ΡΠ½ΠΎ ΠΈΡΠΊΠ°ΠΆΠ°Π»Π°ΡΡ β fail
β Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ Π² background ΡΡΠΎΡ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ, Π½ΠΎ ΠΏΡΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΠΈ ΡΡΠΎΡΠΎΠ½Π° ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π»Π°ΡΡ Π² Π»Π΅ΡΠ΅Π½ΠΊΡ β fail
β Π²Π°ΡΠΈΠ°Π½Ρ Ρ ΠΏΡΠ΅Π²Π΄ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΠ΅ Π±Π»ΠΎΠΊΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΠ°ΠΊ ΡΡΠΎ ΡΠΎΠΆΠ΅ Π½Π΅ ΠΏΡΠΎΠΊΠ°ΡΠΈΠ»ΠΎ
β Π΅ΡΠ΅ ΠΏΠ°ΡΠ° ΠΈΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠΉ, ΠΎ ΠΊΠΎΡΠΎΡΡΡ
Π΄Π°ΠΆΠ΅ ΠΏΠΈΡΠ°ΡΡ Π½Π΅ Ρ
ΠΎΡΡ
Π ΠΎΠ±ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ Π΄Π΅ΠΉΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ svg Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ preserveAspectRatio=Β»noneΒ»
Π Π°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ β CSS-LIVE
Π Π·Π°Π΄Π°ΡΠ°Ρ
Π²ΡΡΡΡΠΊΠΈ ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π°. ΠΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠ½ΠΊΡΡ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ, ΠΏΡΠΈΠΆΠΈΠΌΠ°ΡΡΡ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΊΡΠ°ΠΉΠ½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΊ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ.
Π§ΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΎ ΡΡΠΌ ΠΈΠ΄ΡΡ ΡΠ΅ΡΡ, ΠΏΡΠΈΠ²Π΅Π΄Ρ ΠΏΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠ° ΡΠΈΡΡΠ½ΠΊΠ°Ρ
Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΏΡΠΈ ΡΠ°Π·Π½ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΊΡΠ°Π½Π° ΠΏΡΠ½ΠΊΡΡ Π²ΡΡ ΡΠ°Π²Π½ΠΎ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΠΏΡΠΈΠΌΡΠΊΠ°Ρ ΠΊ Π±ΠΎΠΊΠΎΠ²ΡΠΌ ΡΡΠ΅Π½ΠΊΠ°ΠΌ ΠΈ Π΄Π΅Π»Π°Ρ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ β ΡΠ°Π²Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠΌΠΈ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Ρ
ΠΎΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΡΠ΅ ΠΏΠ»ΠΎΡ
ΠΈΠ΅ ΠΈ Ρ
ΠΎΡΠΎΡΠΈΠ΅ ΡΡΠΎΡΠΎΠ½Ρ ΡΡΠΈΡ
ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ².
ΠΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ?
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ, Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ³Π»ΡΠ±ΠΈΠΌΡΡ Π² ΡΠΎΠ½ΠΊΠΎΡΡΠΈ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΠ° ΠΈ ΠΏΠΎΡΠ°Π·ΠΌΡΡΠ»ΠΈΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
ΠΠΎ ΡΡΡΠΈ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ text-align: justify Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π°ΡΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ² ΡΠΆ ΠΎΡΠ΅Π½Ρ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ»ΠΎΠ² Π² ΡΡΡΠΎΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ³Π»ΡΠ±ΠΈΠ²ΡΠΈΡΡ Π² ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΡ text-align: justify, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π°Π»Π³ΠΎΡΠΈΡΠΌ.
ΠΡΠ°ΠΏ ΠΏΠ΅ΡΠ²ΡΠΉ
Π‘Π½Π°ΡΠ°Π»Π° Π² ΡΡΡΠΎΠΊΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈΡΡΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅, Π½Π΅ΡΠ°Π·ΡΡΠ²Π½ΡΠ΅ «ΠΊΠΈΡΠΏΠΈΡΠΈΠΊΠΈ». ΠΡΠΎ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π² ΡΠ΅ΠΊΡΡΠ΅, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΈΠ½Π»Π°ΠΉΠ½-Π±Π»ΠΎΠΊΠΈ, ΠΈΠ½Π»Π°ΠΉΠ½-ΡΠ°Π±Π»ΠΈΡΡ ΠΈ Ρ.Π΄. Π ΠΎΠ±ΡΠ΅ΠΌ Π²ΡΡ ΡΠΎ, ΡΡΠΎ Π² ΡΠ»ΡΡΠ°Π΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΠ΅ΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅.
Π¦ΠΈΡΡΠΎΠΉ 1 Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΠΎΡΠΌΠ΅ΡΠ΅Π½Ρ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½-Π±ΠΎΠΊΡΡ, Ρ.Π΅. ΠΏΠΎΠΏΡΠΎΡΡΡ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΠΈΠ½Π»Π°ΠΉΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΠΊΠΈΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ°ΠΊ < span> ΠΈΠ»ΠΈ <em>.
ΠΠΎΠ΄ ΡΠΈΡΡΠΎΠΉ 2 Ρ Π½Π°Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ, Ρ.Π΅ inline-block. ΠΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ, Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΎΡΡΡΡΠΏΠΎΠ² Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π·Π°Π½ΠΎΠ²ΠΎ. ΠΡΠΈΡΠΈΠ½Π° Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π½ΡΡΡΠΈ ΡΠ΅Π±Ρ inline-block Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π§ΡΠΎ Π½Π΅Π»ΡΠ·Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ± ΠΎΠ±ΡΡΠ½ΠΎΠΌ inline ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠ΅ΠΆΡΠ»ΠΎΠ²Π½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ»ΠΎΡΡ Π±Ρ, ΠΏΠΎ ΠΎΠ±ΡΠ΅ΠΌΡ, Π²Π½Π΅ΡΠ½Π΅ΠΌΡ Π°Π»Π³ΠΎΡΠΈΡΠΌΡ.
Π¦ΠΈΡΡΠΎΠΉ 3 ΠΎΡΠΌΠ΅ΡΠ΅Π½Π° ΠΎΠ±ΡΡΠ½Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°. Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅, ΠΎΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌ, ΡΠ΅Π»ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
ΠΠ»Ρ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ Π²ΡΠ΅ ΡΡΠΈ Π²Π΅ΡΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΈΠ· ΡΠ΅Π±Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠ½ΠΎΡΡΠΈ, Π½Π΅ΡΠ°Π·Π΄Π΅Π»ΠΈΠΌΡΠ΅ ΡΠ»ΠΎΠ²Π°, Π΅Π΄ΠΈΠ½ΡΠ΅ ΡΠ΅Π»ΡΠ΅. Π ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ ΡΠ΅Π³ΡΠ»ΠΈΡΡΠ΅ΡΡΡ Π½Π°ΡΠΈΠΌ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΠΎΠΌ, ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ text-align: justify
*ΠΠΎΡΠ»Π΅Π΄Π½ΡΡ ΠΆΠ΅ ΡΡΡΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΠΏΠΎΠ»Π΅ Π·ΡΠ΅Π½ΠΈΡ justify, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΡ
ΡΡΡΠΎΠΊ, Π° Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΏΡΠΎΠ±Π΅Π»Ρ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°ΡΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΡΠ°ΠΏ Π²ΡΠΎΡΠΎΠΉ
ΠΡΠΎΡΡΠΌ ΡΡΠ°ΠΏΠΎΠΌ Π°Π»Π³ΠΎΡΠΈΡΠΌ Π²ΡΡΡΠΈΡΡΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π²ΡΠ΅Ρ
Π½Π°ΡΠΈΡ
«ΠΊΠΈΡΠΏΠΈΡΠ΅ΠΉ» Π² ΡΡΡΠΎΠΊΠ΅, ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅Ρ ΠΈΡ
, Π° ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΎΡΠ½ΠΈΠΌΠ°Π΅Ρ ΠΎΡ ΠΎΠ±ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΠΌΠΎΠΉ ΡΡΡΠΎΠΊΠΈ.
ΠΡΡΡΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ²ΠΎΠ΄, ΡΡΠΎ ΡΠ΅ΠΉΡΠ°Ρ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ ΠΎΠ±ΡΡΡ ΡΡΠΌΠΌΡ Π²ΡΠ΅Ρ ΠΏΡΠΎΠ±Π΅Π»ΡΠ½ΡΡ Π·ΠΎΠ½ Π² ΡΡΡΠΎΠΊΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π²Π½Π° 116px.
ΠΡΠ°ΠΏ ΡΡΠ΅ΡΠΈΠΉ β Π·Π°Π²Π΅ΡΡΠ°ΡΡΠΈΠΉ
Π’ΡΠ΅ΡΡΠΈΠΌ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΡΡΠ°ΠΏΠΎΠΌ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° Π±ΡΠ΄Π΅Ρ Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΡΡ (Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ 116) Π½Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² Π² ΡΡΡΠΎΠΊΠ΅ (Π² Π½Π°ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΈΡ
7). ΠΠ· ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° (16.571) Π²ΡΡΠΈΡΠ°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ±Π΅Π»Π° ΠΈ ΡΠΆΠ΅ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· Π½ΠΈΡ
. Π§ΡΠΎ Π² ΠΈΡΠΎΠ³Π΅ Π΄Π°ΡΡ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΠΎΠ² Π²ΠΎ Π²ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅.
ΠΡΠΎΠ³
ΠΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΈΠ΄Π΅ΡΡ, Π°Π»Π³ΠΎΡΠΈΡΠΌ ΡΠ°Π±ΠΎΡΡ text-align: justify Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΠΈ ΡΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π²ΡΡ Π²ΡΠΎΠ΄Π΅ Π±Ρ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΠΈ Π»ΠΎΠ³ΠΈΡΠ½ΠΎ. Π― ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½Π°Ρ, ΡΠ΅ΡΠ°Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ Π·Π°Π΄Π°ΡΡ, Π²ΡΡΡΠΈΡΡΠ²Π°Π» Π±Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΏΠΎ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΌΡ ΠΆΠ΅ ΡΡΠ΅Π½Π°ΡΠΈΡ. Π‘Π»ΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ Ρ
ΠΎΡΠΎΡΠ΅Π΅, ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅, Π° Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π·Π°ΡΡΠ°ΡΠΈΠ² ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°. ΠΠ΅Π΄Ρ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½ΡΡ
ΠΊΠ°ΠΌΠ½Π΅ΠΉ, Π² Π²ΠΈΠ΄Π΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ (Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ Π°Π»Π³ΠΎΡΠΈΡΠΌ) ΡΡΡΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π½ΡΠΆΠ½ΠΎ ΠΏΡΡΡΠ°ΡΡ, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠΌ Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. ΠΡ ΠΈ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ Π½Π΅Π»ΡΠ·Ρ Π·Π°Π±ΡΠ²Π°ΡΡ ΠΎΠ± ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΠΈ ΠΊΠΎΠ΄Π°, ΡΠ°ΠΊΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠ°ΠΊ Opera, IE6-7, ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΠ±ΡΡ ΠΏΡΠ΅ΠΏΠΎΠ΄Π½ΠΎΡΠΈΡΡ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΡΠ΅ ΡΡΡΠΏΡΠΈΠ·Ρ.
ΠΠ°ΡΠ° Π·Π°Π΄Π°ΡΠ°
ΠΠ°ΡΠ° Π·Π°Π΄Π°ΡΠ° ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΡΡΠΎΠΈΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° Π±Π°Π·Π΅ ΡΡΠΎΠ³ΠΎ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ°. ΠΡΠΈΠΌΠ΅Π½ΠΈΡΡ, ΡΠΈΠΌΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ, Π·Π°ΠΌΠ΅Π½ΠΈΡΡ, ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΡ ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ, Π³Π»Π°Π²Π½ΠΎΠ΅ Π² ΠΈΡΠΎΠ³Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎ, ΡΡΠΎ ΠΌΡ Ρ ΠΎΡΠΈΠΌ. Π ΠΈΠΌΠ΅Π½Π½ΠΎ β ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΡΡΠΎΠΊΠ΅, Π±ΠΎΠΊΠΎΠ²ΡΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΈΠΆΠ°ΡΡ ΠΊ ΡΠ²ΠΎΠΈΠΌ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌ. ΠΡ ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ (ΠΏΡΠΎΠ±Π΅Π»Ρ) ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ ΠΏΡΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΠ°ΡΠΈΠ°Π½Ρ 1
Π‘Π°ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ ΠΏΡΠΈΡΠ»ΠΎ ΠΌΠ½Π΅ Π½Π° ΡΠΌ, ΡΡΠΎ Π²Π·ΡΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· ΠΏΡΡΠΈ ΠΏΡΠ½ΠΊΡΠΎΠ², ΡΠ΄Π΅Π»Π°ΡΡ 4 ΠΈΠ· Π½ΠΈΡ
ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌΠΈ, Π° Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΎΡΠΌΠ΅Π½ΠΈΡΡ float ΠΈ ΡΠ°ΡΡΡΠ½ΡΡΡ Π½Π° Π²ΡΡ ΠΎΡΡΠ°Π²ΡΡΡΡΡ ΡΠΈΡΠΈΠ½Ρ. Π§ΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅, ΠΎ ΡΡΠΌ ΠΈΠ΄ΡΡ ΡΠ΅ΡΡ, ΠΏΡΠΈΠ²ΠΎΠΆΡ ΠΊΠΎΠ΄.
Π‘ΡΡΡΠΊΡΡΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΎΠ²ΠΎΠΉ
<ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul>
Π CSS ΡΠ°ΠΊΠΈΠΌ
ul { font: 14px Verdana, Geneva, sans-serif; overflow: hidden; } ul li { } ul li.left { width: 20%; float: left; } ul li.right { width: 20%; float: right; text-align: right; } ul li.center { text-align: center; } ul li .content { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; }
Π§ΡΠΎ ΠΌΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ΄Π΅Π»Π°Π»ΠΈ? Π ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΌΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅. ΠΠ²Π° Π»Π΅Π²ΡΡ
ΠΈ Π΄Π²Π° ΠΏΡΠ°Π²ΡΡ
ΠΏΡΠ½ΠΊΡΠ° ΠΌΡ ΡΠ°ΡΠΊΠΈΠ΄Π°Π»ΠΈ ΠΏΠΎ ΡΠ°Π·Π½ΡΠΌ ΡΡΠΎΡΠΎΠ½Π°ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ float : left ΠΈ float : right ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π°Π·Π½Π°ΡΠΈΠ² ΠΈΠΌ ΠΏΠΎ 20% ΡΠΈΡΠΈΠ½Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ, ΡΡΠΎ Π² ΡΡΠΌΠΌΠ΅ Π΄Π°Π»ΠΎ 80% ΠΎΡ Π²ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΏΡΠ½ΠΊΡ, Ρ ΡΠ΅ΡΠΈΠ» Π½Π΅ Π΄Π΅Π»Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΠΌΠΎ ΠΏΠΎ ΡΠ΅Π±Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΠΎΡΡΠ°Π²ΡΠΈΠ΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΏΠΎΡΠ»Π΅ float-Π±Π»ΠΎΠΊΠΎΠ².
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π΄Π»Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΏΠΎΠΆΠ΅ΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΎΠΉ, Π° ΡΠΎΡΠ½Π΅Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ + Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΡΠΈΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Ρ ΡΠ΄Π΅Π»Π°Π» ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌ, ΠΏΠΎΠ²Π΅ΡΠΈΠ² Π½Π° Π½ΠΈΡ
display : inline-block, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ΅ΠΌΡ ΠΌΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠΌΠΎΠ³ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ Π² Π»ΡΠ±ΡΡ ΡΡΠΎΡΠΎΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ text-align Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΡΠΈ «ΠΆΠ΅ΡΡΠ²Ρ» Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ Π½Π°ΡΡΠΆΠΊΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΎΡΠ½Π΅ΡΡΠΈ ΠΊ Ρ
ΠΎΡΠΎΡΠ΅ΠΌΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π±Ρ Π½Π΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅, Π²Π΅ΡΠΎΠΌΡΠ΅ «Π½ΠΎ».
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΡΠΊΡΠΈΠ½ΡΠΎΡΠΎΠ², ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠΊΠΎΠ²ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ, Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ΅Π΄Π½ΠΈΠΌ ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ Π΅ΡΡΡ ΡΠ²Π½Π°Ρ ΡΠ°Π·Π½ΠΈΡΠ°. Π ΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠ΅ΠΌ Π·Π°ΠΌΠ΅ΡΠ½Π΅Π΅ ΡΡΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ.
ΠΠΎ-Π²ΡΠΎΡΡΡ
, ΡΠ°Π΄ΠΈ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°, Ρ Π½Π°Π·Π½Π°ΡΠΈΠ» Π²ΡΠΎΡΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ ΡΠΈΡΠΈΠ½Ρ, ΡΠ°Π²Π½ΡΡ 200px.
Π Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π·Ρ ΠΆΠ΅ ΠΎΠΊΠ°Π·Π°Π»ΡΡ ΠΏΠΎΠ΄ ΡΡΠ΅ΡΡΠΈΠΌ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ Π±Ρ Π½Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ, Π½ΠΎ ΡΠ°Π·Π²Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΎΡΠ³ΠΎΠ²ΠΎΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ? ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ Π½Π΅Ρ! Π― Ρ
ΠΎΡΡ, ΡΡΠΎΠ±Ρ Π½Π°ΡΠΈ ΠΏΡΠ½ΠΊΡΡ ΠΌΠΎΠ³Π»ΠΈ ΠΈΠΌΠ΅ΡΡ Π»ΡΠ±ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΡΠΎΠ±Ρ Π½Π°Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π».
ΠΡ ΠΈ Π²-ΡΡΠ΅ΡΡΠΈΡ
, Π²ΡΠ΅ ΡΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΠ±ΡΡΡΠΊΠΈ, ΠΊΠ»Π°ΡΡΡ, ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»-Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈΡ
ΡΠΈΡΠΈΠ½Ρ, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΡΠ°Π²ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ ΡΠΎΡΠΊΡ Π½Π° ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½ΡΠ΅, Π·Π°ΡΡΠ°Π²Π»ΡΡ Π½Π°Ρ ΠΈΠ΄ΡΠΈ Π΄Π°Π»ΡΡΠ΅, Π² ΠΏΠΎΠΈΡΠΊΠ°Ρ
Π½Π°ΡΡΠΎΡΡΠ΅Π³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΡΠΊΠ»Π°Π΄ΡΠ²Π°Ρ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ Π½Π° Π²ΡΠ΅ΠΎΠ±ΡΠΈΠΉ ΡΡΠ΄ ΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠΆΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠΏΠΎΡΠΎΠ±Ρ.
ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΡΠ°Π·Π½ΠΎΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ
ΠΠ°ΡΠΈΠ°Π½Ρ 2
ΠΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΠΏΠ΅ΡΠ²ΡΠΉ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΡΠ°ΡΡΠΈ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π² Π½ΡΠΌ ΠΌΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΠΌ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½, Π»Π΅Π²ΡΠΉ Π±Π»ΠΎΠΊ, Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ ΡΠΆΠ΅ Π² ΡΠ²ΠΎΡΠΌ, ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. ΠΠΎ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΡΠΌ ΠΎΡ ΡΠ»ΠΎΠ² ΠΊ Π΄Π΅Π»Ρ.
<ul> <li> <div>1</div> </li> <li> <ul> <li> <div>2</div> </li> <li> <div>3</div> </li> <li> <div>4</div> </li> <li> <div>5</div> </li> </ul> </li> </ul>
ul { font: 14px Verdana, Geneva, sans-serif; overflow: hidden; } ul li.one { float: left; } ul li.two { overflow : hidden; float : none; } ul li.two li { width: 25%; text-align: right; float: left; /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ //width: 24.9%; } ul li .content { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; }
ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°ΠΆΠΈΡΠ΅, ΡΡΠΎ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ ΠΌΡ ΠΏΠΎ ΡΡΡΠΈ ΠΈΠΌΠ΅Π΅ΠΌ Π΄Π²Π΅ ΡΠ°Π·Π½ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΠΎ Π±ΡΠ΄Π΅ΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΡΠ°Π²Ρ. ΠΠ΅Π΄Ρ Π½Π°ΡΠ° ΡΡΡΡΠΊΡΡΡΠ° ΠΏΠΎΠ΄Π΅Π»Π΅Π½Π° Π½Π° Π΄Π²Π΅ ΡΠ°ΡΡΠΈ, Π»Π΅Π²Π°Ρ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ· ΡΠ΅Π±Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΠΎΠ΄Π½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, Π° ΠΏΡΠ°Π²Π°Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π² ΡΠ΅Π±Π΅ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
ΠΠ΅Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° ΠΏΡΠΈΠΆΠ°ΡΠ° ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π² ΡΠ΅Π±Π΅ ΡΠ°ΠΌΡΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ, ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ. ΠΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠ°Π²Π°Ρ ΡΠ°ΡΡΡ ΠΏΡΠΈΠΆΠΈΠΌΠ°Π»Π°ΡΡ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π»Π°ΡΡ Π½Π° Π²ΡΡ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΌΠ΅ΡΡΠΎ. Π Π°ΡΡΡΠΆΠΊΠ° ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ overflow : hidden, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Ρ.Π΅. ΠΏΠΎ ΡΡΡΠΈ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. ΠΠ»Ρ Π²ΡΠ΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 100% ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π±Π»ΠΎΠΊΠΈ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ ΠΌΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΡΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ. Π§Π΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ° ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 25%, ΡΡΠΎ Π² ΡΡΠΌΠΌΠ΅ Π΄Π°ΡΡ 100. ΠΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΡΡΠΈ Π±Π»ΠΎΠΊΠΈ. ΠΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π²Π½ΡΡΡΠΈ Π½ΠΈΡ Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ text-align : right, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ΅ΠΌΡ ΡΠ°ΠΌΡΠΉ ΠΏΡΠ°Π²ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈΠΆΠ°Ρ ΠΊ ΡΠ²ΠΎΠ΅ΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΡΡΠ΅Π½ΠΊΠ΅, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π»Π΅Π²ΡΠΉ.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ°ΠΊΠΈΠΌ «ΠΆΠ΅ΡΡΠ²Π°ΠΌ» Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΈ ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΠ΅ΡΠ²ΡΡ
ΡΠΈΡΡΠ½ΠΊΠΎΠ², ΠΏΡΠΈ ΡΠ°Π·Π½ΡΡ
ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ
, ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ. ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° ΡΡΡΡ ΡΠ°Π²Π½ΠΎΠ·Π½Π°ΡΠ½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ. Π¨ΠΈΡΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 25%, Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π½ΡΡΡΠΈ Π½ΠΈΡ
β 100px. Π§ΡΠΎ ΠΈ Π΄Π°ΡΡ ΡΠ°Π²Π½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ «ΠΊΠΈΡΠΏΠΈΡΠΈΠΊΠ°» Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅Π»ΠΎ Π·Π°ΡΠ²ΠΈΡΡ, ΡΡΠΎ ΠΏΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠΎΠ² Ρ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ, ΡΡΠΎ ΠΌΡ Ρ
ΠΎΡΠ΅Π»ΠΈ.
ΠΠΎ Π²ΡΡ ΠΆΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΡΠ·Π½Π°ΡΡ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΠΎΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΡΠ½Π°ΡΠ°Π»Π° Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ, Π° ΠΏΠΎΡΠΎΠΌ ΠΈ Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ· ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ Π»Π΅Π²ΠΎΠΌΡβ¦ Π½Ρ Π΄ΠΎΠΏΡΡΡΠΈΠΌ 150px.
ul li.one .content { width: 150px;}
ΠΡΡ Π·Π΄ΠΎΡΠΎΠ²ΠΎ! ΠΠΎΠΊΠ° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΡΡ ΡΠ° ΠΆΠ΅ ΠΈΠ΄Π΅Ρ Ρ ΠΏΡΠ°Π²ΡΠΌ, ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ. Π ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΌ Π½Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π±Π»ΠΎΠΊ Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ.
ΠΡ , Π° Π²ΠΎΡ ΡΡΠΎΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ΅ΡΠΏΠ΅Π» Π½Π΅ΡΠ΄Π°ΡΡ. ΠΡΠ°Π²ΡΠΉ ΠΎΡΡΡΡΠΏ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΎΠΊΠ°Π·Π°Π»ΡΡ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. ΠΡΡ Π»Π΅Π³ΠΊΠΎ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ, ΡΡΠ°Π» Π±ΠΎΠ»ΡΡΠ΅ Π½Π° 50px, Π° ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ Π²ΡΡΠΎΠ²Π½Π΅Π½ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅, ΡΠΎ ΡΠΈΡΠΈΠ½Π° Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ±Π°Π²ΠΈΠ»Π°ΡΡ ΠΊ Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΠ°Π»Π° ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΡ ΠΈ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΠ»ΡΡ ΠΎΡΡΡΡΠΏ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π» ΠΌΠ΅Π½ΡΡΠ΅ ΡΠΎΠ²Π½ΠΎ Π½Π° 50px.
ΠΠ· Π²ΡΠ΅Π³ΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ²ΠΎΠ΄, ΡΡΠΎ Π΄Π°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ²Π½ΠΎ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΈΠΊ ΠΈ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ°Π²ΠΎ Π½Π° ΠΆΠΈΠ·Π½Ρ. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ Π΅Π³ΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ ΡΠ²ΡΠ·Π°Π½ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°ΠΌ, ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ. Π’Π°ΠΊ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠΏΠΈΡΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π²Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΡΠΎ Π²Ρ Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΎΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄. ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ Π±Π΅Π· Π΄Π²ΡΡ
ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΡ ΡΡΡ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ + Π½ΡΠΆΠ½Π° ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° (min-width), ΠΈΠ½Π°ΡΠ΅ ΠΏΡΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° Π±Π»ΠΎΠΊΠΈ Π±ΡΠ΄ΡΡ Π½Π°Π΅Π·ΠΆΠ°ΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
* ΠΡΡΠ°ΡΠΈ, Ρ ΡΠ΅Π±Ρ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π² ΠΏΡΠ°Π²ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠ΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ° ΠΏΠΎ 25%, ΠΈ ΠΈΡ
ΠΎΠ±ΡΠ°Ρ ΡΡΠΌΠΌΠ° ΡΠΎΡΡΠ°Π²ΠΈΠ»Π° 100%. ΠΠΎΡΡΠΎΠΌΡ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π±Π»ΠΎΠΊΠΎΠ² Π±ΡΠ΄Π΅Ρ, Π½Ρ ΡΠΊΠ°ΠΆΠ΅ΠΌ 6, ΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ
, Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° 16.666, ΡΡΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡ ΠΎ Π΄ΡΠΎΠ±Π½ΡΡ
ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Opera.
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ ΡΠ΅ΠΌ, ΡΠ΅ΠΌ Π²Π°ΠΌ Ρ
ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ.
ΠΠ°ΡΠΈΠ°Π½Ρ Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ
ΠΠ°ΡΠΈΠ°Π½Ρ 3 β text-align: justify
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΡ Π½ΠΈ ΡΠ°Π·Ρ Π½Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ text-align: justify, Π΄Π°ΠΆΠ΅ Π½Π΅ ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅Π³ΠΎ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° ΠΈ ΡΡΡΠΎΡΡΡΡ Π²ΡΠ΅ Π½Π°ΡΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ. Π― ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ Π½Π°ΡΡΡΠΈΡΡ ΡΡΡ ΡΡΠ°Π΄ΠΈΡΠΈΡ ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΠΏΡΡΡΠΈΡΡ ΡΠΆΠ΅ Π² Π΄Π΅Π»ΠΎ ΡΡΠΎΠ³ΠΎ Π·Π²Π΅ΡΡ.
Π ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΠ°ΡΡΠΈ ΠΌΡ Π²ΡΡΡΠ½ΠΈΠ»ΠΈ, ΡΡΠΎ text-align: justify Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π²ΡΠ΅ ΡΡΡΠΎΠΊΠΈ, ΠΊΡΠΎΠΌΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ, Π° Π·Π½Π°ΡΠΈΡ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π½Π°Ρ ΡΠΏΠΈΡΠΎΠΊ Ρ ΡΡΡΡΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π² ΠΊΠΎΠ½Π΅Ρ ΠΌΠ΅Π½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li></li> </ul>
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; } ul li.helper { width: 100%; height: 0; visibility: hidden; }
ΠΠ· ΠΊΠΎΠ΄Π° ΡΡΠ½ΠΎ, ΡΡΠΎ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΏΡΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ β ΠΏΠΎΠΌΠΎΡΠ½ΠΈΠΊΠΎΠΌ. text-align: justify Π½Π° Π³Π»Π°Π²Π½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅-ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ (ul), Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ²ΠΎΠΈΡ
ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΠΏΠΎΠ΄ΡΠΈΠ½ΡΡΡΡΡ ΡΠ²ΠΎΠ΅ΠΌΡ Π°Π»Π³ΠΎΡΠΈΡΠΌΡ. ΠΠ΅Π΄Ρ, ΠΊΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, Π° ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΡΠΈ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ (display: inline-block) ΠΏΡΠ½ΠΊΡΡ, ΠΏΠΎ ΡΡΡΠΈ ΠΈ ΡΠ²Π»ΡΡΡΡΡ Π½Π΅ΡΠ°Π·ΡΡΠ²Π½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π² ΡΡΡΠΎΠΊΠ΅, ΡΠΎ ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΏΠΎΠ»Π½Π΅ Π·Π°ΠΊΠΎΠ½ΠΎΠΌΠ΅ΡΠ½ΠΎ. ΠΡΡΠ°ΡΠΈ, ΡΡΠΎΠΈΡ ΡΡΠ΅ΡΡΡ, ΡΡΠΎ text-align: justify Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ text-align: left Π½Π° Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΡ
ΠΏΠΎΡΠΎΠΌΠΊΠ°Ρ
β Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠ°Ρ ΠΌΠ΅ΡΠ°. ΠΡΠΈΠΌ ΡΠ°ΠΌΡΠΌ ΠΌΡ ΠΊΠ°ΠΊ Π±Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π°ΡΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΏΡΠ΅ΠΆΠ½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
Π ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΠ°ΡΡΠΈ Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π», ΡΡΠΎ Π½Π°Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ Π½Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΡΡΠΎΠΊΡ, Π° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ ΠΊΡΠΎΠΌΠ΅ Π½Π΅Ρ. ΠΠΎΡΡΠΎΠΌΡ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π² ΠΊΠΎΠ½Π΅Ρ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΡΡΡΡΡΠΊΡ, ΠΈ ΡΠ°ΡΡΡΠ½ΡΠ» Π΅Π³ΠΎ Π½Π° 100% ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ Π·Π°ΡΡΠ°Π²ΠΈΠ² Π΅Π³ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡΡΡ Π½Π° ΡΠ°ΠΌΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΡΡΠΎΡΠΊΡ Π² ΡΠΏΠΈΡΠΊΠ΅. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅Ρ
ΠΈΡΡΡΡ
ΠΏΡΠΈΡΠΌΠΎΠ² (height: 0, visibility: hidden) Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΠΏΠΎΡΡΠΈ ΡΡΠΎ ΡΠΏΡΡΡΠ°Π» Π΅Π³ΠΎ. ΠΠΎΡΠ΅ΠΌΡ Ρ ΡΠΊΠ°Π·Π°Π» Β «ΠΠΎΡΡΠΈ ΡΡΠΎ»? ΠΠ± ΡΡΠΎΠΌ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅, Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ Π½Π°Ρ Π²ΡΡΠ»ΠΎ.
ΠΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ Π±ΡΠΎΡΠ°Π΅ΡΡΡ Π² Π³Π»Π°Π·Π°, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΏΡΠΈ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ Π½Π°Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½. ΠΡΠΈ ΠΏΡΠ½ΠΊΡΠ°Ρ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ, ΡΡΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠ°Π΄ΠΎΠ²Π°ΡΡ. ΠΠΎ Π²ΡΡ ΡΠ°ΠΊΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΡΠ·Π½Π°ΡΡ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ Π²ΡΡ ΡΠ°ΠΊ ΠΆΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΈ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ°Π·Π½Π°ΡΠΈΠΌ ΠΏΠ°ΡΠ΅ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΊΠ»Π°ΡΡΡ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ ΡΡΠΎ.
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li></li> </ul>
ΠΠΎΠ±Π°Π²ΠΈΠΌ Π΄Π»Ρ Π½ΠΈΡ ΡΠ²ΠΎΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π°.
.first { width: 150px;} .third { width: 200px;}
ΠΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ.
Π― ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ» ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠΊΠ°ΠΊΠΈΠ²Π°Π»ΠΈ Π½Π° Π΄ΡΡΠ³ΡΡ ΡΡΡΠΎΠΊΡ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π² ΡΠ΅ΠΊΡΡΠ΅. ΠΠΎ, Π΅ΡΠ»ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ°, ΡΠΎ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ! ΠΡΠΎΠ±Π΅Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΎΡΡΠ°ΡΡΡΡ ΡΠ°Π²Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠΌΠΈ, Π΄Π°ΠΆΠ΅ Π½Π΅ ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ Π΄Π²ΠΎΠΈΡ
ΠΈΠ· Π½ΠΈΡ
, ΠΌΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ.
Π’.Π΅. ΠΌΠΎΠΆΠ½ΠΎ Ρ Π»ΡΠ³ΠΊΠΎΡΡΡΡ Π·Π°ΡΠ²Π»ΡΡΡ, ΡΡΠΎ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄, Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π² ΠΊΠΎΠ½ΡΠ΅ β Π΄Π°ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ ΡΠΊΡΠ°Π½ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΡΠΎ Π΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π½Π°Ρ Π½Π΅ ΡΠ°Π·ΠΎΡΠ°ΡΡΠ΅Ρ.
Π’Π°ΠΊ, Π½Ρ Π° ΡΠ΅ΠΏΠ΅ΡΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉ, Π½Π°ΡΡΠ°Π»ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ΄Π»ΠΈΡΡ Π»ΠΎΠΆΠΊΡ Π΄ΡΠ³ΡΡ.
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, Π²ΠΎ Π²ΡΠ΅Ρ
ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΠ» Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΡΠΎΠΌΠ΅ IE6-7.
ΠΠΎ-Π²ΡΠΎΡΡΡ
, ΠΎΠΏΡΡΡ ΠΆΠ΅, ΠΊΠ°ΠΊ Π²Ρ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅ΡΡ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ°Ρ
, Π²Π½ΠΈΠ·Ρ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ, Π³Π΄Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅, Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ.
ΠΠ΅ΡΠ²Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° β ΡΡΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° IE6-7. ΠΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄Ρ ΡΠΊΡΠΈΠ½ΡΠΎΡΡ, ΡΠΊΠ°ΠΆΡ ΡΡΠ°Π·Ρ, ΡΡΠΎ Π½Π°Ρ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°ΠΌ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡΠ½ΠΊΡΡ Π² ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΏΡΠΈΠΆΠ°ΡΡ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ ΠΈ Π½Π΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π² ΡΡΡΠΎΠΊΠ΅. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠ°ΡΡΠ΅Ρ IE6-7 ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ ΡΠ΅Π³ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <li>. Π Π½Π΅Ρ ΡΠ΅Π³ΠΎΠ² β Π·Π½Π°ΡΠΈΡ Π½Π΅Ρ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ, ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ text-align: justify ΠΏΡΠΎΠΏΡΡΠΊΠ°Π΅Ρ Π½Π°ΡΡ ΡΡΡΠΎΠΊΡ, ΡΠΎΡΡΠΎΡΡΡΡ ΠΏΠΎ ΡΡΡΠΈ ΠΈΠ· ΠΎΠ΄Π½ΠΈΡ «ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΡ » ΡΠ»ΠΎΠ², ΠΏΡΠΈΠΆΠ°ΡΡΡ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ.
ΠΠ° ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π°Π½Π½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΌΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ Π½Π° ΡΠ°ΠΌΡΡ Π²ΡΡΠΎΠΊΡΡ Π³ΠΎΡΡβ¦ Π½Π° MSDN. ΠΠ΄Π°β¦ Π½Π°ΠΉΡΠΈ ΡΡΠΎ Π»ΠΈΠ±ΠΎ Π½Π° ΡΡΠΎΠΌ ΡΠ°ΠΉΡΠ΅, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΡΡ ΡΡΡΠ΄Π½ΠΎΡΡΡ. ΠΠΎ, Π²ΡΡ ΠΆΠ΅ ΠΏΠΎΠ²ΠΎΠ·ΠΈΠ²ΡΠΈΡΡ, Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ, ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π½Π°ΠΉΠ΄Π΅Π½ΠΎ! text-justify: newspaper β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π±ΡΠΊΠ²Π°ΠΌΠΈ ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ. MSDN Π·Π°ΡΠ²Π»ΡΠ΅Ρ, ΡΡΠΎ ΡΡΠ° Π²Π΅ΡΡ «Π‘Π°ΠΌΠ°Ρ Π½Π°Π²ΠΎΡΠΎΡΠ΅Π½Π½Π°Ρ ΡΠΎΡΠΌΠ° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π»Π°ΡΠΈΠ½ΡΠΊΠΎΠ³ΠΎ Π°Π»ΡΠ°Π²ΠΈΡΠ°», Π° Π²ΠΎΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π΅ΡΡ Π΅ΡΡΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, ΡΡΠΎ Π΄Π»Ρ Π°ΡΠ°Π±ΡΠΊΠΈΡ
ΡΠ΅ΠΊΡΡΠΎΠ² ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΠΈ ΡΠ°ΠΌΠΈ Π±ΡΠΊΠ²Ρ.
ΠΡΠ»ΠΈΡΠ½ΠΎ, Π½Π°ΠΌ ΠΊΠ°ΠΊ ΡΠ°Π· Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅. ΠΠ°Π²Π°ΠΉΡΠ΅-ΠΊΠ° ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ ΠΈΡ
ΡΠ»ΠΎΠ²Π° Π½Π° Π΄Π΅Π»Π΅.
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ text-justify: newspaper; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; } ul li.helper { width: 100%; height: 0; visibility: hidden; } .first { width: 150px;} .third { width: 200px;}
Π Π²ΠΎΡ ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
ΠΠΎΠ±Π΅Π΄Π°! IE6-7 Π±ΡΠ»ΠΈ ΠΏΠΎΠ±Π΅ΠΆΠ΄Π΅Π½Ρ ΠΈΡ ΠΆΠ΅ ΠΎΡΡΠΆΠΈΠ΅ΠΌ. ΠΠ΄ΠΎΡΠΎΠ²ΠΎ. Π’Π΅ΠΏΠ΅ΡΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π½Π°ΡΠΈΠ½Π°Ρ Ρ IE6, Π½Π°Ρ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ. ΠΡΡ ΠΎΠ΄ΠΈΡ, ΡΡΠΎ MSDN Π½Π΅ ΠΏΠΎΠ΄Π²Π΅Π»ΠΈ ΠΈ ΠΈΡ ΡΠ»ΠΎΠ²Π° ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΄ΠΈΠ»ΠΈΡΡ Π½Π° Π΄Π΅Π»Π΅. Π’Π°ΠΊ ΡΡΠΎ text-align: justify Π²ΡΡΡΡΠΈΠ» Π½Π°Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Π±Π΅ΡΡΠΌ Π΅Π³ΠΎ Π½Π° Π·Π°ΠΌΠ΅ΡΠΊΡ ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΊ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π²ΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
ΠΡΠΎΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ²ΡΠ·Π°Π½Π° Ρ Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ ΠΎΡΡΡΡΠΏΠΎΠΌ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠ·ΠΎΠΌ ΡΠΏΠΈΡΠΊΠ° ΠΈ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΎΠΉ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. Π ΡΡΠΌ ΠΆΠ΅ Π΄Π΅Π»ΠΎ? Π Π΄Π΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²ΡΡ Π²ΠΏΠΎΠ»Π½Π΅ Π·Π°ΠΊΠΎΠ½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΠΈ ΡΡΠΈΠΌΠΈ ΡΡΡΠ°Π½Π½ΡΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ ΡΠ²Π»ΡΡΡΡΡ Π½ΠΈ ΠΊΡΠΎ ΠΈΠ½ΡΠ΅, ΠΊΠ°ΠΊ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» (line-height) ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° (font-size), ΠΊΠΎΡΠΎΡΡΠ΅ Π°ΠΏΡΠΈΠΎΡΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ Ρ ΡΡΡΠΎΠΊ ΠΈ Π±ΡΠΊΠ² Π² ΡΠ΅ΠΊΡΡΠ΅. ΠΠ°ΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ β Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΡΡΡΠΈ, Π° ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ½Π°ΡΡΠΆΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΠΈ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡ ΠΏΠΎΠ΄ ΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π°.
ΠΠ°ΠΊ Π±ΡΡΡ? Π Π»Π΅Π³ΠΊΠΎ! ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ²Π΅ΡΠΈΡΡ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΠ΅ ΡΡΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ, Π° ΡΠΆΠ΅ Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² Π²ΠΎΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΡ
Π² ΠΏΡΠ΅ΠΆΠ½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΡΠΎΠ±ΡΠ΅ΠΌ.
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* ΠΠ±Π½ΡΠ»ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ*/ line-height: 0; font-size: 1px; /* 1px Π΄Π»Ρ Opera */ /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ text-justify: newspaper; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΠΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΠΊΡΠΎΠΌΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ*/ line-height: normal; font-size: 14px; /* ΠΠ΅Π· Π½Π΅Π³ΠΎ Π² Opera Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΡΠΏ ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ */ vertical-align: top; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; } ul li.helper { width: 100%; height: 0px; visibility: hidden; overflow: hidden; } .first { width: 150px;} .third { width: 200px;}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ.
ΠΠΎ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΡ
ΠΠΎΡΠ»Π΅ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈΡΠ½ΠΎ! ΠΡΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ. ΠΠ±Π½ΡΠ»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Ρ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΠΎΠΌΠΎΠ³Π»ΠΎ Π½Π°ΠΌ. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΠΎΠΈΡ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π² ΡΠ²ΡΠ·ΠΈ Ρ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° ΠΌΡ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ Π½Π°ΡΠΈΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΡΡΠΈΡΡ Π² ΡΠ°ΠΊΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ Π΄Π»ΠΈΠ½Ρ, ΠΊΠ°ΠΊ em, Π° ΡΠ°ΠΊ ΠΆΠ΅ % Π΄Π»Ρ <body> Π½Π΅ ΠΏΡΠΈΠ½Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°. ΠΠΎ, Π° ΡΠ΅Π»ΠΎΠΌ, Π½Π°Ρ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΡΡ ΠΈΡΠΎΠ³ΠΈ ΠΈ ΠΈΠ΄ΡΠΈ Π΄Π°Π»ΡΡΠ΅, Π²Π΅Π΄Ρ Π½Π°ΠΌ ΠΆΠ΅ ΠΌΠ°Π»ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ, Π½Π°ΠΌ ΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ Π»ΡΡΡΠ΅, Π½Π΅ ΠΏΡΠ°Π²Π΄Π° Π»ΠΈ?
ΠΠΎΠ΄Π²ΠΎΠ΄Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠ΅ ΠΈΡΠΎΠ³ΠΈ, ΡΠΊΠ°ΠΆΡ, ΡΡΠΎ Π΄Π°Π½Π½ΡΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ ΠΏΠΎΠΊΠ° ΡΡΠΎ Π»ΠΈΠ΄Π΅Ρ ΡΡΠ΅Π΄ΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡΠΈΡ
Π΄ΠΎ ΡΠ΅ΠΉ ΠΏΠΎΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΠΈ ΡΡΠΎ, Ρ Π»ΠΈΡΠ½ΠΎ, Π½Π΅ Π²ΠΈΠΆΡ Π² Π½ΡΠΌ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ½Π°, ΠΏΡΠ°Π²Π΄Π°, ΠΊΡΠΎΠΌΠ΅β¦ ΠΡΠΎΠΌΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΊΠΎΠ½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ, ΠΏΠ»ΡΡ, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ, Π½Π΅Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ % ΠΈ em. ΠΠΎ, ΡΡΠΈ Π½Π°ΡΡΠ½ΡΡΡΠ΅ ΠΌΠΈΠ½ΡΡΡ, Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΎΡΠΊΠ°Π·Π° ΠΎΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ°. Π’Π°ΠΊ ΡΡΠΎ ΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈ ΠΈΠ΄ΡΠΌ Π΄Π°Π»ΡΡΠ΅.
ΠΠ°ΡΠΈΠ°Π½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
ΠΠ°ΡΠΈΠ°Π½Ρ 4 β ΠΠ·Π±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅ Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΡΠ΅Π»ΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠ°Π²Ρ Π΅Π³ΠΎ Π² ΠΊΠΎΠ½Π΅Ρ ΡΠΏΠΈΡΠΊΠ°. Π‘ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΡΡΠΎΡ ΠΌΠ°Π½Π΅Π²Ρ ΠΏΡΠΈΠ½Π΅Ρ ΡΠ²ΠΎΠΈ ΠΏΠ»ΠΎΠ΄Ρ, Π½ΠΎ Ρ Π΄ΡΡΠ³ΠΎΠΉβ¦ Π½ΠΎ Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΡΠΎΠ·Π΄Π°Π» Π½Π΅ΠΊΠΈΠ΅ Π½Π΅ΡΠ΄ΠΎΠ±ΡΡΠ²Π°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΡΠ½ΠΊΡΠΎΠ², Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠ°ΡΡ, Π΄Π° ΠΈ ΠΏΠΎΡΠΎΠΌ ΡΡΠΎΡ «Ρ
Π²ΠΎΡΡ» ΠΏΠΎΡΡΠΈΡ Π½Π°ΡΡ ΡΡΡΡΠΊΡΡΡΡ, Π·Π°ΡΠΎΡΡΡ Π΅Ρ. Π ΡΡΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅, Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ Π½Π΅Π³ΠΎ, Π½Π΅ ΠΈΡΠΏΠΎΡΡΠΈΠ² ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
Π CSS2.1 ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ Π΅ΡΡΡ ΡΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΠΈ, ΠΊΠ°ΠΊ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎ ΡΠ°ΠΊΠΈΠ΅ Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΡΠ΅ ΡΡΡΠ½ΠΎΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Ρ ΠΊΠ°ΠΊΠΈΠΌ Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ Π²ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π΅Π³ΠΎ Π½Π°ΡΠ°Π»ΠΎ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Π΅Ρ. ΠΠΎΡΠ΅ΠΌΡ Π±Ρ Π½Π΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π½Π°Ρ Π»ΠΈΡΠ½ΠΈΠΉ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌβ¦
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* ΠΠ±Π½ΡΠ»ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ*/ line-height: 0; font-size: 1px; /* 1px Π΄Π»Ρ Opera */ /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ text-justify: newspaper; zoom:1; } ul:after { width: 100%; height: 0; visibility: hidden; overflow: hidden; content: ''; display: inline-block; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΠΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΠΊΡΠΎΠΌΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ*/ line-height: normal; font-size: 14px; /* ΠΠ΅Π· Π½Π΅Π³ΠΎ Π² Opera Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΡΠΏ ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ */ vertical-align: top; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; }
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ ΠΌΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ :after, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ°. ΠΡΡΡΠ°Π²ΠΈΠ² Π΅ΠΌΡ ΡΠ΅ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠΎ ΠΈ Π±ΡΠ²ΡΠ΅ΠΌΡ, Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ, ΠΌΡ, ΠΏΠΎ ΡΡΡΠΈ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΠΎΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, Π½ΠΎ Π½Π΅ Π·Π°Π»Π΅Π·Π°Ρ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ. Π’.Π΅. ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΏΡΡΡΠΎΠΉ, Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π Π²ΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ.
ΠΠ΄ΠΎΡΠΎΠ²ΠΎ! Π’ΡΡΠΊ Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΡΠ°Π±ΠΎΡΠ°Π». Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° ΡΠΈΡΡΠ°Ρ, Π°ΠΊΠΊΡΡΠ°ΡΠ½Π°Ρ ΠΈ Π±Π΅Π· Π»ΠΈΡΠ½Π΅Π³ΠΎ «ΠΌΡΡΠΎΡΠ°». ΠΠ°ΠΌ ΡΠ΄Π°Π»ΠΎΡΡ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΌΠ΅Π½ΠΈΠ² Π΅Π³ΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ.
ΠΠΎ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, Π½Π΅ ΠΎΠ±ΠΎΡΠ»ΠΎΡΡ Π±Π΅Π· IE6-7 ΠΏΡΠΈΠΊΠ»ΡΡΠ΅Π½ΠΈΠΉ. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
IE6-7 Π½Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ :after ΠΈ :before. Π Π΅ΡΠ»ΠΈ Π½Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ
Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ², Π° Π·Π½Π°ΡΠΈΡ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΏΠΎΠΏΡΠΎΡΡΡ Π½Π΅ΡΠ΅Π³ΠΎ. ΠΠΎΡΡΠΎΠΌΡ ΠΊΠ°ΡΡΠΈΠ½Π° Π² ΡΡΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΡΠ°ΠΊΠΎΠ²Π°.
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΡΠΊΡΠΈΠ½ΡΠΎΡΠ°, IE6-7 ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠΎΠ², ΠΏΡΠΈΠΆΠΈΠΌΠ°Ρ ΠΈΡ
Π²ΠΏΠ»ΠΎΡΠ½ΡΡ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ. ΠΠ°ΠΆΠ΅ Π½Π΅ ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΌΡ ΡΠΆΠ΅ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°Π»ΠΈ ΡΡΠΆΡΠ»ΡΡ Π°ΡΡΠΈΠ»Π»Π΅ΡΠΈΡ Π² Π²ΠΈΠ΄Π΅ text-justify: newspaper. ΠΠΎΡΠ΅ΠΌΡ ΠΆΠ΅ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ? ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΡΡΡΠ½ΠΈΠΌ.
ΠΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π²ΡΡ Π΄Π΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ text-justify: newspaper Π»ΠΈΡΡ Π΄Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ Π½Π°ΡΠΈ Π±ΡΠΊΠ²Ρ (inline-block), Π½ΠΎ Π½Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ. ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΠΎΠ½ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΡΠΎΠΊΠ΅, ΠΊΠ°ΠΊ Π±Ρ ΠΎΠ½ Ρ
ΠΎΡΠ΅Π», ΡΡΠΎΠ±Ρ ΠΎΠ½Π° Π±ΡΠ»Π° ΡΠ°ΡΡΡΠ½ΡΡΠ°, Π° text-align: justify ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΠ΅ΠΉ ΡΠΈΠ»ΠΎΠΉ. Π’.Π΅. text-align: justify ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ, Π° text-justify: newspaper Π»ΠΈΡΡ ΡΡΠΎΡΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡΡ.
ΠΠ°, Π½ΠΎ ΡΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π²ΠΎΠΏΡΠΎΡ: «ΠΡΠ»ΠΈ Π΅ΡΡΡ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈ ΡΠΈΠ»Π°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π΅Ρ ΠΈΡΠΏΠΎΠ»Π½ΠΈΡΡ, ΡΠΎ ΠΏΠΎΡΠ΅ΠΌΡ ΠΆΠ΅ ΡΠΎΠ³Π΄Π° Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ?». ΠΡΠ²Π΅Ρ ΠΊΡΠΎΠ΅ΡΡΡ Π² ΡΠ°ΠΌΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ text-align: justify. ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, Π² ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΠΈ Π΅Π³ΠΎ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° Ρ ΡΠΏΠΎΠΌΡΠ½ΡΠ» ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ Π½Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΡΡΠΎΠΊΡ Π² ΡΠ΅ΠΊΡΡΠ΅. Π ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ ΡΠ±ΡΠ°Π»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΠΏΠΈΡΠΊΠ°, ΡΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π½Π°ΡΠ° ΡΡΡΠΎΠΊΠ° (ΠΏΡΡΠΊΠ°ΠΉ Π΄Π°ΠΆΠ΅ ΠΎΠ½Π° ΠΎΠ΄Π½Π°) Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ β ΡΡΠ°Π»Π° ΡΠΆΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ, ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΎΡΠΊΠ°Π·Π°Π»ΡΡ Ρ Π½Π΅ΠΉ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΠΠ°ΠΊ ΠΆΠ΅ Π±ΡΡΡ? ΠΡΡΡ Π»ΠΈ Π²ΡΡ
ΠΎΠ΄?
Π ΡΡΠ°ΡΡΡΡ ΠΌΠΈΡ Π½Π΅ Π±Π΅Π· Π΄ΠΎΠ±ΡΡΡ
Π»ΡΠ΄Π΅ΠΉ, ΠΈ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΊΠΎΠΉ Π΄ΠΎΠ±ΡΡΠΉ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ Π½Π°ΠΏΡΠ°Π²ΠΈΠ» ΠΌΠ΅Π½Ρ Π½Π° Π²Π΅ΡΠ½ΡΠΉ ΠΏΡΡΡ. ΠΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Ρ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄ Π½ΠΎΡΠΎΠΌ. text-align-last β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ text-align: justify Π² ΡΠ°ΠΌΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΡΠ΅ΠΊΡΡΠ°, Π΅ΡΠ»ΠΈ ΠΊ Π½Π΅ΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ½ ΡΡΠΎΡ ΡΠ°ΠΌΡΠΉ text-align: justify. ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΊ ΡΠ΅ΠΊΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΉ text-align: justify, ΡΠΎ, Π²ΠΈΠ΄Ρ ΡΡΠΎ, text-align-last ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΡΡΡΠΏΠ°Π΅Ρ ΠΏΠ»ΠΎΡ
ΠΎ ΠΈ ΡΡΠΎ Π΅ΠΌΡ ΠΏΡΠΈΠ΄ΡΡΡΡ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΡΠΎΡΠΊΠ΅ ΡΠΎΠΆΠ΅.
Π‘Π°ΠΌΠΎΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅, ΡΡΠΎ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° Internet Explorer, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ Π½Π°ΠΌ ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ Π½ΡΠΆΠ΅Π½). Π ΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΡΠ° ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΡ ΠΊ Π΄Π΅Π»Ρ.
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* ΠΠ±Π½ΡΠ»ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ*/ line-height: 0; font-size: 1px; /* 1px Π΄Π»Ρ Opera */ /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ text-justify: newspaper; zoom:1; /* ΠΠΊΠ»ΡΡΠ°Π΅ΠΌ Π² ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΡΡΠΎΠΊΡ*/ text-align-last: justify; } ul:after { width: 100%; height: 0px; visibility: hidden; overflow: hidden; content: ''; display: inline-block; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΠΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΠΊΡΠΎΠΌΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ*/ line-height: normal; font-size: 14px; /* ΠΠ΅Π· Π½Π΅Π³ΠΎ Π² Opera Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΡΠΏ ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ */ vertical-align: top; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; }
ΠΠ°! Π£ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ. text-align-last: justify ΡΠ΄Π΅Π»Π°Π» ΡΠΎ, ΡΡΠΎ ΠΎΡ Π½Π΅Π³ΠΎ ΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎΡΡ, ΠΈ ΡΠ΄Π΅Π»Π°Π» ΡΡΠΎ Π½Π° 5 Π±Π°Π»Π»ΠΎΠ². ΠΠ»Π³ΠΎΡΠΈΡΠΌ Π²ΠΊΠ»ΡΡΠΈΠ»ΡΡ Π² ΡΠ°Π±ΠΎΡΡ, Π² Π½Π°ΡΠ΅ΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΠΈ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅. Π’Π°ΠΊ ΡΡΠΎ ΠΏΡΠ°Π·Π΄Π½ΡΠ΅ΠΌ ΠΏΠΎΠ±Π΅Π΄Ρ ΠΈ ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΠΌ ΠΈΡΠΎΠ³ΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π°.
ΠΡ ΡΡΠΎ ΠΆ, Ρ Π΄ΠΎΠ²ΠΎΠ»Π΅Π½. ΠΠΎΠ²ΠΎΠ»Π΅Π½ ΡΠ΅ΠΌ, ΡΡΠΎ Π½Π°ΠΌ ΡΠ΄Π°Π»ΠΎΡΡ Π½Π°ΠΉΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΡΡΠΎΠΉΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΡΠΈΡΡΠΌ Π½Π΅ ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΉΡΠΈ, Π° ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π²ΠΎ Π²ΡΡΠΌ ΠΈ Π΄ΠΎΠ²Π΅ΡΡΠΈ Π΅Π³ΠΎ Π΄ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΠΈ, Π·Π°ΡΡΠ°ΡΠΈΠ² ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΠΊΠΎΠ΄Π° ΠΈ Π½Π΅ Π·Π°ΡΠΎΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. ΠΠ° Π»ΠΈΡΠΎ ΠΎΠ΄Π½ΠΈ ΠΏΠ»ΡΡΡ, Π° ΡΡΠΎ ΠΆΠ΅ Ρ ΠΌΠΈΠ½ΡΡΠ°ΠΌΠΈ? ΠΠ°ΠΊ ΠΏΠΎ ΠΌΠ½Π΅, ΡΠ°ΠΊ ΠΈΡ ΠΏΠΎΠΏΡΠΎΡΡΡ β Π½Π΅Ρ. ΠΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ, Π² ΡΡΠΎΠΌ ΠΌΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»ΡΡΡΠΈΠ»ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ. Π Π°Π·Π²Π΅ ΡΡΠΎβ¦
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΠΎΠΈΡ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π² ΡΠ²ΡΠ·ΠΈ Ρ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° ΠΌΡ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ Π½Π°ΡΠΈΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΡΡΠΈΡΡ Π² ΡΠ°ΠΊΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ Π΄Π»ΠΈΠ½Ρ, ΠΊΠ°ΠΊ em, Π° ΡΠ°ΠΊ ΠΆΠ΅ % Π΄Π»Ρ <body> Π½Π΅ ΠΏΡΠΈΠ½Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
ΠΠΎ, ΠΎΠΏΡΡΡ ΠΆΠ΅, ΡΡΠΈ «ΠΌΠΈΠ½ΡΡΡ» Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ Π½Π°ΡΡΠΆΠΊΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°ΡΡ ΡΠ°ΠΊΠΎΠ²ΡΠΌΠΈ. ΠΡ
Π½Π΅Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΡΡΡ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎ Π½ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°Π±ΡΡΡ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π½Π΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΈΠ°Π»ΡΠ½ΠΎ.
Π’Π°ΠΊ ΡΡΠΎ Π² ΡΠ΅Π»ΠΎΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅, Π½Π°Π΄ΡΠΆΠ½ΠΎΠ΅ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅.
ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
Π Π΅Π·ΡΠΌΠ΅
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ Π½Π°ΠΌ Π² ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, Π½ΠΎ ΠΈ ΡΠ°ΠΊ ΠΆΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΡ ΡΠ°Π±ΠΎΡΡ Π²ΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ Π΄Π΅ΡΠ°Π»Π΅ΠΉ, ΡΡΠ°ΡΡΠ²ΡΡΡΠΈΡ
Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅. ΠΡΡ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ Π²Π΅ΡΠ΅ΠΉ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π΄Π΅Π»ΠΎ. ΠΠΎΡΡΠΎΠΌΡ Ρ Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ°ΡΡ ΡΡΠ°ΡΡΡ, ΠΈ Π½Π΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·.
Π― Π±Π΅Π·ΡΠΌΠ½ΠΎ ΡΠ°Π΄, ΡΡΠΎ Π½Π°ΠΌ ΡΠ΄Π°Π»ΠΎΡΡ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ΅Π»ΠΈ ΠΈ Π½Π°ΠΉΡΠΈ Π΄ΠΎΡΡΠΎΠΉΠ½ΠΎΠ΅ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
ΠΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ
1. ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΡΠ°Π·Π½ΠΎΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ (Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ Π½Π΅ΡΠ°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ
ΠΊΡΠΎ Π½ΠΈΠ±ΡΠ΄Ρ Π½Π°ΡΠΎΠ»ΠΊΠ½ΡΡ Π½Π° Π²Π΅ΡΠ½ΡΠΉ ΠΏΡΡΡ)
2. ΠΠ°ΡΠΈΠ°Π½Ρ Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ (Π Π°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ)
3. ΠΠ°ΡΠΈΠ°Π½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (Π Π°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅)
4. ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (Π Π°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅)
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΎΡ 08.10.2014
ΠΠ°ΡΠΈΠ°Π½Ρ 5 β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π½ΠΎΠ²ΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ
5. ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡΠΎΠ² ΠΈ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΌ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ΠΌ
Π‘ΠΌ. ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΡΠ°ΡΡΡ
P.S. ΠΡΠΎ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ:
Π Π°ΡΡΡΠ½ΡΡΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ CSS Π² ΡΠΎΠ½ΠΎΠ²ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ — ΡΠΎΠ»ΡΠΊΠΎ Ρ CSS
Π― ΡΠΎΠ³Π»Π°ΡΠ΅Π½ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ div ΡΠΎ 100% ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ. Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ 100% ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π΄Π»Ρ ΡΠ΅Π»Π° Π² CSS ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΠΏΠΎΠ»Ρ ΠΈ ΠΎΡΡΡΡΠΏΡ ΡΠ°Π²Π½ΡΠΌΠΈ Π½ΡΠ»Ρ. ΠΡΡΠ³Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Ρ ΡΡΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΎΠ±Π»Π°ΡΡΡ Π²ΡΠ±ΠΎΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ Π½Π΅ΡΠ΄Π°ΡΠ½ΠΎΠΌΡ ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΠ³Π΄Π° Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΈΠΌΠ΅Π΅Ρ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΠΎΠΉΡΠΈ ΡΡΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS user-select: none
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ
ΠΠΏΡΡΡ ΠΆΠ΅, Internet Explorer — ΠΏΠ»ΠΎΡ ΠΎΠΉ ΠΏΠ°ΡΠ΅Π½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ Π½Π΅ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π΅Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Π²ΡΠ±ΠΎΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ — Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΄Π°ΠΆΠ΅ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ Internet Explorer 10, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π²Π°Ρ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ JavaScript Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ Π²ΡΠ±ΠΎΡΠ° ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, http://www.felgall.com/jstip35.htm) ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅ΡΠΎΠ΄ CSS 3 background-stretch.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π»Ρ SEO Ρ Π±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ» ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ Π΅ΡΠ»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄ΠΎΠ»Π³ΠΎ (ΡΠΎ Π΅ΡΡΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Ρ Π±Π΅Π»ΡΠΌ ΡΠΎΠ½ΠΎΠΌ), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ° CSS Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS object-fit
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ
Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ»ΠΈ
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ° CSS Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS object-fit
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΈΠ»ΠΈ
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ; ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ «ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½» ΠΈΠ»ΠΈ «ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈ Π·Π°Π½ΡΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΡΠ°, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΉ».
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΠ°ΡΠΈΠΆΠ°. ΠΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠΎΡΡ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ (200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ Π²ΡΡΠΎΡΡ (300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ), ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 200×300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. (Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΡΠ½ΠΈΡΡΠΎΠΆΠ΅Π½ΠΎ).
ΠΠ΄Π΅ΡΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ object-fit
in. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎ-ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°
ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·
ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
-
Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ
— ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ½ΡΡΠΎ ΠΈΠ»ΠΈ ΡΠΆΠ°ΡΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ . -
ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ
— ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½, Π½ΠΎ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ -
ΠΊΡΡΡΠΊΠ°
— ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ -
Π½Π΅Ρ
— Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ -
Π² ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΠΎΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π΅
— ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΎ Π΄ΠΎ ΡΠ°ΠΌΠΎΠΉ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ Π²Π΅ΡΡΠΈΠΈΠ½Π΅Ρ
ΠΈΠ»ΠΈΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΠΏΠΎΡΠ°Π΄ΠΊΠΈ: ΠΊΡΡΡΠΊΠ°;
ΠΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ object-fit: cover;
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½
ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅.ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ:
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ object-fit: contain;
ΠΡΠ»ΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ object-fit: contain;
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½, Π½ΠΎ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ:
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ°: Π·Π°Π»ΠΈΠ²ΠΊΠ°;
ΠΡΠ»ΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ object-fit: fill;
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π·Π°Π΄Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ
ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈΠ»ΠΈ ΡΠΆΠ°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ:
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ°: Π½Π΅Ρ;
ΠΡΠ»ΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ object-fit: none;
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ ΡΠ°Π·ΠΌΠ΅Ρ:
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ°: ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±Π°;
ΠΡΠ»ΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ object-fit: scale-down;
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΎ Π΄ΠΎ ΡΠ°ΠΌΠΎΠΉ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π½Π΅Ρ
ΠΈΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ
:
ΠΡΠΈΠΌΠ΅Ρ
img {
width: 200px;
Π²ΡΡΠΎΡΠ°:
300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ°: ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅;
}
ΠΡΡΠ³ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ΄Π΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ Π΄Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈ 50% ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ 100% Π²ΡΡΠΎΡΡ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΠ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ object-fit
, ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π±ΡΠ΄Π΅Ρ ΡΠ½ΠΈΡΡΠΎΠΆΠ΅Π½ΠΎ:
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ object-fit: cover;
, ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΡΠΎΡ
ΡΠ°Π½ΠΈΠ»ΠΎΡΡ:
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ° CSS ΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΡΡ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° object-fit
.
Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
ΠΡΠΈΠΌΠ΅Ρ
.fill {object-fit: fill;}
.contain {ΠΎΠ±ΡΠ΅ΠΊΡ-ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΉ: ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS Object- * Π‘Π²ΠΎΠΉΡΡΠ²Π°
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠ±ΡΠ΅ΠΊΡΠ° CSS — *:
ΠΠΌΡΡΠ΅ΡΡΠ²ΠΎ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
ΠΏΡΠΈΠ³ΠΎΠ½ΠΊΠ° ΠΎΠ±ΡΠ΅ΠΊΡΠ° | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ»ΠΈ |
ΠΎΠ±ΡΠ΅ΠΊΡ-ΠΏΠΎΠ·ΠΈΡΠΈΡ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ |
ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎ-ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ | CSS-ΡΠ»ΠΎΠ²ΠΊΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ°
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π½Π° Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.ΠΠ½ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π΄ΡΡΠ³ΠΈΡ
Π²ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ
ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ
ΡΠΎΡΠΌΠ°ΡΠΎΠ² Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ object-position
. Π‘Π°ΠΌΠ° ΠΏΠΎ ΡΠ΅Π±Π΅ object-fit
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π΄Π°Π²Π°Ρ Π½Π°ΠΌ Π΄Π΅ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»Ρ.
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ°
ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
ΠΏΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
-
fill
: ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π΅Π³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½. -
ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ
: ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ Π΅Π³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½. -
ΠΎΠ±Π»ΠΎΠΆΠΊΠ°
: ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°, ΡΠ½ΠΎΠ²Π° ΡΠΎΡ ΡΠ°Π½ΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½, Π½ΠΎ ΡΠ°ΡΡΠΎ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. -
Π½Π΅Ρ
: ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. -
Π² ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΠΎΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π΅
: ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄ΡΠ½Π΅Ρ
ΠΈΡΠΎΠ΄Π΅ΡΠΆΠΈΡ
, ΡΡΠΎΠ±Ρ Π½Π°ΠΉΡΠΈ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°.
ΠΠΎΡ ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ:
img {
Π²ΡΡΠΎΡΠ°: 120 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.ΠΏΠΎΠΊΡΡΡΠΈΠ΅ {
ΡΠΈΡΠΈΠ½Π°: 260 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΎΠ±ΡΠ΅ΠΊΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ: ΠΊΡΡΡΠΊΠ°;
}
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠΎΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅Π²Π°, ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΎΠ±ΡΠ΅Π·Π°Ρ Π²Π΅ΡΡ Π½ΡΡ ΠΈ Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π½ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° object-position
.
ΠΠ΅ΠΌΠΎ
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π½ΠΈΠΆΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΠΏΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΡ , ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Ρ ΠΎΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΆΠΈΠΌΠ°Π»ΠΎΡΡ Π² ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ (ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠΎΠ±Ρ Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ):
Π‘ΠΌ. Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Pen Π ΠΎΠ±ΠΈΠ½Π° Π Π΅Π½Π΄Π»Π° (@robinrendle) Π½Π° CodePen.
ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅, ΡΠΎ Π² Π½Π΅Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠ΅ΡΡΠΉ ΡΠΎΠ½.
Π‘ΠΎΠΏΡΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ
ΠΡΡΠ³ΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ iOS 8-9.3 ΠΈ Safari 7-9.1 ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ object-fit
, Π½ΠΎ Π½Π΅ object-position
.
ΠΠ°ΡΡΠΎΠ»ΡΠ½ΡΠΉ ΠΠ
Chrome | Firefox | IE | Edge | Safari | ||
---|---|---|---|---|---|---|
32 | 36 | ΠΠ΅Ρ | 79 | 9024 9024 10 Mobile | 79 | 9024 10105 |
Android Chrome | Android Firefox | Android | iOS Safari | |||
89 | 86 | 4.4,3-4,4,4 | 10,0-10,2 |
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΈΡΡΠΌΠ°Ρ — Klaviyo
ΠΠ±Π·ΠΎΡ
ΠΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠ°Π±Π»ΠΎΠ½Π°ΠΌΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ Π² Klaviyo Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠ° ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π±Π»ΠΎΠ½Π° ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ. Π₯ΠΎΡΡ Π² Π²Π°ΡΠ΅ΠΉ ΡΡΠ΅ΡΠ½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ Π΅ΡΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠ° Image Library , Ρ Π²Π°Ρ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π½ΡΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ — Π²ΠΊΠ»ΡΡΠ°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΈΠ· ΡΠ°Π±Π»ΠΎΠ½Π°.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ
Klaviyo ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°ΠΉΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ JPG, PNG ΠΈ GIF.ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ°ΠΉΠ»Ρ PNG Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ ΡΠ΅ΠΊΡΡ.
ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΉ Klaviyo, ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 5 ΠΠ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 1 ΠΠ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΌΠΎΠ³ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, ΡΡΠΎ Π·Π°ΡΡΡΠ΄Π½ΡΠ΅Ρ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΠ»ΡΡΠ°ΡΠ΅Π»Ρ.
Π ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ 72 ΡΠΎΡΠΊΠΈ Π½Π° Π΄ΡΠΉΠΌ. Π‘ΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ Π²Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°Π»ΠΈ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΈΡΠΈΠ½Ρ ΠΈ ΠΌΠ΅Π½Π΅Π΅ 2000 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²ΡΡΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΠ±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
ΠΡΡΠ°Π²ΠΈΡΡ Π±Π»ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Klaviyo — ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° Π² ΡΠ°Π±Π»ΠΎΠ½:
ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΡΠ΅ Π² ΡΠ°Π±Π»ΠΎΠ½, ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ Π±Π»ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°Π±Π»ΠΎΠ½, Π° Π·Π°ΡΠ΅ΠΌ Π²ΡΠ±ΡΠ°ΡΡ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ Π±Π»ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²Π°ΠΌ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅:
- ΠΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π±Π»ΠΎΠΊ Π΄Π»Ρ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
- ΠΡΠΎΡΠΌΠΎΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ Π½Π°ΠΉΡΠΈ ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
- ΠΠΌΠΏΠΎΡΡ ΠΈΠ· URL-Π°Π΄ΡΠ΅ΡΠ°
- ΠΡΠ±ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ· Π²Π°ΡΠ΅ΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
- ΠΡΠ±ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ· ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² (Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°Π½Ρ Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠΎΠΉ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈ)
- ΠΡΡΠ°Π²ΠΊΠ° URL-Π°Π΄ΡΠ΅ΡΠ° Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΈΠ»ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ , Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΡΠ»ΠΎΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ (ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΠΎΡΠΎΠΊΠΎΠ²)
ΠΡΠ»ΠΈ Π²Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡ, ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 5 ΠΠ.
Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π§ΡΠΎΠ±Ρ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ°Π±Π»ΠΎΠ½Π΅ ΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΡΠ°Π·Π΄Π΅Π» Block Π½Π° Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΠ΄Π΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- ΠΠΎΠ±Π°Π²ΠΈΡΡ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- ΠΡΡΠ΅Π³ΡΠ»ΠΈΡΡΠΉΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- ΠΡΠ±Π΅ΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°
- Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠ»ΠΈ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΡΠΈΠ½ΡΡ ΡΡΡΠ»ΠΊΡ Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ , ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ.ΠΠ΄Π΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΈΠ· ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ, ΠΎΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ²Π΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ²Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ.
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π±Π»ΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ°Π±Π»ΠΎΠ½Π΅ Ρ Π²Π°Ρ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠΎΠ² . ΠΠ΄Π΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅:
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- ΠΠΎΠ±Π°Π²ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ
- ΠΡΡΠ΅Π³ΡΠ»ΠΈΡΡΠΉΡΠ΅ Π½Π°Π±ΠΈΠ²ΠΊΡ
- ΠΠ±Π½ΠΎΠ²ΠΈΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΡ HTML-ΡΠ°Π±Π»ΠΎΠ½Π°Ρ
ΠΠ»Ρ HTML-ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΊΠΎΠΏΠΈΡΡΠ΅ΡΠ΅ Π² Klaviyo (Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² MailChimp), Π²Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ zip-ΡΠ°ΠΉΠ», ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π²Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΠΈΠΌΠΏΠΎΡΡΠ°.
Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π΄Π»Ρ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² MailChimp, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΆΠ΅ Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΠ΅ Π² MailChimp, Klaviyo Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΊΠΎΠΏΠΈΡΡΠ΅Ρ Π²ΡΠ΅ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π·Π°Π³ΡΡΠ·ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Insert Image , ΡΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π°:
ΠΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π²Π°Ρ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ, ΡΡΠΎ Π²Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠ°ΠΊ ΡΠΈΡΡΠΎ ΠΈΠ»ΠΈ ΡΠ΅ΡΠΊΠΎ, ΠΊΠ°ΠΊ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ»ΡΡΡΠΈΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠ² ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΡΠ΅ΡΠΊΠΎΡΡΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΌ ΠΏΠΈΡΡΠΌΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΡΠ°Π²ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² 2 ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°Π±Π»ΠΎΠ½Π΅.ΠΡΡΡ Π΄Π²Π° ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° ΠΊ ΡΡΠΎΠΌΡ:
- ΠΡΡΠ°Π²ΡΡΠ΅ Π±ΠΎΠ»ΡΡΡΡ ΡΠ΅ΡΠΊΡΡ Π²Π΅ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°Π±Π»ΠΎΠ½, Π·Π°ΡΠ΅ΠΌ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ Π΄ΠΎ ΠΆΠ΅Π»Π°Π΅ΠΌΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
- ΠΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΡΠΈΠ½ΠΎΠΉ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Ρ ΠΌΠ΅Π½ΡΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΡΠΈΠ½ΠΎΠΉ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS; ΡΡΠΎΠ±Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΡΠΈΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ Π±Π»ΠΎΠΊ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ CSS
Π’ΠΈΠΏΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
Klaviyo ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΠΏΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ: JPEG, PNG ΠΈ GIF.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠ°ΠΉΠ» PSD, SVG ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ, Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΊΠ°Π·Π°Π½Π½ΡΡ Π²ΡΡΠ΅ ΡΠΈΠΏΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠΈΠΏΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ Π²Π°ΡΠ΅ΠΉ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ, ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π΄Π΅ΡΡ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡΡΡ
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΡΠ°ΡΡΡΠΌΠΈ ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π°:
ΠΠΎΠ»Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ Π±Π»ΠΎΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΡΡΠ΅Π½Π±Π΅ΡΠ³Π°
ΠΠ±Π·ΠΎΡ
ΠΠ»ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΌΡΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΈΠ· Π²ΡΠ΅Ρ Π±Π»ΠΎΠΊΠΎΠ² ΠΌΠ΅Π΄ΠΈΠ°-ΡΠΈΠΏΠ°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π΄Π΅-Π½ΠΈΠ±ΡΠ΄Ρ Π½Π° Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ / ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ.
ΠΠΎΠ²ΡΠΉ Π±Π»ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉGutenberg ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎΡΡΠΈ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ ΠΌΠ΅Π΄ΠΈΠ°Β» Π² ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅. ΠΡΡΠΎΠ²Π½ΡΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ, ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΈΠ»ΠΈ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ, ΡΠΊΠ°ΠΆΠΈΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΡΡΡΠ»ΠΊΡ, Π·Π°ΠΌΠ΅ΡΠ°ΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡ ΠΈ Ρ. Π.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ ΡΡΠΈΠ»Ρ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ.
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Gutenberg
ΠΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Gutenberg Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π΅ ΠΈΠ· ΡΠ²ΠΎΠ΅ΠΉ ΠΌΠ΅Π΄ΠΈΠ°Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. Π’Π΅ΠΏΠ΅ΡΡ Π΅ΡΡΡ 3 ΡΠΏΠΎΡΠΎΠ±Π° Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅:
1.ΠΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° Π½Π° ΡΠΊΡΠ°Π½ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ
2. ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠ°Π³ΡΡΠ·ΠΈΡΡΒ», ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅.
3. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΌΠ΅Π΄ΠΈΠ°Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ
ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ Π±Π»ΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΡΡΠ΅Π½Π±Π΅ΡΠ³Π° ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ Π΅Π³ΠΎ, Π½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ, ΡΠΎΡ ΡΠ°Π½ΠΈΠ² ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- ΠΠΎΠ·ΡΠΌΠΈΡΠ΅ Π»ΡΠ±ΠΎΠΉ ΠΈΠ· ΡΠΈΠ½ΠΈΡ ΠΊΡΡΠΆΠΊΠΎΠ² Π² ΡΠ³Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΈ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΠΉΡΠ΅
- ΠΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΡΡΡΡ ΠΈΠ»ΠΈ Π½Π°ΡΡΠΆΡ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, Ρ ΠΎΡΠΈΡΠ΅ Π»ΠΈ Π²Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΈΠ»ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΎΠΊΡΡΠΆΠ°ΡΡΠ΅ΠΌΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠ΄Π²ΠΈΠ½Π΅Ρ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π»Π΅Π²ΠΎ, ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ Π±Ρ Π±Π»ΠΎΠΊΠΈ Ρ Π²Π°Ρ Π½ΠΈ Π±ΡΠ»ΠΈ ΠΏΠΎΠ΄ Π½ΠΈΠΌ, ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΏΠ»Π°Π²Π°ΡΡ Π²Π²Π΅ΡΡ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π£ Π²Π°Ρ Π΅ΡΡΡ ΡΡΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π½Π° Π²ΡΠ±ΠΎΡ:
Left & Right ΠΏΠ΅ΡΠ΅Π½Π΅ΡΠ΅Ρ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΡΡΠΎΡΠΎΠ½Ρ.Π¦Π΅Π½ΡΡ Π²ΡΡΠΎΠ²Π½ΡΠ΅Ρ Π²Π°Ρ Π±Π»ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ° ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π° ΠΎΡ Π½Π΅Π³ΠΎ.
ΠΠ ΠΠΠΠ§ΠΠΠΠ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΈ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°ΡΠΌ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ.
ΠΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ
ΠΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π±ΡΠ΄ΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΠΏΠΎΠ΄ Π²Π°ΡΡ ΡΠ΅ΠΌΡ, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ:
- ΠΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ
- ΠΡΡΡΠΈΠ²
- ΠΠ°ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ
- Π‘ΡΡΠ»ΠΊΠΈ
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ B Π΄Π»Ρ ΠΆΠΈΡΠ½ΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ°, I Π΄Π»Ρ ΠΊΡΡΡΠΈΠ²Π° ΠΈ ABC Π΄Π»Ρ Π·Π°ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ.
ΠΠΎΡ Π±ΡΡΡΡΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΠΌΠ΅ΡΡΠΎΠΌ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠΎΠΊ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°Π½Π΅Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΏΡΡΠΌΠΎ Π½Π°Π΄ Π±Π»ΠΎΠΊΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ° ΠΏΠ°Π½Π΅Π»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΠ΅ΠΉ.
Π’Π΅ΠΊΡΡΠΎΠ²Π°Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°
ΠΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΎ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ ΠΊΠ°ΠΊ Β«Π·Π°ΠΌΠ΅ΡΠ°ΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡΒ».»ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅. ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΡΠΎ ΠΏΠΎΠ»Π΅ ΠΏΡΡΡΡΠΌ.
Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π Π°Π·ΠΌΠ΅Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Ρ ΡΠΈΠ½ΠΈΠ΅ ΠΊΡΡΠΆΠΊΠΈ ΠΏΠΎ 4 ΡΠ³Π»Π°ΠΌ, ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π²ΡΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Π·Π΄Π΅ΡΡ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ WordPress.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ²ΠΎΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
- ΠΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² CSS
- Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅ ΠΈΠΌΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° ΠΏΡΠΎΠ±Π΅Π»ΠΎΠΌ
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅. ΠΡΠΎΡΡΠΎ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π½Π°ΡΠΎΠΊ ΠΊΠ°ΡΠ°Π½Π΄Π°ΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΌΠ΅Π΄ΠΈΠ°ΡΠ΅ΠΊΠ΅ WordPress, Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅:
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π³Π°Π»Π΅ΡΠ΅Ρ
ΠΠ»ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΎΠ΄ΠΈΠ½ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΈΠΏ Π±Π»ΠΎΠΊΠ°, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Π² Π³Π°Π»Π΅ΡΠ΅Ρ. ΠΡΠ±ΠΎΡ ΡΡΠΎΠΉ ΠΎΠΏΡΠΈΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ Π²ΡΠ±ΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΏΠΎΠΌΠΈΠΌΠΎ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ — Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π² Π³Π°Π»Π΅ΡΠ΅Ρ.
Π£Π·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π±Π»ΠΎΠΊΠ°Ρ ΠΡΡΠ΅Π½Π±Π΅ΡΠ³Π°
ΠΠ°ΠΊ Π²ΡΡΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΠ°ΠΊ Π²ΡΡΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS | Π‘Π΄Π΅Π»Π°ΠΉ Π²Π΅ΡΠΈ Π‘Π΄Π΅Π»Π°ΠΉ Π²Π΅ΡΠΈΠ― Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· ΡΡΠ²Π΅ΡΠΆΠ΄Π°Π», ΡΡΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² JavaScript Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ Π·Π½Π°ΡΡ CSS, ΡΡΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°Ρ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ JS Π² ΠΏΠΎΠΈΡΠΊΠ°Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΡΡΠ΅ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠΌΠ΅Ρ ΡΡΠΎ Π² Π²ΠΈΠ΄Ρ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ Ρ Ρ ΠΎΡΠ΅Π» ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ ΡΠ΅Ρ Π½ΠΈΠΊΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ· Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ CSS.
Π§ΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Π»ΠΎΠΌΠ°ΡΡ?
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ, Π΅ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° 40em
, ΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ.
ΠΊΡΠ·ΠΎΠ² {
ΠΌΠ°ΡΠΆΠ° ΡΠ»Π΅Π²Π°: Π°Π²ΡΠΎ;
ΠΌΠ°ΡΠΆΠ°-ΠΏΡΠ°Π²ΠΎ: Π°Π²ΡΠΎ;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 40em;
ΡΠΈΡΠΈΠ½Π°: 88%;
}
img {
Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%;
}
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ.
ΠΡΠ»ΠΈΡΠ½ΠΎ, Π½ΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΡΠ°Π½ΠΈΡΡ?
ΠΡ, , ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ div
Ρ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ½ΡΡ
ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ, Π½ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ»ΠΎΠΆΠ½ΠΈΡΡ Π²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ. ΠΠΎΠΆΠ΅Ρ, Π΅ΡΡΡ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠΏΡΠΎΡΠ΅.
. ΠΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ
ΠΊΠ»Π°ΡΡΠΡΠΎΡ ΡΡΡΠΊ Π»ΡΠ±Π΅Π·Π½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ ΡΠΊΡΠΏΠ΅ΡΡΠΎΠΌ ΠΏΠΎ CSS Π£Π½ΠΎΠΉ ΠΡΠ°Π²Π΅Ρ.
ΠΡΠΎΡΡΠΎΠΉ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠΉ ΠΊΠ»Π°ΡΡ .full-width
Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΄Π΅Π»ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ( vw
).
.full-width {
ΠΎΡΡΠ°Π»ΠΎΡΡ: 50%;
ΠΌΠ°ΡΠΆΠ° ΡΠ»Π΅Π²Π°: -50vw;
ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: -50vw;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100vw;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΏΡΠ°Π²Π°: 50%;
ΡΠΈΡΠΈΠ½Π°: 100Π²Π²Ρ;
}
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π΅Π³ΠΎ ΠΊ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° CSS ΡΠ΄Π΅Π»Π°Π΅Ρ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅.
ΠΠΎΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΡΠΎΠ³ΠΎ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ
ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ
ΠΌΠΎΠ΄ΡΠ»Ρ vw
, ΡΠ°ΠΊ ΡΡΠΎβ¦ Π²ΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ IE11 ΠΈ Π²ΡΡΠ΅.
π ΠΠ΅ΡΠ΅Π·Π°ΠΏΡΡΠΊ! ΠΠ°ΡΠΌΠ°Π½Π½ΡΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° Vanilla JS Π±ΡΠ»ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Ρ Π½ΠΎΠ²ΡΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°ΠΌΠΈ JS. Π‘ ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½Π΅Π³ΠΎ Π΄Π½Ρ ΠΏΠΎ 25 Π°ΠΏΡΠ΅Π»Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠΊΠΈΠ΄ΠΊΡ 30% Π½Π° Π»ΡΠ±ΠΎΠΉ ΠΏΡΡΠ΅Π²ΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈΠ»ΠΈ ΠΏΠ°ΠΊΠ΅Ρ. ΠΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΡΡΠ΄Π°, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅.
ΠΡΠ°Π²ΠΈΡΡΡ? Π― ΠΎΡΠΏΡΠ°Π²Π»ΡΡ ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΠ΅ ΠΏΠΈΡΡΠΌΠ° ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±ΡΠ΄Π½ΠΈΠΉ Π΄Π΅Π½Ρ Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΊΠΎΠ΄Π°, ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ Π²Π΅ΡΠ°ΠΌΠΈ ΠΈΠ· ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. ΠΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡΠ΅ΡΡ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ 11 900 ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠ°ΠΌ Π² Π΄Π΅Π½Ρ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ β€οΈ Π² ΠΠ°ΡΡΠ°ΡΡΡΠ΅ΡΡΠ΅.ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅, Π²Π΅ΡΡ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ MIT. Π― ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ΅Π½Ρ Π½Π΅ΡΠ΅Π³ΡΠ»ΡΡΠ½ΠΎ Π΄Π΅Π»ΡΡΡ ΠΌΡΡΠ»ΡΠΌΠΈ, Π½Π΅ ΡΠ²ΡΠ·Π°Π½Π½ΡΠΌΠΈ Ρ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
ΠΠ°ΠΊ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΠΎΡΡ Π² DIV Π±Π΅Π· ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΡ?
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π³ΠΈΠ±ΠΊΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π²Ρ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΠΈΡΡ Π±Ρ ΡΠΎ ΡΡΠ΅Π½Π°ΡΠΈΡΠΌΠΈ, Π² ΠΊΠΎΡΠΎΡΡΡ
Π²Ρ Ρ
ΠΎΡΠ΅Π»ΠΈ Π±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΌΠ΅Π½ΡΡΠΈΠΉ DIV, Π½Π΅ ΠΈΡΠΊΠ°ΠΆΠ°Ρ Π΅Π³ΠΎ ΠΈ Π½Π΅ Π½Π°ΡΡΡΠ°Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½. Π§ΡΠΎ ΠΆ, ΡΡΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° max-width
.
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈ Ρ Ρ
ΠΎΡΡ ΡΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π² DIV Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ°Π·ΠΎΠ²Π΅ΠΌ DIV Β«ΡΠΈΠ³ΡΡΠΎΠΉ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌΒ». Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² DIV Β«ΡΠΈΠ³ΡΡΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΒ», Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width
. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΌΠΎΠΉ CSS ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
.figure-container img {
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ
}
ΠΡΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ 100% ΡΠΈΡΠΈΠ½Ρ DIV.ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ΅ΠΏΠ΅ΡΡ Π²ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ DIV ΠΏΡΠΈ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½. ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΡΠ΅Π½Π°ΡΠΈΡ Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display
. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π±Π»ΠΎΠΊ
ΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ
.