ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°? — UMI
Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΉΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΌΒ β ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ ΠΏΡΠΈ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠ°ΠΉΡ ΡΠΎΠ·Π΄Π°Π½ Π½Π°Β Π³ΠΎΡΠΎΠ²ΠΎΠΌ ΡΠ°Π±Π»ΠΎΠ½Π΅. ΠΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΠΎ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ΠΏΠ»ΠΎΡΠ°Π΄ΠΎΠΊ ΠΈΒ Π±Π»ΠΎΠ³ΠΎΠ². ΠΡΠ½ΠΎΠ²Π° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ ΠΊΡΠΎΠ΅ΡΡΡ Π²Β ΡΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡΠΈ ΡΠ΅ΡΡΡΡΠ°, Π°Β ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠΈΠΉΡΡ, ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ Π±Π»ΠΎΠΊ? ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°Β β Π²ΠΎΠΏΡΠΎΡ, Π·Π°Π½ΠΈΠΌΠ°ΡΡΠΈΠΉ ΠΌΠ½ΠΎΠ³ΠΈΡ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠΎΠ².
Π‘ΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡ Π½Π° UMI
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈΒ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΠ°Π»ΠΈΡΠΈΠ΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΠΏΠΊΠΈ (header) Π΄Π°Π΅Ρ Π½Π΅ΠΌΠ°Π»ΠΎ ΠΏΠ»ΡΡΠΎΠ²:
- ΡΠ·Π½Π°Π²Π°Π½ΠΈΠ΅ ΡΠΈΡΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΡΠΈΠΌΠ²ΠΎΠ»ΠΈΠΊΠΈ;
- ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠΈ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠΈ;
- Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ³ΠΎ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° ΠΈΒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°;
- ΡΠΎΠ»ΠΈΠ΄Π½ΠΎΡΡΡ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° ΠΊΒ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΡΡΡΠ° Π²Β ΡΠ΅Π»ΠΎΠΌ.
ΠΠ»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠ° Π²ΠΎΠΏΡΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π²Β ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅ ΡΡΠΎΠΊΠΈ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΡΠΌ. ΠΠΎΠ²ΠΈΡΠΊΡΒ ΠΆΠ΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΠ·ΡΡΠΈΡΡ ΠΏΡΠΈΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π½Π°Β ΡΡΡ ΡΠ΅ΠΌΡ. ΠΡΠ»ΠΈ Π²ΡΒ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ Π²ΡΠ΅ΡΡΠ΅Π· ΠΎΡΠ²ΠΎΠΈΡΡ Π²Π΅Π±-ΡΡΡΠΎΠΈΡΠ΅Π»ΡΡΡΠ²ΠΎ, ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈΒ Π³ΡΠ°ΡΠΈΠΊΡ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΡΒ HTML, CSS, Π½Π°ΡΡΠΈΡΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Photoshop ΠΈΒ Π΄ΡΡΠ³ΠΈΠΌΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ. ΠΠ°Β ΡΠ΅ΡΠ²ΠΈΡΠ΅ 1Π‘-UMI ΡΡΠ° Π·Π°Π΄Π°ΡΠ° ΡΠΆΠ΅ ΡΠ΅ΡΠ΅Π½Π° β Π²Β Π°ΡΡΠΎΡΡΠΈΠΌΠ΅Π½ΡΠ΅ ΡΠΎΡΠ½ΠΈ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΡΒ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΡΠΌΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ°ΠΏΠΊΠ°ΠΌΠΈ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ²ΠΎΠΉ Π»ΠΎΠ³ΠΎ, ΡΠ»ΠΎΠ³Π°Π½ ΠΈΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠ΅ΡΡ Π½ΠΈΠΉ Π±Π»ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ:
- ΡΡΠΊΠΈΠΉ, Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠΈΠΉΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ Π·Π°ΠΌΠ΅ΡΠ΅Π½;
- ΡΠ»ΠΎΠ³Π°Π½ ΡΒ ΠΊΡΠ°ΡΠΊΠΎΠΉ ΡΡΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ;
- ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΏΡΠΈΡΡΠΈΠΉ ΠΈΒ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ°Π½ΡΠΎΠ²;
- ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ;
- ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ.
ΠΠ΅Β ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ Π²Β ΡΠ°ΠΏΠΊΠ΅. ΠΠ΅Β Π³Π»Π°Π²Π½Π°Ρ ΡΠ΅Π»ΡΒ β ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΠΈΠ΅ΡΡ ΠΏΠΎΒ ΡΡΠΈΠ»Ρ ΠΈΒ ΡΠ²Π΅ΡΡ. Π¨Π°ΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ΅ ΠΈΒ Π³Π°ΡΠΌΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΒ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π²ΡΠ΅Π³ΠΎ ΡΠ΅ΡΡΡΡΠ°. ΠΠ΅Β ΡΠΈΡΠΈΠ½Π° ΠΈΒ Π²ΡΡΠΎΡΠ° ΠΌΠΎΠ³ΡΡ ΡΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π·Π½ΠΈΡΡΡΡ, Π½Π°Π³Π»ΡΠ΄Π½ΠΎ Π²ΠΈΠ΄Π½ΠΎ ΡΡΠΎ ΠΏΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡ Π½Π°Β ΡΠΊΡΠ°Π½Π°Ρ ΡΒ ΡΠ°Π·Π½ΠΎΠΉ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΡΒ β ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°Ρ , ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ , ΡΠΌΠ°ΡΡΡΠΎΠ½Π°Ρ .
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°?
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΡΠΈ ΡΠΏΠΎΡΠΎΠ±Π° Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π·Π°Π΄Π°ΡΡ.
- Π‘Β ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ². ΠΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ°ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠ½ΡΠΉ, Π½Π΅Β ΡΡΠ΅Π±ΡΡΡΠΈΠΉ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ΅ ΡΒ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°ΠΌΠΈ. ΠΠ°Π΄ΠΎ ΠΎΡΡΡΠΊΠ°ΡΡ Π²Β ΡΠ΅ΡΠΈ ΡΠ΅ΡΡΡΡΡ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ, ΠΈΒ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΠΉΡΡ. Π‘Π΅ΡΠ²ΠΈΡΡ Π±ΡΠ²Π°ΡΡ ΠΏΠ»Π°ΡΠ½ΡΠΌΠΈ ΠΈΒ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌΠΈ.
- Xheader. ΠΡΠ»ΠΈ Π²ΡΒ β ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ, ΡΠΎΒ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡ ΠΎΡΠ΅Π½Ρ Π΄Π°ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ. ΠΠ΄Π΅ΡΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΡΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ ΡΒ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΎΠ±ΡΠ°Π·ΡΠ°ΠΌΠΈ. ΠΒ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΡΠ΄ΠΎΠ±Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡΒ β Π²ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΠΏΠΎΒ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠΌ, Π²ΡΠ±ΡΠ°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π΅Β ΡΠΎΡΡΠ°Π²ΠΈΡ ΡΡΡΠ΄Π°. ΠΡΠ΅ Xheader ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ»ΠΎΠΈ Π΄Π»Ρ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Β Π½ΡΠΆΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΡΠΎΠ΅ΠΊΡΡ ΡΠΎΡ
ΡΠ°Π½ΡΡΡΡΡ Π²Β ΡΠΎΡΠΌΠ°ΡΠ΅ XHF Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ JPG. Xheader ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠ°, Π½ΠΎΒ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΡ, ΡΠ΅ΡΠΈΠ²ΡΠ΅ΠΌΡ Π·Π°Π½ΡΡΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ Π½Π°Β ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊΒ Photoshop.
- Adobe Photoshop. ΠΡΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΡΒ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. ΠΠ΄Π΅ΡΡ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ, ΠΌΠ΅Π½ΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ, ΠΏΠΎΠ΄Π±ΠΈΡΠ°ΡΡ ΡΠΎΠ½, ΠΎΠ±ΡΠ³ΡΡΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΡΠ»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ (ΠΎΠ½Β ΠΏΡΠΈΠ΄Π°ΡΡ Π½Π΅ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Ρ). ΠΒ Π²Π°ΡΠΈΡ ΡΡΠΊΠ°Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅ Π²Β Π³ΡΠ°ΡΠΈΠΊΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΡΠ»ΠΎΠ³Π°Π½Π°, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ² (ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅Β ΠΏΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΄ΡΡΠ²ΡΠΉΡΠ΅, Π»Π°ΠΊΠΎΠ½ΠΈΡΠ½ΠΎΡΡΡ Π²Β ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Π°ΠΆΠ½Π°). ΠΒ ΠΎΠ±ΡΠ΅ΠΌ, ΡΡΠΎ Π½Π°ΠΈΠ»ΡΡΡΠΈΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π²Β Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π΄Π»Ρ Π²ΠΎΠΏΠ»ΠΎΡΠ΅Π½ΠΈΡ ΡΠ°ΠΌΡΡ ΡΠΌΠ΅Π»ΡΡ ΠΈΒ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΡ ΠΈΠ΄Π΅ΠΉ. ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° Π²Β Π€ΠΎΡΠΎΡΠΎΠΏΠ΅? ΠΡΠ»ΠΈ Π²ΡΒ ΠΌΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ ΡΒ ΡΠ°ΠΊΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΎΠΉ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠΈ ΠΈΒ ΠΏΠΎΠΈΡΠΈΡΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΠΎΠ±ΠΈΡ. ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π»ΠΈΡΡ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΈΒ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊΒ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π·Π°Π΄Π°ΡΠΈ.
ΠΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π±Π»ΠΎΠΊ?
ΠΡΒ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½ΠΎΒ ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ ΡΠ°Π±ΠΎΡΡ. Π’Π΅ΠΏΠ΅ΡΡ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Π²Β ΡΡΡΡΠΊΡΡΡΡ ΡΠ΅ΡΡΡΡΠ°. ΠΡΠ»ΠΈ ΡΒ Π²Π°Ρ ΡΠ°ΠΉΡ Π½Π°Β 1Π‘-UMI, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π²Β ΡΠ΅ΠΆΠΈΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΒ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎΒ Π±Π»ΠΎΠΊΡ ΡΒ ΡΠ°ΠΏΠΊΠΎΠΉ, Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΈΒ Π²ΡΡΠ°Π²ΡΡΠ΅ Π½ΡΠΆΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΡΠ°Π±ΠΎΡΠ°ΠΉΡΠ΅ ΡΠΎΒ ΡΡΠΈΠ»ΡΠΌΠΈ Π²Β CSS.
ΠΡΠΈΠΌΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° CSS:
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° HTML:
-
ΠΒ ΡΠ΅Π³ body Π²ΡΡΠ°Π²ΡΡΠ΅ div, ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π² Π΅Π³ΠΎ ΡΒ Π΄Π²ΡΠΌΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ h2Β ΠΈΒ h4, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΠΈΒ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
<div>
<h4>ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅</h4>
</div> -
ΠΡΠΈΠ΄Π°ΠΉΡΠ΅ Π²ΠΈΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ ΠΈΒ ΡΠ΅ΠΊΡΡΡΒ β ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π΄Π»Ρ Π½ΠΈΡ Π΄Π²Π° ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΈΒ ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠ°ΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
h2{
color:#ΡΠ²Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°;
font: ΡΠ°Π·ΠΌΠ΅Ρ pxΒ ΡΡΠΈΡΡ;
margin-left: ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°Β px;
}
h4{
width: ΡΠΈΡΠΈΠ½Π°Β px;
color: #ΡΠ²Π΅Ρ;
font-style: ΡΡΠΈΠ»Ρ ΡΡΠΈΡΡΠ°;
margin: ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β px;
} - Π¨ΠΈΡΠΈΠ½Π° h4Β Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ, ΠΈΠ½Π°ΡΠ΅ ΡΠ΅ΠΊΡΡ Π·Π°ΠΉΠΌΠ΅Ρ Π²ΡΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΡΡΡΡΠΏΡ ΡΠ΅Π³ΡΠ»ΠΈΡΡΡΡΡΡ Π²Β Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡΒ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ΅ΠΊΡΡ.
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π°Β WordPress
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π±Π»ΠΎΠ³ΠΎΠ² Π±Π°Π·ΠΈΡΡΡΡΡΡ Π½Π°Β ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ WordPress, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ° ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΡΡ, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π±Π»ΠΎΠΊ Π½Π°Β ΡΡΠΎΠΉ CMS. ΠΠ²ΠΈΠΆΠΎΠΊ ΡΠΆΠ΅ ΠΎΡΠ½Π°ΡΠ΅Π½ Π³ΠΎΡΠΎΠ²ΡΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ ΠΈΒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. ΠΠΎΒ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΠΈΠ΄ΠΎΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΒ ΠΈΡ , Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΊ ΡΡΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²ΠΈΡΡ?
- ΠΡΠΊΡΠΎΠΉΡΠ΅ Π²Β ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«ΠΠ°ΠΏΠΈΡΠΈΒ β Π‘Π΄Π΅Π»Π°ΡΡ Π½ΠΎΠ²ΡΡΒ».
- ΠΠ΅ΡΠ΅Π²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π²Β ΡΠΎΡΠΌΠ°Ρ HTML, Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ.
- ΠΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²Β ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΊΠΎΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ Π΅Π³ΠΎ, Β«ΠΠ°ΠΏΠΈΡΡΒ» ΡΠ΄Π°Π»ΠΈΡΠ΅.
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ΡΡ Π²ΠΎΒ Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄Β β Π Π΅Π΄Π°ΠΊΡΠΎΡΒ», ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ» header.php Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
- ΠΒ header.php Π½Π°ΠΉΠ΄ΠΈΡΠ΅ <div> ΠΈΒ ΠΏΠΎΠ΄ ΡΡΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ Π²ΡΡΠ°Π²ΡΡΠ΅ ΡΠ°Π½Π΅Π΅ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ.
- ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°ΠΉΠ» ΠΈΒ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ ΡΠ΅ΠΏΠ΅ΡΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²Π°ΡΠ° ΡΠ°ΠΏΠΊΠ° Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎΒ Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
- ΠΡΠ»ΠΈ Π²Π°ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, Π²Π΅ΡΠ½ΠΈΡΠ΅ΡΡ Π²Β ΡΠ°ΠΉΠ»ΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π²Β ΡΠ΅Π³ img Π²Β ΠΊΠΎΠ΄Π΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°ΠΏΠΈΡΡ style ΡΠΎΒ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ margin. ΠΡΠΈΠΌΠ΅Ρ:;
- ΠΠΎΠ΄Π²ΠΈΠ½ΡΡΠ΅ ΡΠΎΡΠΎ ΡΡΠ΄Π°, ΠΊΡΠ΄Π° Π²Π°ΠΌ Π½Π°Π΄ΠΎ.
ΠΠ΅ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΒ Π²Π΅ΡΡ Π½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π³ΠΎΡΠΎΠ²Π°. ΠΠΎΡΠ»Π΅ Π΄ΠΎΡΠ°Π±ΠΎΡΠΊΠΈ Π΄Π΅ΡΠ°Π»Π΅ΠΉ, ΠΏΠΎΠΏΡΠ°Π²ΠΊΠΈ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈΒ ΠΏΡΠΎΡΠ΅Π³ΠΎ ΡΠ°ΠΉΠ» ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°ΡΡ index.html ΠΈΒ Π²ΡΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ Π½Π°Β Π²Π°Ρ Ρ ΠΎΡΡΠΈΠ½Π³. ΠΒ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΡΠ°Π±Π»ΠΎΠ½ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡ, ΠΌΠ΅Π½Ρ ΠΈΒ Ρ.Π΄.
Π Π°Π±ΠΎΡΠ° Π½Π°Β ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅
ΠΠ΅Β Π²ΡΠ΅ Π²Π»Π°Π΄Π΅Π»ΡΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈΠΌΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π½Π°Π²ΡΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΠΈΒ ΠΈΡ Β ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΒ ΡΠ°ΠΊΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡ Π½Π°Β ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅ ΠΈΒ Π΄ΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ Π½Π΅ΠΏΠΎΡ ΠΎΠΆΠΈΠΌ Π½Π°Β ΡΠΈΠΏΠΎΠ²ΡΠ΅ ΡΠ°ΠΉΡΡ. ΠΠ°Β ΡΠ΅ΡΠ²ΠΈΡΠ΅ 1Π‘-UMI ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. ΠΒ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ΡΠ΅ΡΠ²ΠΈΡΠ° ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ 500 Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΠ°ΡΠ° ΠΌΠΈΠ½ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΡ Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΡΠ΅ΡΡΡΡΠ°. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π·Π΄Π΅ΡΡ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΒ Π½ΡΠ»Ρ. ΠΠ΄Π½Π°ΠΊΠΎ Π²Β ΡΠ°Π±Π»ΠΎΠ½Π°Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΈΡΡΠ°, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π°Β ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΡΠ΅Π· CSS. ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ: Π²ΡΒ ΡΡΠ°ΡΠΈΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π½ΠΎΒ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΈΒ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄ΠΎΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΠΌΡ ΠΏΠΎΠΌΠΎΠΆΠ΅ΠΌ. ΠΡΠΎΡΠΌΠΈΠΌ ΡΠ°ΠΏΠΊΡ ΠΈΒ ΡΠ°ΠΉΡ ΠΏΠΎΒ Π²Π°ΡΠΈΠΌ ΠΆΠ΅Π»Π°Π½ΠΈΡΠΌ, Π½Π°ΠΏΠΈΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π½Π°ΡΡΡΠΎΠΈΠΌ Π΄Π»Ρ ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ.
Π‘ΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ
Π¨Π°ΠΏΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ | htmlbook.ru
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΡ Ρ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΡΠΌ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ ΡΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ , ΠΎΡ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ Π΄ΠΎ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° 760 ΠΏΠΈΠΊΡΠ΅Π»Π°ΠΌΠΈ, ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΡΠΎΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΏΠΈΡΡΠ²Π°Π»Π°ΡΡ Π² ΡΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΠ° ΡΠΈΡ.Β 6.3 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ. Π’ΡΠΌΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ Π²ΡΠ΄Π΅Π»Π΅Π½Π° ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ 760px, Π±ΡΠΊΠ²ΠΎΠΉ Π ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΎΡΡΠ°Π²ΡΠΈΠ΅ΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ.
Π ΠΈΡ. 6.3. Π¨ΠΈΡΠΈΠ½Π° ΡΠ°ΠΏΠΊΠΈ
Π‘Π°ΠΌΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² ΡΠ°ΠΏΠΊΠ΅ Π΄Π΅Π»Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <header>.
header { display: block; /* ΠΠ»Ρ ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² */ height: 405px; /* ΠΡΡΠΎΡΠ° ΡΠ°ΠΏΠΊΠΈ */ background: url(images/header-bg.png) no-repeat center bottom; }
Π ΠΈΠ΄Π΅Π°Π»Π΅ ΡΠΈΡΡΠ½ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΡ 2000 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², ΡΠΎΠ³Π΄Π° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈ Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ° ΡΠΈΡΡΠ½ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΡ, ΠΎΠ±ΡΠ΅Π·Π°Ρ Π²ΡΡ, ΡΡΠΎ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΎΠΊΠ½ΠΎ.
Π ΠΈΡ. 6.4. Π‘ΠΎΠ²ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ
ΠΠ° Π΄Π°Π½Π½ΠΎΠΌ ΡΠΈΡΡΠ½ΠΊΠ΅ ΠΌΠ΅ΡΡΠΎ ΡΡΡΠΊΠ° ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΎ ΡΡΡΠ΅Π»ΠΊΠΎΠΉ ΠΈ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΡΡΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ. ΠΡΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΡΡ ΠΈ Π»Π΅Π²ΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠΎ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π±Π΅Π· Π²ΠΈΠ΄ΠΈΠΌΡΡ ΡΡΡΠΊΠΎΠ², ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ. ΠΡΡΠ°ΡΡΡΡ ΡΠ»Π΅Π³ΠΊΠ° ΠΏΠΎΠ΄ΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ, Π·Π°ΠΌΠ΅Π½ΠΈΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ no-repeat (Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ) Π½Π° repeat-x (ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ).
header { display: block; height: 405px; background: url(images/header-bg. png) repeat-x center bottom; }
ΠΠ° ΡΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ Π² ΡΠ°ΠΏΠΊΠ΅ Π³ΠΎΡΠΎΠ² (ΡΠΈΡ.Β 6.5).
Π ΠΈΡ. 6.5. Π€ΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ
Π ΡΠΎΡΠΌΠ°ΡΠ΅ PNG-24 ΡΠ°ΠΉΠ» Ρ ΡΠΎΠ½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 1325Ρ 405 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ² Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΎΠΊΠΎΠ»ΠΎ 32Β ΠΠ±, Π° Π² PNG-8 Ρ 256-ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡΡΠΎΠΉ, Π³Π΄Π΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΆΠ΅Β β ΠΎΠΊΠΎΠ»ΠΎ 15Β ΠΠ±. ΠΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π±ΠΈΡΡ ΡΠΎΠ½ Π½Π° Π΄Π²Π΅ ΡΠΎΡΡΠ°Π²Π½ΡΠ΅ ΡΠ°ΡΡΠΈΒ β Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ²ΠΎΡΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°. ΠΠΏΡΠΎΡΠ΅ΠΌ, 32Β ΠΠ± Π΄Π»Ρ ΡΡΠΎΠ»Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΊΡΠΎ-ΡΠΎ ΠΏΠΎΡΡΠΈΡΠ°Π΅Ρ Β«ΡΠΊΠΎΠ½ΠΎΠΌΠΈΠ΅ΠΉ Π½Π° ΡΠΏΠΈΡΠΊΠ°Ρ Β». Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° ΠΊΠΎΠΌΡ-ΡΠΎ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ, Π° ΠΏΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΅Π³ΠΎ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ.
ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠ°ΠΏΠΊΠΈ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π² ΡΠ°ΠΏΠΊΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠ΅Π·Π°ΡΡ ΠΈΠ· ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΠ° ΡΠΈΡ.Β 6.6 ΠΏΠΎΠΊΠ°Π·Π°Π½ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π²ΡΡΠΎΡΠΎΠΉ 405 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΡΠΉ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ. Π€ΠΎΡΠΌΠ°Ρ PNG-24 Π½Π΅ Π²Π½ΠΎΡΠΈΡ ΠΈΡΠΊΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ Ρ ΠΎΡΠΎΡΠΎ ΡΠΆΠΈΠΌΠ°Π΅Ρ (ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΉ ΠΎΠ±ΡΠ΅ΠΌ 402 Π±Π°ΠΉΡΠ°), ΡΠ°ΠΊ ΡΡΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΅Π³ΠΎ. Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠΈΡΡΠ½ΠΊΠ° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ.
Π ΠΈΡ. 6.6. ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ (header-gradient.png)
ΠΠ°ΡΡΠΈΠ½ΠΊΠ° Ρ ΡΠΈΠ»ΡΡΡΠ½ΡΠΌΠΈ ΠΆΠΈΠ²ΠΎΡΠ½ΡΠΌΠΈ Π΄Π΅Π»Π°Π΅ΡΡΡ Π½Π° ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΌ ΡΠΎΠ½Π΅ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ 198Β ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², Π½Π΅Ρ ΡΠΌΡΡΠ»Π° Π΄Π΅Π»Π°ΡΡ Π΅Ρ Π½Π° Π²ΡΡ Π²ΡΡΠΎΡΡ ΡΠ°ΠΏΠΊΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π»ΠΈΡΡ ΡΠ°ΡΡΡ. Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 6.7. Π¨Π°Ρ ΠΌΠ°ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ.
Π ΠΈΡ. 6.7. Π€ΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ (header-animal.png)
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈΠ΄Π΅Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG-8, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ²Π΅Π½Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ 256 ΡΡΠΎΠ²Π½Π΅ΠΉ ΡΠΎΡΠΌΠ°ΡΠ° PNG-24, Π²Π°ΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ ΡΠΎΠ½. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ Π² Photoshop-Π΅ Π½Π°Π΄ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ²Π΅Ρ ΠΊΡΠ°ΡΠ² (Matte) Π±Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊ ΡΡΠ΅Π΄Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°, Π³Π΄Π΅ ΠΈΠ΄ΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΠ°. ΠΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΡΠΎ ΡΠ²Π΅Ρ #9de1f0. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ Π³ΡΡΠ·Π½ΡΡ ΠΊΠΎΠ½ΡΡΡΠΎΠ² Π²ΠΎΠΊΡΡΠ³ Π΄Π΅ΡΠ΅Π²ΡΠ΅Π² ΠΈ ΠΆΠΈΠ²ΠΎΡΠ½ΡΡ , Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΏΡΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅.
ΠΠ²Π° ΡΠΈΡΡΠ½ΠΊΠ° Π΄Π»Ρ ΡΠΎΠ½Π° ΡΠ°ΠΏΠΊΠΈ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Ρ, ΠΏΠΈΡΠ΅ΠΌ ΠΊΠΎΠ΄ HTML.
<header> <div> <img src="images/header-title.png" alt="ΠΠ°ΠΊ ΠΏΠΎΠΉΠΌΠ°ΡΡ Π»ΡΠ²Π° Π² ΠΏΡΡΡΡΠ½Π΅"> </div> </header>
Π ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <header> ΠΈ ΡΠ»ΠΎΡ header-bg.
header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; }
Π ΠΈΡΠΎΠ³Π΅ ΠΎΠ±ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΎΠΊΠ°Π·Π°Π»ΡΡ 12,5Β ΠΠ±, ΡΡΠΎ Π΄Π°ΠΆΠ΅ ΠΌΠ΅Π½ΡΡΠ΅ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ Π½Π° ΠΎΠ±Π»Π°ΠΊΠ΅ Ρ ΡΠ°ΡΡΡΡΡΠ²Π°Π½Π½ΡΠΌΠΈ ΠΊΡΠ°ΡΠΌΠΈ, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΡΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ. ΠΡΡΡ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π°, ΠΊΠ°ΠΊ ΠΈΡ ΠΎΠ±ΠΎΠΉΡΠΈ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΠ°Ρ PNG-24 ΠΏΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ.
- Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ GIF ΠΈΠ»ΠΈ PNG-8 Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ Π½Π°Π»ΠΎΠΆΠΈΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π½Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Ρ ΡΠΎΡΠ½ΠΎΡΡΡΡ Π΄ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π°.
ΠΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ Π²ΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ΄ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠ²Β β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅Π»ΡΠ·Ρ ΡΠ΄Π²ΠΈΠ½ΡΡΡ Π΄Π°ΠΆΠ΅ Π½Π° ΠΏΠ°ΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², ΠΎΠ½ΠΎ ΠΏΡΠΈΠ²ΡΠ·Π°Π½ΠΎ ΠΊ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ, ΠΈ Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΌΠ΅Π½ΡΡΡ ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. Π’Π°ΠΊ ΡΡΠΎ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG-24. ΠΠΎΠ΄ HTML ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ, Π° ΡΡΠΈΠ»ΠΈ ΡΠ°ΡΡΠΈΡΡΡΡΡ.
header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* ΠΡΡΠΎΡΠ° ΡΠ°ΠΏΠΊΠΈ */ text-align: center; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ */ } .header-bg img { position: relative; /* ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */ top: 40px; /* Π‘Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²Π½ΠΈΠ· */ }
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π΄Π΅Π»Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ text-align, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΡΠ΅Π³Π° <img>, Π° ΡΠ΄Π²ΠΈΠ³ Π²Π½ΠΈΠ· ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ top. Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π·Π°Π΄Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ relative.
ΠΠ° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΠΎΠ½Π° ΡΠ»ΡΠΆΠΈΡ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ»Π΅Π³ΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠ΄:
<a href="/"><img src="images/header-title.png" alt="ΠΠ°ΠΊ ΠΏΠΎΠΉΠΌΠ°ΡΡ Π»ΡΠ²Π° Π² ΠΏΡΡΡΡΠ½Π΅"></a>
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ / Ρ Π°ΡΡΠΈΠ±ΡΡΠ° href ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΠ΅, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ.
ΠΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 6.14.
ΠΡΠΈΠΌΠ΅Ρ 6.14. Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ°ΠΊ ΠΏΠΎΠΉΠΌΠ°ΡΡ Π»ΡΠ²Π° Π² ΠΏΡΡΡΡΠ½Π΅?</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> body { margin: 0; } header { display: block; background: #00b0d8 url(images/header-gradient.png) repeat-x; /* ΠΡΠ°Π΄ΠΈΠ΅Π½Ρ */ } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; /* ΠΠΈΠ²ΠΎΡΠ½ΡΠ΅ */ height: 405px; /* ΠΡΡΠΎΡΠ° ΡΠ°ΠΏΠΊΠΈ */ text-align: center; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ */ } .header-bg img { position: relative; /* ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */ top: 40px; /* Π‘Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²Π½ΠΈΠ· */ } </style> </head> <body> <header> <div> <img src="images/header-title. png" alt="ΠΠ°ΠΊ ΠΏΠΎΠΉΠΌΠ°ΡΡ Π»ΡΠ²Π° Π² ΠΏΡΡΡΡΠ½Π΅" > </div> </header> </body> </html>
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°
ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π±Π»ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ°, ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π² Π½ΡΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π»ΠΎΠ³ΠΎΡΠΈΠΏ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ HTML ΠΈ CSS
ΠΠ»ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ°, ΠΎΠ±ΡΡΠ½ΠΎ ΡΡΠΎ «header» Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΊ:
HTML
<div></div>
CSS
#header{
Β Β width: 900px; Β Β - ΡΠΈΡΠΈΠ½Π°
Β Β height: 200px; Β Β - Π²ΡΡΠΎΡΠ°
Β Β background-color: #25B33f; Β - ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ (ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ Π·Π°Π΄Π°Π²Π°ΡΡ)
Β Β margin-bottom: 10px; Β Β - ΠΎΡΡΡΡΠΏ ΡΠ½ΠΈΠ·Ρ
}
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ Π±Π»ΠΎΠΊΠ°, Ρ.Π΅. 900px X 200px. ΠΠ³ΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅.
ΠΡΠ»ΠΈ, ΠΊΡΠΎ Π½Π΅ Π²Π»Π°Π΄Π΅Π΅Ρ ΡΠΎΡΠΎΡΠΎΠΏΠΎΠΌ,Β Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΠ·Π³ΠΎΡΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ°, Π² ΠΈΠΌΠ΅ΡΡΠΈΠΌΡΡ Π½Π° Π²ΡΠ΅Ρ Windows ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Paint.
ΠΠΎΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π² Π±Π»ΠΎΠΊ «header».
#header{
Β Β width:Β 900px;
Β Β height:Β 200px;
Β Β background-color:Β #25B33f;
Β Β margin-bottom:Β 10px;
Β Β background-image: url(images/i8.png) Β - Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΊ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΡΠΎΠ± ΠΏΠΎΡΠΎΠΌ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΡΡ Π΄Π»Ρ Π½Π΅Ρ ΡΠΈΡΠ°ΠΉΡΠ΅ Π² ΡΡΠ°ΡΡΠ΅ ΠΠ°ΡΠ°Π»ΠΎΠ³Π° ΡΠ°ΠΉΡΠ°
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-color ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉ, Π΅ΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π²Π΄ΡΡΠ³, Π² ΠΊΠ°ΠΊΠΎΠΌ Π»ΠΈΠ±ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ, Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ.
ΠΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»Π°ΡΡ Ρ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈ Π½ΡΠΆΠ½ΠΎ Π΅Ρ ΠΏΠΎΠ΄ΠΏΡΠ°Π²ΠΈΡΡ, ΡΠΎ ΡΡΠ΄Π° ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-position
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°Π³ β Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ°ΠΉΡΠ°.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² HTML Π±Π»ΠΎΠΊΠ° ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΠΊΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ Π°Π±Π·Π°ΡΠ°. ΠΠ±Π·Π°ΡΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΊΠ»Π°ΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ°ΠΏΠΊΠ΅.
HTML
<div>
Β Β <h2>Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°<h2>
Β Β Β Β <p>ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ</p>
</div>
ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ Ρ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΏΡΠΈΠ΄Π°Π΄ΠΈΠΌ Π²ΠΈΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ. Π‘ΠΎΠ·Π΄Π°ΡΠΌ Π΄Π»Ρ Π½ΠΈΡ
Π΄Π²Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°, ΠΈ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
CSS
h2{
Β Β color: #ffee00; Β - ΡΠ²Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
Β Β font: 40px Georgia; Β - ΡΡΠΈΡΡ
Β Β margin-left: 300px; Β - ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°
}
.descript{
Β Β width: 300px; Β - ΡΠΈΡΠΈΠ½Π°
Β Β color: #ffee00; Β - ΡΠ²Π΅Ρ
Β Β font-style: italic; Β - ΠΊΡΡΡΠΈΠ²
Β Β margin: 70px 0 0 30px; Β - ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
Β Β font-size:22px; - ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π»ΠΎΠ³ΠΎΡΠΈΠΏ.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° Ρ Π²ΠΎΠ·ΡΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΡΡΡΠΈΠΊΠ°
ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, ΠΈΠ½Π°ΡΠ΅ Π΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΎΠ½ ΠΎΡΠ΅Π½Ρ Π½Π΅ΠΊΡΠ°ΡΠΈΠ²ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π½Π° ΡΠΎΠ½ΠΎΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ.
Π§ΡΠΎΠ± ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠΌ ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ΄Π΅:
Π°) Π² HTML Π±Π»ΠΎΠΊΠ° Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ;
Π±) Π² CSS Π² Π±Π»ΠΎΠΊ header ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΎΡΠΈΠΏ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ Π² ΡΡΠΎΠΌ Π±Π»ΠΎΠΊΠ΅;
Π²) Π² CSS Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌ Π΅Π³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΎΠΊΠ° header.
HTML
<div>
Β Β <h2>Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°<h2>
Β Β Β Β <p>ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ</p>
<img src="images/hortic.gif">
</div>
CSS
#header{
Β Β position:relative;
Β Β width:Β 900px;
Β Β height:Β 200px;
Β Β background-color:Β #25B33f;
Β Β margin-bottom:Β 10px;
Β Β background-image: url(images/i8.png) Β
}
h2{
Β Β color: #ffee00; Β - ΡΠ²Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
Β Β font: 40px Georgia; Β - ΡΡΠΈΡΡ
Β Β margin-left: 300px; Β - ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°
}
.descript{
Β Β width: 300px; Β - ΡΠΈΡΠΈΠ½Π°
Β Β color: #ffee00; Β - ΡΠ²Π΅Ρ
Β Β font-style: italic; Β - ΠΊΡΡΡΠΈΠ²
Β Β margin: 70px 0 0 30px; Β - ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
Β Β font-size:22px; - ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°
}
img{
Β Β position:absolute;
Β Β top:10px;
Β Β left:10px;
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠΎΠ»ΡΡΠΈΠ»Π°ΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠ°Ρ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°.
ΠΠ° Β ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΊΠ°ΡΠΊΠ°Ρ ΡΠ°ΠΉΡΠ° ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠ°Π²ΠΈΡΡ Π² Π½Π΅Π³ΠΎ ΡΠ°ΠΏΠΊΡ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ.
ΠΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>ΠΠΎΠΊΡΠΌΠ΅Π½Ρ Π±Π΅Π· Π½Π°Π·Π²Π°Π½ΠΈΡ</title>
<style>
#wrapper{
Β Β width: 900px;
Β Β outline: 1px solid #787274;
Β Β padding: 10px;
Β Β margin: 0 auto;
}
#header{
Β Β Β Β position:relative;
Β Β width: 900px;
Β Β height: 200px;
Β Β background-color: #25B33f;
Β Β margin-bottom: 10px;
Β Β background-image: url(images/i8.png)
}
#sidebar{
Β Β background-color: #2FF553;
Β Β margin-bottom: 10px;
Β Β width: 180px;
Β Β padding: 10px;
Β Β float: right;
}
#content{
Β Β background-color: #9EF5AF;
Β Β margin-bottom: 10px;
Β Β width: 670px;
Β Β padding: 10px;
}
#footer{
Β Β height:80px;
Β Β background-color: #41874E;
Β Β margin-bottom: 10px;
}
.clear{
clear: both;
}
h2{
color: #ffee00;
font: 40px Georgia;
margin-left: 300px;
}
. descript{
width: 300px;
color: #ffee00;
font-style: italic;
margin: 70px 0 0 30px;
Β Β font-size:22px;
}
img{
Β Β position:absolute;
Β Β top:10px;
Β Β left:10px;
}
</style>
</head>
<body>
Β Β <div>
Β Β Β Β <div>
Β Β Β Β Β Β <h2>Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°</h2>
Β Β Β Β Β Β Β Β <p>ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ</p>
<img src="images/hortic.gif">
Β Β Β Β </div>
Β Β Β Β <div>ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅ ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ Π±ΡΠ΄ΡΡΠΈΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ°!
ΠΠ½Π΅ 55 Π»Π΅Ρ ΠΈ Ρ ΡΠ°Π΄ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ
ΠΠ°Ρ Π½Π° ΡΠ²ΠΎΡΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΡΠΎΡ ΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ²ΡΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π» ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ,
Π° Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΡΠΌΠ΅Π» ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ
ΠΎΠ΄ΠΈΡΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ.
Β Β Β Β </div>
Β Β Β Β <div>Π ΠΌΠ½Π΅, ΡΡΠΈΡΡΠ²Π°Ρ Π²ΠΎΠ·ΡΠ°ΡΡ ΠΈ Β«ΠΎΠΏΡΡΒ», Π±ΡΠ»ΠΎ Π½Π΅ ΠΏΡΠΎΡΡΠΎ
ΠΏΠΎΠ½ΡΡΡ ΠΊΠ°ΠΊ ΡΠ°Π· ΡΡΠΈ Π½ΡΠ°Π½ΡΡ, ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΈΠΌΠ°Π»ΠΈ
Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
Π Ρ ΡΠ΅ΡΠΈΠ» Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», ΡΠ°ΠΊ ΡΡΠΎ-Π±Ρ Π΄ΡΡΠ³ΠΈΠΌ Π±ΡΠ»ΠΎ Π»Π΅Π³ΡΠ΅
ΡΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π½ΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ΄Π΅ΡΡ Β«ΡΠ°Π·ΠΆΠ΅Π²Π°Π½ΡΒ» Π²ΡΠ΅ ΠΌΠ΅Π»ΠΎΡΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°,
ΠΌΠΈΠΌΠΎ ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΎΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π°Π²ΡΠΎΡΡ.
Β Β Β Β </div>
Β Β Β Β <div></div>
Β Β Β Β <div></div>
Β Β </div>
</body>
</html>
ΠΠΎ ΠΌΠΎΠ΅ΠΌΡ Π½Π΅ ΠΏΠ»ΠΎΡ ΠΎ, Π½Π°Π΄Π΅ΡΡΡ Ρ Π²Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ Π»ΡΡΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ΅Ρ , Ρ ΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° CMS WordPress.
ΠΠ° WordPress ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π³ΠΎΡΠΎΠ²Π°Ρ ΡΠ΅ΠΌΠ°, Ρ Π³ΠΎΡΠΎΠ²ΠΎΠΉ ΡΠ°ΠΏΠΊΠΎΠΉ, Π½ΠΎ Π΄ΠΎΠΏΡΡΡΠΈΠΌ, ΠΠ°ΠΌ Π·Π°Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π² ΡΡΡ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°ΠΏΠΊΡ, Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ°ΠΊΠΎΠΉ Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ²ΠΎΠΉ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, ΠΈΠ»ΠΈ Π΅ΡΡ ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΡΠΊΡΡΠ²Π°Π΅ΡΠ΅ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Β«ΠΠ°ΠΏΠΈΡΠΈ β ΠΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΡΒ», ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π² ΡΠ΅ΠΆΠΈΠΌ HTML, ΠΈ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π² ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°.
Π ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ ΠΊΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ, Π° Β«ΠΠ°ΠΏΠΈΡΡΒ» ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π°Π»ΠΈΡΡ.
ΠΠ°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ Π²ΠΎ Β«ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ β Π Π΅Π΄Π°ΠΊΡΠΎΡΒ», ΠΈ ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΉΠ» header.php.
Π ΡΡΠΎΠΌ ΡΠ°ΠΉΠ»Π΅, Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ ΡΡΡΠΎΠΊΡ <div>, ΠΈ ΠΏΠΎΡΠ»Π΅ Π½Π΅Ρ Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ ΡΠ°ΠΉΠ», ΠΈ ΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΎΡΡ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ°.
ΠΡΠ»ΠΈ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΊΡΠ΄Π° ΡΠΎ ΠΏΠΎΠ΄Π²ΠΈΠ½ΡΡΡ, ΡΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΡΠ°ΠΉΠ»Π°, ΠΈ Π² ΠΊΠΎΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π² ΡΠ΅Π³ img, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ style ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ margin
style="margin:0 0 0 0;"
Π Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ΄Π°, ΠΊΡΠ΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.
ΠΠΎΡ ΠΌΡ ΠΈ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΠ΅ΡΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ°. ΠΠΎΡΠ»Π΅ Π΄ΠΎΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°ΠΏΠΊΠΈ, ΠΈ Π΅ΡΡ ΠΊΠΎΠ΅ ΠΊΠ°ΠΊΠΈΡ Π΄ΠΎΡΠ°Π±ΠΎΡΠΎΠΊ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π΄Π°Π»Π΅Π΅, ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΎΡ ΡΠ°ΠΉΠ» Π½Π°Π·Π²Π°ΡΡ index.html, ΠΈ Π²ΡΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ Π½Π° Ρ ΠΎΡΡΠΈΠ½Π³. ΠΠ°ΡΠ΅ΠΌ, ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΆΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ, ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΠΌΠ΅Π½Ρ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. Π ΡΠ°ΠΉΡ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠ²ΠΎΡ ΠΆΠΈΠ·Π½Ρ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
P.S. ΠΡΠ»ΠΈ ΠΊΠΎΠΌΡ-ΡΠΎ Π·Π°Ρ ΠΎΡΠ΅ΡΡΡ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ° Π½Π° WordPress, ΠΈ ΠΏΠΎ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², ΡΠΎ ΠΎΠ± ΡΡΠΎΠΌ Π² ΡΡΠ°ΡΡΠ΅Β Π Π΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠ΅ΠΌΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ
ΠΠ΅Π»Π°Ρ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ ΡΡΠΏΠ΅Ρ ΠΎΠ².
ΠΠ΅ΡΠΆΠ΅Π»ΠΈ Π½Π΅ ΠΎΡΡΠ°Π»ΠΎΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ²? Π‘ΠΏΡΠΎΡΠΈΡΡ
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π°
ΠΡΡΠ½ΡΠΉ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΡΠΎΠ»ΠΊΠ½ΡΡΡ Π΄Π²ΡΡΠΊΡ Π² ΠΏΡΠΎΡΠ΅Π·Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠ°. β ΠΠ°ΠΏΠΈΠ»ΡΡ, β Π° Π΅ΡΠ΅ ΡΠ°ΠΊΡΠΈΡΡ, β ΡΠΊΠ°Π·Π°Π»Π° ΠΏΡΠΎΡ ΠΎΠΆΠ°Ρ. β Π‘ ΡΠ΅Π³ΠΎ Π²Π·ΡΠ»Π°? β Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΊΡΠΈΡΡΡΠΊΠ°Ρ. β ΠΠ°, β Π·Π°Π΄ΡΠΌΡΠΈΠ²ΠΎ ΠΏΡΠΎΠΈΠ·Π½Π΅Ρ ΠΏΡΡΠ½ΡΠΉ, β Π° Π±ΡΠ»Π° ΠΎΠ½Π΄Π°ΡΡΠΎΠ²Π°Ρ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ Π² Paint < < < Π ΡΠ°Π·Π΄Π΅Π» > > > ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΡΠ΅ΠΊΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ
Β
Π Π½Ρ-ΠΊΠ°, ΡΡΠΎ ΡΠ°ΠΌ Π΅ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ°;
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ°ΡΠΊΠ°Ρ ΡΠ°ΠΉΡΠ° ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS;
ΠΠ°ΡΠΊΠ°Ρ ΡΠ°ΠΉΡΠ° (ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅).ΠΠ°ΠΏΡΠ΅Ρ Π½Π°ΠΏΠ»ΡΠ²Π°Π½ΠΈΡ;
Π Π΅Π·ΠΈΠ½ΠΎΠ²ΡΠΉ ΠΊΠ°ΡΠΊΠ°Ρ ΡΠ°ΠΉΡΠ°;
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° (float vs flex)
Π― Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΊ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌΠ° ΠΏΡΠΈ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ HTML ΡΡΡΡΠΊΡΡΡΡ ΡΠ°ΠΉΡΠ°. ΠΡΠ±ΠΎΠΉ ΡΠ°ΠΉΡ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΡΠ°ΠΏΠΊΠΈ ΠΈ Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΠΎ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄. Π‘Π°ΠΌΠΎ ΡΠΎΠ±ΠΎΠΉ, Π½Π°ΡΠ° ΡΠ°ΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π½Π°ΡΡ Π²Π΅ΡΡΡΠΊΡ Π΄Π²ΡΠΌΡ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ β float ΠΈ flex. Π ΠΊΠΎΠ½ΡΠ΅ ΡΡΠ°ΡΡΠΈ, ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π²ΡΠ²ΠΎΠ΄, ΠΊΠ°ΠΊ Π±ΡΡΡΡΠ΅Π΅ ΠΈ ΠΏΡΠΎΡΠ΅ ΡΠ²Π΅ΡΡΡΠ°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ°ΠΏΠΊΡ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ°ΠΏΠΊΠΈ Π½Π° floatΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± (float)
HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
ΠΠ½ΡΡΡΠΈ Ρ Π΅Π΄Π΅ΡΠ° ΡΠΏΡΠ°Π²Π° Π±ΡΠ΄Π΅Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, Π° ΡΠ»Π΅Π²Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ Π±Π»ΠΎΠΊ Ρ ΡΡΠ΅ΠΌΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ. Π Π°Π·ΠΌΠ΅ΡΠΊΠ° β ΠΏΡΠΎΡΠ΅ Π½Π΅ΠΊΡΠ΄Π°.
<header>
Β Β <a href="#logo">ΠΠΎΠ³ΠΎΡΠΈΠΏ ΡΠ°ΠΉΡΠ°</a>
Β Β <nav>
Β Β Β Β <a href="#home">ΠΠ»Π°Π²Π½Π°Ρ</a>
Β Β Β Β <a href="#contact">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a>
Β Β Β Β <a href="#about">Π Π½Π°Ρ</a>
Β Β </nav>
</header>
CSS ΠΊΠΎΠ΄
Π ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΡΡΠ»ΠΊΠΈ, Π·Π°Π½ΡΠ»ΠΈ Π±Ρ ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΠ΄ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ, Π½ΠΎ ΠΌΡ ΠΌΠ΅Π½ΡΠ΅ΠΌ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ Ρ ΠΎΠ΄ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΈ Π΄Π»Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ float: left, Π° Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° nav β float: right. ΠΠ°ΠΊ Π±Ρ ΡΠ°Π·Π²ΠΎΠ΄ΠΈΠΌ ΠΈΡ ΠΏΠΎ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΎΡΠΎΠ½Ρ Ρ Π΅Π΄Π΅ΡΠ°.
See the Pen ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° (float) by porsake (@porsake) on CodePen.
ΠΠ΅Π»Π°Π΅ΠΌ ΡΠ°ΠΏΠΊΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ
ΠΠ° ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅, ΠΌΡ ΠΎΡΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ float, ΡΠ°ΠΌ Π³Π΄Π΅ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ. ΠΠΎΡΠ»Π΅ ΠΎΡΠΌΠ΅Π½Ρ, ΡΡΡΠ»ΠΊΠΈ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ²Π΅Π»ΠΈ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ β Π²ΡΡΠ°Π»ΠΈ Π² ΡΡΠΎΠ»Π±ΠΈΠΊ. ΠΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ°ΠΏΠΊΡ ΠΏΠ΅ΡΠ²ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ (float).
@media screen and (max-width: 500px) {
Β Β header a {
Β Β Β Β float: none;
Β Β Β Β display: block;
Β Β Β Β text-align: left;
Β Β }
Β Β nav {
Β Β Β Β float: none;
Β Β }
}
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ°ΠΏΠΊΠΈ Π½Π° flex
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± (flex)
HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
ΠΠ΄Π΅ΡΡ Π½Π°ΠΌ ΠΏΡΠΈΡΠ»ΠΎΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΎΠ±Π΅ΡΠ½ΡΡΡ Π² Π±Π»ΠΎΠΊ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ wrap-logo, ΠΈΠ½Π°ΡΠ΅ Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ ΡΠ°Π·Π²Π΅ΡΡΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΈ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΎΡΠΎΠ½Ρ, ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡ ΠΊ Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ.
<header>
Β Β <div>
Β Β <a href="#logo">ΠΠΎΠ³ΠΎΡΠΈΠΏ ΡΠ°ΠΉΡΠ°</a>
Β Β </div>
Β Β <nav>
Β Β Β Β <a href="#home">ΠΠ»Π°Π²Π½Π°Ρ</a>
Β Β Β Β <a href="#contact">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a>
Β Β Β Β <a href="#about">Π Π½Π°Ρ</a>
Β Β </nav>
</header>
CSS ΠΊΠΎΠ΄
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅ header, ΠΏΠΎΡΠ²ΠΈΠ»ΠΎΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΠ»ΠΎΠ°ΡΠ°ΠΌΠΈ.
display: flex; /* ΠΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΠ΅ΠΆΠΈΠΌ Flexbox. */
flex-direction: row; /* ΠΠ΅ΡΠΆΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΡΡΠΎΠΊΠ΅ */
justify-content: space-between; /* Π Π°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½ΡΡΡΠΈ ΡΠ°ΠΏΠΊΠΈ */
flex-wrap: wrap; /* Π Π°Π·ΡΠ΅ΡΠ°Π΅ΠΌ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ */
See the Pen ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° (flex) by porsake (@porsake) on CodePen.
Π§ΡΠΎ Ρ Π½Π°Ρ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡΡ? ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΊΡΠ°Π½Π°, Π±Π»ΠΎΠΊ Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ, ΡΠ°ΠΌ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ ΠΈ Π²ΡΡΠ°Π΅Ρ ΠΏΠΎΠ΄ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ. ΠΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ flex-wrap: wrap. ΠΠ½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ°ΠΏΠΊΡ Π±Π΅Π· ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ².
ΠΡΠ²ΠΎΠ΄
ΠΠ»ΡΡΡ ΡΠ»Π΅ΠΊΡΠΎΠ²:
ΠΠ° ΡΠΊΡΠ°Π½Π°Ρ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ², ΡΠ°ΠΏΠΊΠ° Π½Π° flex-Π°Ρ ΠΏΠΎΡΡΠΈ Π² 2 ΡΠ°Π·Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΠΌΠ΅ΡΡΠ° ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, ΡΡΠΎ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΉ ΠΏΠ»ΡΡ. ΠΡ Π½Π΅ ΡΡΠ°ΡΠΈΠ»ΠΈ Π²ΡΠ΅ΠΌΡ Π½Π° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.
ΠΠΈΠ½ΡΡΡ ΡΠ»Π΅ΠΊΡΠΎΠ²:
ΠΠ°ΠΌ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π»ΠΈΡΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ, Π½Π°ΠΏΠΈΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ΄Π° Π² ΡΡΠΈΠ»ΡΡ .
ΠΠ»ΡΡΡ ΡΠ»ΠΎΠ°ΡΠΎΠ²:
ΠΡΠΎΡΡΠΎΠΉ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΉ ΠΊΠΎΠ΄.
ΠΠΈΠ½ΡΡΡ ΡΠ»ΠΎΠ°ΡΠΎΠ²:
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ ΠΈ ΠΎΡΠΌΠ΅Π½Ρ ΡΠ»ΠΎΠ°ΡΠΎΠ² (clearfix).
ΠΠ»ΡΡΠΎΠ² ΠΈ ΠΌΠΈΠ½ΡΡΠΎΠ² ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΎΡΠ²ΠΎΠΈΡΠ΅ ΡΠ»Π΅ΠΊΡΡ, ΡΠΎ ΠΌΠΈΠ½ΡΡΠΎΠ² Π½Π΅ ΠΎΡΡΠ°Π½Π΅ΡΡΡ. Π’Π°ΠΊ, ΡΡΠΎ Ρ Π²ΡΠ±ΠΈΡΠ°Ρ ΡΠ»Π΅ΠΊΡΡ.
- Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 07.12.2018 10:30:00
- ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²
ΠΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π°Π²ΡΠΎΡΠ° (ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²) ΠΈ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΏΡΡΠΌΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° ΡΠ°ΠΉΡ (http://myrusakov.ru)!
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ΡΡ ΠΊΠΎ ΠΌΠ½Π΅ Π² Π΄ΡΡΠ·ΡΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅: http://vk.com/myrusakov.
ΠΡΠ»ΠΈ ΠΡ Ρ
ΠΎΡΠΈΡΠ΅ Π΄Π°ΡΡ ΠΎΡΠ΅Π½ΠΊΡ ΠΌΠ½Π΅ ΠΈ ΠΌΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ΅, ΡΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π΅Ρ Π² ΠΌΠΎΠ΅ΠΉ Π³ΡΡΠΏΠΏΠ΅: http://vk.com/rusakovmy.
ΠΡΠ»ΠΈ ΠΡ Π½Π΅ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π½Π° ΡΠ°ΠΉΡΠ΅,
ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ: ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, Π»ΠΈΠ±ΠΎ Ρ ΠΠ°Ρ Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²ΡΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠ»ΠΈ ΠΠ°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΡΠ°ΠΉΡ, ΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ Π½Π° Π½Π΅Π³ΠΎ (Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, Π½Π° ΡΠΎΡΡΠΌΠ΅, Π² ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅):
Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS β Zencoder
ΠΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π» Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ ΠΏΠΎ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠ° ΠΎΡ ΠΠ½Π΄ΡΠ΅ΠΉ ΠΠΎΡΠΊΠΎΠ²ΠΈΠ½Π°.
ΠΠ°ΡΠ°Π» ΡΠΌΠΎΡΡΠ΅ΡΡ Ρ ΡΡΠ²ΡΡΠ²ΠΎΠΌ, ΡΡΠΎ Π²ΠΎΡ — ΡΠ΅ΠΉΡΠ°Ρ Π½Π°ΡΡΡΡΡ ΡΠ΅ΠΌΡ-ΡΠΎ Π½ΠΎΠ²ΠΎΠΌΡ. ΠΠΎ ΡΠ΅ΡΠΏΠ΅Π½ΠΈΡ Ρ Π²Π°ΡΠΈΠ»ΠΎ Π΄ΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄ΠΎ Π΄Π΅Π²ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ. Π£ΡΡΠ°Π» Π½Π°Π±Π»ΡΠ΄Π°ΡΡ ΠΌΡΡΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΡΠ° ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°Π±Π»ΠΎΠ½Π°, ΠΈ Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Π»Π°ΡΡ ΡΠ°ΠΏΠΊΠ°.
ΠΠ²ΡΠΎΡ Π·Π°ΡΠ΅ΠΌ-ΡΠΎ Π²ΡΡΠ΅Π·Π°Π» ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ ΡΠΎΠ½Π° Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ, Π²ΡΡΠ°Π²Π»ΡΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° Π² html-ΠΊΠ°ΡΠΊΠ°Ρ ΠΈ ΠΎΠ±Π΅ΡΡΡΠ²Π°Π» Π΅Π³ΠΎ ΡΡΡΠ»ΠΊΠΎΠΉ, ΠΏΡΡΠ°Π»ΡΡ ΡΠ³Π°Π΄Π°ΡΡ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π― ΡΠ΅ΡΠΈΠ» ΡΠ°ΠΌ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ.
Π ΠΎΡΠ½ΠΎΠ²Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΏΠΊΠΈ Ρ ΠΏΠΎΠ»ΠΎΠΆΠΈΠ» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΡΠ»ΠΎΠ΅Π² Π½Π° βΠ°Ρ
. ΠΡΡΠ°ΡΠΈ, Ρ ΡΡΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΡΡ Π² Π΄ΡΡΠ³ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠ΅ ΠΎΡ ΠΠΌΠΈΡΡΠΈΡ Π‘Π΅ΠΌΠ΅Π½ΠΎΠ²Π°. ΠΠ°Π»Π΅Π΅, ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π²ΡΠ΅Ρ
ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ·Π²Π΅ΡΡΠ½Ρ (Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΡΠ°ΠΊ ΠΈ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ, ΠΏΡΠΈ Π²ΡΡΠ΅Π·Π°Π½ΠΈΠΈ ΠΈΡ
ΠΈΠ· psd-ΠΌΠ°ΠΊΠ΅ΡΠ°).
ΠΠ»Ρ ΡΠΈΡΡΠΎΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΠ²Π΅Π΄Ρ ΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ:
, 1
bg-nav.gif - 300x70px
, 1
bg-header.gif - 800x50px
. Π CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
ΡΠ΄Π΅Π»Π°Π» Π΄Π»Ρ Π½ΠΈΡ
ΠΏΠΎΠ΄ΡΡΠ°Π½ΠΎΠ²ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΡΠ²Π΅ΡΠΎΠΌ, Π΄Π»Ρ ΠΏΠΎΠ΄ΡΡΡΠ°Ρ
ΠΎΠ²ΠΊΠΈ.1
logo.gif - 30x30px
ΠΡΠ°ΠΊ, ΡΡΠΎ Ρ Π±ΡΠ΄Ρ Π΄Π΅Π»Π°ΡΡ. ΠΠ΅ΡΠ²ΡΠΉ ΡΠ°Π³ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ. Π‘ΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΎΠ±Π΅ΡΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»ΠΎΡ
, ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π·Π°Π΄Π°Π½ΠΈΡ Π΅ΠΉ ΡΠΈΡΠΈΠ½Ρ:1
div
#wrap{ width: 800px; height: 100%; margin: 0 auto; background: #c0c0c0; }
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠ»ΠΎΠΉ
, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ°ΠΏΠΊΠ° Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ»Ρ Π½Π΅Π΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Ρ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ
Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Ρ ΡΠ°ΠΏΠΊΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°-ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ 1
div
ΠΈ Π·Π°Π΄Π°Ρ Π΅Π΅ Π²ΡΡΠΎΡΡ:1
div
#header{ width: 100%; height: 70px; }
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ ΡΠ»ΠΎΠΉ
, Π·Π°Π΄Π°ΡΠ° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π² ΡΠ΅Π±Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° ΡΠ°ΠΏΠΊΠΈ. ΠΡΡΠΎΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ ΡΠ°Π²Π½ΠΎΠΉ Π²ΡΡΠΎΡΠ΅ ΡΠ°ΠΏΠΊΠΈ, Π° ΡΠ°ΠΌ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡ Π² ΠΏΡΠ°Π²ΠΎΠΌ ΡΠ³Π»Ρ Π±Π»ΠΎΠΊΠ°. ΠΡΡΠΎΡΠ° Π΅Π³ΠΎ ΡΠ°Π²Π½Π° Π²ΡΡΠΎΡΠ΅ ΡΠ°ΠΏΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΌΠ΅ΡΠΈΡΡ Π΅Π³ΠΎ ΠΏΠΎ-Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, Π° ΠΏΠΎ-Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΎΡΡΠ°Π²Π»ΡΡ ΠΊΠ°ΠΊ Π΅ΡΡΡ.1
div
Π ΠΈΡΡΠ½ΠΎΠΊ ΠΊΠΎΡΠΎΡΠΊΠΈΠΉ ΠΈ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π½Π΅ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΠΏΠΊΠΈ, Π° ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π΅Π΅ ΠΏΡΠ°Π²ΡΡ ΡΠ°ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π· ΡΠΎΠ²Π½ΠΎ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ, ΡΡΠΎΠ±Ρ Π²ΠΌΠ΅ΡΡΠΈΡΡ Π² ΡΠ΅Π±Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ. CSS-ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½ΠΈΠΆΠ΅:
#nav{ background: url(i/bg-nav. gif) #b318cf 100% 0 no-repeat; height: 70px; }
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Ρ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ»ΠΎΠΉ
, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΎ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎ Π²ΡΡΠΎΡΠ΅ ΠΎΠ½ΠΎ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»ΠΎΡ 1
div
ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ, ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Ρ Π΅Π³ΠΎ.1
div
ΠΠΎΡΡΠΎΠΌΡ ΡΠΎΠ½ ΡΠ»ΠΎΡ
Π±ΡΠ΄Π΅Ρ Π²ΠΈΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΠΈΡΠ½ΠΎ, Π»ΠΈΡΡ Π΅Π³ΠΎ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°Π΅ΡΠ΅ΠΊ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΈ ΠΎΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠΎΠ»Ρ ΡΠΎΠ½Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ»Ρ ΡΠ»ΠΎΡ 1
div
ΡΠ²Π½ΠΎ Π·Π°Π΄Π°Ρ Π΅Π³ΠΎ Π²ΡΡΠΎΡΡ. ΠΠΎΠ΄ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅:1
div
#head{ background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat; height: 50px; }
ΠΡ Π²ΠΎΡ, Π·Π°Π΄Π°ΡΠ° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈ ΡΠ΅ΡΠ΅Π½Π°. ΠΡΠΈ ΡΡΠΎΠΌ Π½Π΅ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π½ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ, Π½ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΡΠΎΠ»ΡΠΊΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΡΠ»ΠΎΡ. ΠΡΡΠ°Π»ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ»ΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π·Π°Π΄Π°ΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΡΠ°ΠΉΡΠ°. Π Π°Π·ΠΌΠ΅ΡΠ°Ρ Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅ΡΡ Π²ΡΠ΅Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ»ΠΎΠ΅Π² ΠΈ Π΄Π΅Π»Π°Ρ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ Π½Π° Π²ΡΠ΅ Π΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.
ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ½ΠΎΠ²Π° Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π»ΠΎΠΆΡ Π²Π½ΡΡΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ. ΠΠΈΠΊΠ°ΠΊΠΈΡ img Π² html-ΠΊΠΎΠ΄Π΅! ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅ΡΠ°ΡΡ Π΅Π³ΠΎ Π½ΠΈΠΊΡΠ΄Π° Π½Π΅ Π½Π°Π΄ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ ΠΏΠΎ-ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡΡ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ Π±Π»ΠΎΠΊΠ° (ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΡ Π·Π°Π΄ΡΠΌΠ°Π½ΠΎ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°). Π’ΠΎΠ»ΡΠΊΠΎ ΡΠ²Π½ΠΎ Π·Π°Π΄Π°ΠΌ ΡΡΠΎΠΌΡ ΡΠ»ΠΎΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ, ΡΠ°Π²Π½ΡΡ Π²ΡΡΠΎΡΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ°:
#logo{ background: url(i/logo.gif) #36cf18 0 0 no-repeat; width: 30px; height: 30px; }
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»ΠΎΠΉ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ, ΠΏΠΎΠΌΠ΅ΡΠ°Ρ Π²Π½ΡΡΡΡ Π½Π΅Π³ΠΎ ΡΡΡΠ»ΠΊΡ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΎΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (
), ΡΠΎ Π΅ΠΉ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΡΠΎΠ±Ρ βΡΠ°ΡΡΡΠ½ΡΡΡβ Π½Π° Π²ΡΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠ»ΠΎΡ-ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ 1
inline
.1
div
ΠΠΎΡΡΠΎΠΌΡ βΠΏΡΠ΅Π²ΡΠ°ΡΠ°Ρβ ΡΡΡΠ»ΠΊΡ Π² Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
. Π Π²ΠΎΡ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΡΠ½Ρ ΡΡΡΠ»ΠΊΡ, Π·Π°Π΄Π°Π² Π΄Π»Ρ Π½Π΅Π΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΠΈΠ·Π²Π΅ΡΡΠ½Ρ. ΠΠΎ Π»ΡΡΡΠ΅ Π²ΠΎΠ·Π»ΠΎΠΆΠΈΡΡ ΡΡΡ Π·Π°Π΄Π°ΡΡ Π½Π° ΠΏΠ»Π΅ΡΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° — ΠΏΡΡΡΡ ΡΠ°ΠΌ Π²ΡΡΠΈΡΠ»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ°-ΡΡΡΠ»ΠΊΠΈ:1
display:block
#logo a{ display: block; width: 100%; height: 100%; }
ΠΡΡΠ°Π»ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠ°ΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
ΡΠ»ΠΎΡ
. Π‘ΠΎΠ·Π΄Π°Ρ Π½Π΅Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠ΅ΡΠ°Ρ Π²Π½ΡΡΡΡ ΡΠ»ΠΎΡ 1
div
. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎ ΠΊΠΎΠ΄Ρ ΡΠ»ΠΎΠΉ 1
div
ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π²ΡΡΠ΅ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ, ΡΠΎ ΡΠΏΠΈΡΠΎΠΊ Π·Π°ΠΉΠΌΠ΅Ρ Π²ΡΠ΅ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΏΠΎΠ΄ Π½ΠΈΠΌ: 1
div
.1
70px - 50px = 20px
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΌΠ΅ΡΡΠΈΡΡ ΡΠΏΠΈΡΠΎΠΊ Π²ΠΏΡΠ°Π²ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ:1
float: right
#nav ul{ list-style-type: none; float: right; } #nav li{ display: inline-block; } #nav a{ text-decoration: none; color: #fff; font-weight: bold; margin-right: 15px; line-height: 20px; display: inline-block; }
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ·Π²Π°Π» Ρ ΠΌΠ΅Π½Ρ Π·Π°ΡΡΡΠ΄Π½Π΅Π½ΠΈΡ, ΡΡΠΎ ΠΏΠΎΡΠ²ΠΈΠ²ΡΠΈΠ΅ΡΡ Π΅Π»Π΅ Π·Π°ΠΌΠ΅ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ(Π°ΠΌΠΈ)
. ΠΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ Π½ΠΈΡ
Ρ ΠΏΡΠΎΠΏΠΈΡΠ°Π» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
.1
display: inline
ΠΠΎ ΠΏΠΎΡΠ»Π΅ βΠ½Π°Π²ΠΎΠ΄ΠΊΠΈβ Kray Storm Ρ ΡΠΎΡΡΠΌΠ°
ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π±ΡΠ»Π° ΡΠ΅ΡΠ΅Π½Π°. ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² 1
forum.htmlbook.ru
ΠΈ Ρ ΠΏΠΎΠΌΠ΅Π½ΡΠ» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π°
ΠΈ Π΄Π»Ρ Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π΄Π°Π» Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ 1
display: inline-block
, ΡΠ°Π²Π½ΡΡ Π²ΡΡΠΎΡΠ΅ Π±Π»ΠΎΠΊΠ° 1
line-height: 20px
. ΠΠ°Π·ΠΎΡΡ ΠΏΡΠΎΠΏΠ°Π»ΠΈ ΠΈ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΡΠ½ΡΠ»ΠΈΡΡ Π½Π° Π²ΡΡ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ°-ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΡΠ΅, ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° Π³ΠΎΡΠΎΠ²Π°. ΠΡΠ»ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° html-ΠΊΠΎΠ΄, ΡΠΎ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΎΠ½ βΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉβ. Π’ΠΎ Π΅ΡΡΡ, ΠΎΠ½ Π½Π΅ Π·Π°ΠΌΡΡΠΎΡΠ΅Π½ Π²ΡΡΠΊΠΈΠΌΠΈ . Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π° ΠΏΡΠΎΡΡΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ CSS, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄ΡΡ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎΡΡΠΈ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΠ½Π° Π½ΠΈΠΊΡΠ΄Π° Π½Π΅ βΡΡΠ΅Π΄Π΅Ρβ.
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Ρ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ΄ html-ΠΊΠ°ΡΠΊΠ°ΡΠ° ΠΈ CSS-ΠΊΠΎΠ΄Π°.
HTML-ΠΊΠΎΠ΄:
CSS-ΠΊΠΎΠ΄:
/* reset */ *{ margin: 0; padding: 0; } /* main */ #wrap{ width: 800px; height: 100%; margin: 0 auto; background: #c0c0c0; } #header{ width: 100%; height: 70px; } #nav{ background: url(i/bg-nav. gif) #b318cf 100% 0 no-repeat; height: 70px; } #nav ul{ list-style-type: none; float: right; } #nav li{ display: inline-block; } #nav a{ text-decoration: none; color: #fff; font-weight: bold; margin-right: 15px; line-height: 20px; display: inline-block; } #head{ background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat; height: 50px; } #logo{ background: url(i/logo.gif) #36cf18 0 0 no-repeat; width: 30px; height: 30px; } #logo a{ display: block; width: 100%; height: 100%; }
ΠΠ΄Π΅ΡΡ Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Ρ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΌΠ½ΠΎΡ ΡΡ Π΅ΠΌΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ°:
Π, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΠ΅Π³ΠΎ — Π³ΠΎΡΠΎΠ²Π°Ρ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°:
ΠΠ° ΡΡΠΎΠΌ Π²ΡΠ΅.
csshtml
Π’ΠΈΠΏΠΎΠ²ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π²Β Π²ΡΡΡΡΠΊΠ΅. ΠΠ°ΠΊ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠ°ΠΏΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΒ ΠΌΠ΅Π½Ρ
Π’ΠΈΠΏΠΎΠ²ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π²Β Π²ΡΡΡΡΠΊΠ΅
ΠΡΡΡΡΠΊΠ° ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ°ΠΏΠΊΠΈ
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡΡΠΎΠ²
ΠΠ±ΡΡΡΠΊΠ° Π΄Π»ΡΒ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠΎΡΠ΅ΠΌΡ Π½Π΅Β ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ float
ΠΡΠΎΡΡΠΎΠΉ ΡΠ΅ΡΠ΅ΠΏΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΉ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ
Π’ΠΈΠΏΠΎΠ²ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π²Β Π²ΡΡΡΡΠΊΠ΅
ΠΡΡΡΡΠΊΠ° ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ°ΠΏΠΊΠΈ
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡΡΠΎΠ²
ΠΠ±ΡΡΡΠΊΠ° Π΄Π»ΡΒ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠΎΡΠ΅ΠΌΡ Π½Π΅Β ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ float
ΠΡΠΎΡΡΠΎΠΉ ΡΠ΅ΡΠ΅ΠΏΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΉ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ
Π― ΡΠ΅ΡΠΈΠ» Π²ΡΠΏΡΡΡΠΈΡΡ ΡΠΈΠΊΠ» ΡΠΎΠ²Π΅ΡΠΎΠ² ΠΏΠΎΒ ΠΌΠΎΡΠΈΠ²Π°ΠΌ ΡΠ°Π±ΠΎΡ ΡΡΡΠ΄Π΅Π½ΡΠΎΠ² Π¨ΠΊΠΎΠ»Β Π±ΡΡΠΎ. ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΠΏΠΎΠ²ΡΡ Π·Π°Π΄Π°Ρ Π²Β Π²ΡΡΡΡΠΊΠ΅ ΠΈΒ Π½Π°ΠΉΠ΄ΡΠΌ ΠΎΡΠ²Π΅ΡΡ Π½Π°Β ΡΠ°ΠΌΡΠ΅ ΠΏΡΠΎΡΡΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ, Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡΠΈΠ΅ ΡΒ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ².
ΠΒ ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½Π΅ΠΌ ΡΠΎΠ²Π΅ΡΠ΅ ΡΠ²Π΅ΡΡΡΠ°Π΅ΠΌ ΠΏΡΠΎΡΡΡΡ ΡΠ°ΠΏΠΊΡ Β«Π²Β Π»ΠΈΠ½ΠΈΡΒ», ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π½Π°Β ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π΅ ΡΠ°ΠΉΡΠΎΠ², Π²Β ΡΠΎΠΌΒ ΡΠΈΡΠ»Π΅ Π½Π°Β ΡΠ°ΠΉΡΠ΅ Π±ΡΡΠΎ.
ΠΠ°ΠΊΠ΅Ρ ΡΠ°ΠΏΠΊΠΈ Π²Β Π€ΠΈΠ³ΠΌΠ΅:
ΠΡΒ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡ ΡΠ°ΠΏΠΊΡ Π½Π°Β ΠΎΠ±ΡΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈΒ ΠΈΠ΄ΡΠΈ Π²Π³Π»ΡΠ±Ρ, ΠΊΒ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
ΠΠ°Β ΡΠ°ΠΌΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΡΠΎΠ²Π½Π΅ ΡΒ Π½Π°ΡΒ Π΅ΡΡΡ ΡΡΠΈΒ ΡΡΡΠ½ΠΎΡΡΠΈ: Π»ΠΎΠ³ΠΎΡΠΈΠΏ, ΠΌΠ΅Π½Ρ ΠΈΒ ΡΠ΅Π»Π΅ΡΠΎΠ½. ΠΠΎΠ³ΠΎΡΠΈΠΏ Π²ΡΠ΅Π³Π΄Π° Π»ΡΡΡΠ΅ Π΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΠΎΒ ΠΏΡΠΎΡΡΠΎ ΠΊΠ°ΠΊΠ°ΡβΠ½ΠΈΠ±ΡΠ΄Ρ Π½Π°Π΄ΠΏΠΈΡΡ. ΠΡΠΎΒ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΒ Π½Π΅Π·Π°Π³ΡΡΠ·ΠΈΠ²ΡΠΈΠΌΠΈΡΡ ΡΡΠΈΡΡΠ°ΠΌΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°.
ΠΠ°ΠΊΠΈΠ΄Π°Π΅ΠΌ ΠΊΠ°ΡΠΊΠ°Ρ Π±ΡΠ΄ΡΡΠ΅ΠΉ ΡΠ°ΠΏΠΊΠΈ Π²Β Π₯Π’ΠΠ:
<header> <div> </div> <div> </div> <div> </div> </header>
ΠΠ΄ΡΠΌ Π²Π³Π»ΡΠ±Ρ. Π‘ΡΠ°Π²ΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Β Π‘ΠΠ ΡΒ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ ΠΈΒ Π΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎΒ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π°Β Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ:
<header> <div> <a href="/"> <img src="logo.svg" /> </a> </div> <div> </div> <div> </div> </header>
ΠΠ΅Π½Ρ ΠΏΠΎΒ ΡΠΌΡΡΠ»ΡΒ β Π²ΡΡΡΠ½ΡΡΡΠΉ Π²Β Π»ΠΈΠ½ΠΈΡ ΡΠΏΠΈΡΠΎΠΊ. ΠΠΎΡΡΠΎΠΌΡ ΡΠ²Π΅ΡΡΡΠ°Π΅ΠΌ Π΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠΎΠΌ:
<header> <div> <a href="/"> <img src="logo.svg" /> </a> </div> <div> <ul> <li><a href="/products">ΠΡΠΎΠ΄ΡΠΊΡΠΈΡ</a></li> <li><a href="/services">Π£ΡΠ»ΡΠ³ΠΈ</a></li> <li><a href="/blog">ΠΠ»ΠΎΠ³</a></li> <li><a href="/contacts">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></li> </ul> </div> <div> </div> </header>
ΠΠΎΠΌΠ΅Ρ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Β β ΡΠΎΠΆΠ΅ ΡΡΡΠ»ΠΊΠ°, ΠΏΠΎΒ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ½ΠΈΡΡ:
<header> <div> <a href="/"> <img src="logo.svg" /> </a> </div> <div> <ul> <li><a href="/products">ΠΡΠΎΠ΄ΡΠΊΡΠΈΡ</a></li> <li><a href="/services">Π£ΡΠ»ΡΠ³ΠΈ</a></li> <li><a href="/blog">ΠΠ»ΠΎΠ³</a></li> <li><a href="/contacts">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></li> </ul> </div> <div> <a href="tel:88004000500">8 800 4000 500</a> </div> </header>
Π Π°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ Π²ΡΠ΅ ΡΡΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±Π»ΠΎΠΊΠ° ΡΠ°ΠΏΠΊΠΈ Π²Β Π»ΠΈΠ½ΠΈΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΊΡΠ°:
header { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; }
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°Π·Π±Π΅ΡΡΠΌΡΡ ΡΒ ΠΌΠ΅Π½Ρ. Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ Π΅Π³ΠΎ Π²Β ΠΏΠΎΡΡΠ΄ΠΎΠΊ, Π½ΡΠΆΠ½ΠΎ:
ΠΎΠ±Π½ΡΠ»ΠΈΡΡ Π»Π΅Π²ΡΠΉ ΠΎΡΡΡΡΠΏ ΡΒ ΡΠΏΠΈΡΠΊΠ° (ΠΏΠΎΒ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠ½ Π²ΡΠ΅Π³Π΄Π° Π·Π°Π΄Π°Π½ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°),
Π²ΡΡΡΠ½ΡΡΡ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ Π²Β Π»ΠΈΠ½ΠΈΡ,
Π·Π°Π΄Π°ΡΡ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ,
ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΡΠ°ΡΠ½ΡΡ ΠΏΠ»Π°ΡΠΊΡ ΠΏΠΎΠ΄Β Π°ΠΊΡΠΈΠ²Π½ΡΠΌ ΠΏΡΠ½ΠΊΡΠΎΠΌ,
ΡΠ±ΡΠ°ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΏΠ΅ΡΠ΅Π΄Β ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΡΠΏΠΈΡΠΊΠ°,
ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ.
ΠΡΡ Π½ΡΠΆΠ½ΠΎ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΌΠ΅Π½Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΠΈΒ ΠΏΡΠΈΠΆΠΈΠΌΠ°ΡΡ Π½ΠΎΠΌΠ΅Ρ ΡΠ΅Π»Π΅ΡΠΎΠ½Π° ΠΊΒ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ·ΡΡΠΈΠΌ ΠΌΠ°ΠΊΠ΅Ρ. ΠΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΌΠ΅Π½ΡΒ β 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
Π¨ΠΈΡΠΈΠ½Π° ΠΎΡΡΡΡΠΏΠΎΠ² ΠΎΡΒ ΠΊΡΠ°ΡΠ² ΠΏΠ»Π°ΡΠΊΠΈΒ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ Π΄ΠΎΒ ΡΠ΅ΠΊΡΡΠ° Π²Π½ΡΡΡΠΈ Π½Π΅ΡΒ β 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΒ Π±ΠΎΠΊΠ°ΠΌ ΠΈΒ ΠΏΠΎΒ 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ Ρ ΠΈΒ ΡΠ½ΠΈΠ·Ρ. ΠΠ»Π°ΡΠΊΡ Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ΄Π΅Π»Π°Π» ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΉ, ΡΡΠΎΠ±Ρ ΡΠ°Π·Π³Π»ΡΠ΄Π΅ΡΡ ΠΊΡΠ°ΡΠ½ΡΠ΅ ΡΠΈΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ:
Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡΒ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° Π΄ΠΎΒ ΠΌΠ΅Π½ΡΒ β 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
ΠΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ Π²Β Π»ΠΈΠ½ΠΈΡ, ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΡΠΎΡΠΊΠΈ, ΠΎΠ±Π½ΡΠ»ΡΠ΅ΠΌ ΠΎΡΡΡΡΠΏΡ ΡΠΎΒ Π²ΡΠ΅Ρ
ΡΡΠΎΡΠΎΠ½Β β ΠΎΠ½ΠΈ Π½Π°ΠΌ Π½Π΅Β Π½ΡΠΆΠ½Ρ. Π‘Π°ΠΌΠΎ ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎΒ β Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ flex-grow
:
. menu { flex-grow: 1; } .menu ul { display: flex; flex-flow: row nowrap; margin: 0; padding: 0; list-style: none; }
ΠΒ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΠ»Π°ΡΠΊΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ padding
ΡΠΎΒ Π²ΡΠ΅Ρ
ΡΡΠΎΡΠΎΠ½Β β ΡΡΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΡΡΡΠ»ΠΊΠΈ. ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π΅Β Π½ΡΠΆΠ΅Π½, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ margin
ΡΒ ΡΡΡΠ»ΠΎΠΊ, Π°Β ΡΒ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° padding
ΠΠ°Π΄Π°ΡΠΌ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ. Π‘ΡΠ°Π²ΠΈΠΌ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π°Β Π½Π΅Β 40, ΠΏΠΎΡΠΎΠΌΡΒ ΡΡΠΎΒ ΠΏΠΎΒ 10 ΡΒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡΡΠ΅Π΄Π°Π΅Ρ ΠΏΠ»Π°ΡΠΊΠ°Β ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ. ΠΠ°ΠΌΒ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎΒ ΡΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅Β Π΄ΡΡΠ³Π°Π»ΠΎΡΡ ΠΏΡΠΈΒ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ. Π£Β ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΡΠ½ΠΊΡΠ° Π½ΡΠΆΠ½ΠΎ ΡΠ±ΡΠ°ΡΡ ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π°, ΡΡΠΎΠ±Ρ ΠΎΠ½Β Π½Π΅Β ΠΌΠ΅ΡΠ°Π»ΡΡ. Π‘Π°ΠΌΡ ΠΏΠ»Π°ΡΠΊΡ Π±ΡΠ΄Π΅ΠΌ Π΄Π΅Π»Π°ΡΡ ΡΒ ΡΡΡΠ»ΠΊΠΈ:
ΠΒ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΠ»Π°ΡΠΊΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ padding
ΡΠΎΒ Π²ΡΠ΅Ρ
ΡΡΠΎΡΠΎΠ½Β β ΡΡΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΡΡΡΠ»ΠΊΠΈ. ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π΅Β Π½ΡΠΆΠ΅Π½, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ margin
ΡΒ ΡΡΡΠ»ΠΎΠΊ, Π°Β ΡΒ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° padding
.menu li { margin-right: 20px; } .menu li:last-child { margin-right: 0; } . menu a { padding: 8px 10px; }
ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° ΠΎΡΒ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° Π²Β 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΒ ΡΡΠΌΠΌΠ΅ ΡΒ Π»Π΅Π²ΡΠΌ padding
Π²Β 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π΄Π°Π½ ΡΒ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΏΠ»Π°ΡΠΊΠΈ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ, Π±ΡΠ΄Π΅Ρ 40:
.logo { margin-right: 30px; }
ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΠΈΠ»ΠΈ ΠΏΠ»Π°ΡΠΊΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ. Π’ΡΡΒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΉΡΠΈ ΡΠ°Π·Π½ΡΠΌΠΈ ΠΏΡΡΡΠΌΠΈ: ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ active
ΡΒ li
ΠΈΠ»ΠΈΒ ΡΒ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΒ ΠΏΠ»Π°ΡΠΊΠΎΠΉ. ΠΡ ΠΏΠΎΠΉΠ΄ΡΠΌ Π²ΡΠΎΡΡΠΌ ΠΏΡΡΡΠΌ. ΠΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΠΌ, ΡΡΠΎΒ Π²Π½ΡΡΡΠΈ li
Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈΠ±ΠΎ ΡΡΡΠ»ΠΊΠ°, Π»ΠΈΠ±ΠΎ ΠΊΠ°ΠΊΠΎΠΉβΠ½ΠΈΠ±ΡΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΒ ΠΊΠ»Π°ΡΡΠΎΠΌ active
:
.menu a, .menu .active { display: block; padding: 8px 10px; } .menu .active { color: #fff; background-color: #ff3d00; border-radius: 8px; }
Π‘ΡΠΈΠ»ΠΈΠ·ΡΠ΅ΠΌ ΡΡΡΠ»ΠΊΠΈ:
.menu ul { display: flex; flex-flow: row nowrap; margin: 0; padding: 0; font-size: 16px; line-height: 18px; list-style: none; } .menu a, .menu .active { display: block; padding: 8px 10px; text-transform: uppercase; letter-spacing: . 27em; } .menu a { color: #000; text-decoration: none; }
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΠ²Π΅Π΄ΡΠΌ Π²Β ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½ΠΎΠΌΠ΅Ρ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°:
.tel { font-size: 20px; line-height: 24px; } .tel a { color: #000; text-decoration: none; }
ΠΡΡΒ ΠΎΡΠ»ΠΈΡΠ½ΠΎ, ΠΊΡΠΎΠΌΠ΅ ΠΎΠ΄Π½ΠΎΠΉ Π²Π΅ΡΠΈΒ βΒ Π±Π°Π·ΠΎΠ²ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΌΠ΅Π½Ρ ΠΈΒ Π½ΠΎΠΌΠ΅ΡΠ° ΡΠ΅Π»Π΅ΡΠΎΠ½Π° Π½Π΅Β ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ ΠΈΠ·βΠ·Π°Β ΡΠ°Π·Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠΎΠ²:
ΠΠΏΡΡΡΠΈΠΌ ΠΌΠ΅Π½Ρ Π½Π°Β ΠΏΠ°ΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π»ΠΈ:
.menu ul { display: flex; flex-flow: row nowrap; margin: 2px 0 0; padding: 0; font-size: 16px; line-height: 18px; list-style: none; }
ΠΒ Π±Π»ΠΎΠΊΠ΅ menu
ΡΒ Π½Π°Ρ Π½Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ, ΠΊΡΠΎΠΌΠ΅ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° ul
. ΠΠΎΠΆΠ½ΠΎ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡΒ Π»ΠΈΡΠ½Π΅Π³ΠΎ div
ΠΈΒ Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡ menu
ΡΡΠ°Π·Ρ ΡΠΏΠΈΡΠΊΡ. ΠΠΎΒ ΠΌΠ½Π΅ Π±ΠΎΠ»ΡΡΠ΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π²Π°ΡΠΈΠ°Π½Ρ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ div.menu
Π½Π°Β nav.menu
, ΡΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ½Π΅Π΅.
Π‘Β Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ ΠΈΒ ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°Β ΠΆΠ΅ ΠΈΡΡΠΎΡΠΈΡ, Π½ΠΎΒ ΡΡΡΠ»ΠΊΠΈΒ β ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΒ ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ Β ΡΡΠ΄ΠΎΠΌ ΡΒ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ Π½Π΅Β ΡΡΠΎΠΈΡ. ΠΠΎΡΡΠΎΠΌΡ ΠΎΡΡΠ°Π²ΠΈΠΌ ΠΎΠ±ΡΡΡΠΊΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΠΈΒ ΡΠ΅Π»Π΅ΡΠΎΠ½Π° ΠΊΠ°ΠΊΒ Π΅ΡΡΡ.
ΠΡ ΠΏΠΎΠΊΠ° Π½Π΅Β Π²ΡΠ±ΡΠ°Π»ΠΈ ΠΈΒ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅Β Π½Π°ΡΡΡΠΎΠΈΠ»ΠΈ ΡΡΠΈΡΡΡ. ΠΒ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠΎΠ²Π΅ΡΠ΅ ΡΠ°Π·Π±Π΅ΡΡΠΌ ΡΠ°Π·Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ ΡΡΠΈΡΡΠΎΠ² ΠΊΒ ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π§ΡΠΎ Π΅ΡΡ ΠΏΠΎΡΠΈΡΠ°ΡΡ
Blockβlevel elements
Inline elements
HTML5 Semantic Elements
<nav>: TheΒ Navigation Section element
TheΒ current state ofΒ telephone links
P.Β S. ΠΡΠΎ Π±ΡΠ» ΡΠΎΠ²Π΅Ρ ΠΎΒ Π²Π΅Π±βΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅. Π₯ΠΎΡΠΈΡΠ΅ Π·Π½Π°ΡΡ Π²ΡΡ ΠΎΒ ΠΊΠΎΠ΄Π΅, ΡΠ΅ΡΡΠ°Ρ , ΡΡΠΎΠ½ΡΠ΅Π½Π΄βΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅, ΡΠ΅ΡΡΡΡΠ΅, ΡΠ²Π°ΡΠΊΡΠΈΠΏΡΠ΅, ΡΠ΅Π»ΡΡΠ°Ρ ΠΈΒ Π΄ΠΆΠ΅ΠΉΠ΄Π΅? ΠΡΠΈΡΡΠ»Π°ΠΉΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ.
ΠΠ΅Π±βΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ°
ΠΡΠΏΡΠ°Π²ΠΈΡΡ
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
ΠΠ°ΠΏΠΈΠ½ΠΈΡΡ
Π’Π²ΠΈΡΠ½ΡΡΡ
Π‘Π²Π΅ΠΆΠ°ΠΊ
64 ΠΠ΅ΡΡ Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Ρ CSS
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ HTML/CSS Π²Π΅ΡΡ Π½ΠΈΡ ΠΈ Π½ΠΈΠΆΠ½ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»ΠΎΠ² ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π°: Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΡ , ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΈ Ρ. Π΄. ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Π·Π° Π°ΠΏΡΠ΅Π»Ρ 2019 Π³ΠΎΠ΄Π°. 5 Π½ΠΎΠ²ΡΡ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠΎΠ².
- ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΡΡΠ°ΡΠ΅ΠΉ
- ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ
- Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ (Π»ΠΈΠΏΠΊΠΈΠ΅) Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ
- ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎ
- ΠΠΈΠΆΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Ρ
- ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
- ΠΠΈΠΆΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Ρ Bootstrap
- ΠΡΡΠ΅ΠΊΡΡ Π³Π΅ΡΠΎΡ CSS
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ°Π·ΡΠ΅ΠΌΡ
ΠΠ΅ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ SVG.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΡΠΈΠ²ΠΎΠΉ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΡΠΈΠ²ΠΎΠΉ Pure CSS.
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS. ΠΡΠΎΡ ΡΠΊΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ Π²Π²Π΅ΡΡ Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΠΊΠΎΠ΄Π΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠ³Π»ΠΎΠ²Π°Ρ ΠΆΠ°ΡΠΊΠ°
ΠΡΠΎ ΠΏΠ΅ΡΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ³Π»ΠΎΠ²ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΠ΅ΠΊΠΎΡΠ΅Π½Π½Π°Ρ ΠΆΠ°ΡΠΊΠ°
ΠΠ΅ΡΠ΅ΠΊΠΎΡΠ΅Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ HTML ΠΈ CSS.
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΈΠ²Π°Ρ SVG ΡΠΎΠ½ΠΎΠ²Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ
ΠΡΠΈΠ²Π°Ρ ΡΠΎΠ½ΠΎΠ²Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ SVG Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ CSSΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ CSS
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π±Π»ΠΎΠ³Π°, Π±Π΅Π· JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Nodws
30 ΠΌΠ°Ρ 2017 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π½Π°ΠΊΠ»ΠΎΠ½Π½ΡΠΉ ΡΠ°Π·Π΄Π΅Π», ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊΠΠ°ΠΊΠ»ΠΎΠ½Π½ΡΠΉ ΡΠ°Π·Π΄Π΅Π», ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
ΠΠ΅ΡΠ΅ΠΊΠΎΡΠ΅Π½Π½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ ΠΈ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°, ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ. ΠΡΠΎΡΡΠ°Ρ Π²Π΅ΡΡΡΠΊΠ° ΠΈ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π½Π° JS!
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ½Π΄ΡΡ ΠΠ΅ΠΉΠ»ΡΠΎΠΌ
10 ΡΠ½Π²Π°ΡΡ 2017 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ CSSΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ CSS
Π HTML ΠΈ CSS ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ ΠΈΡΡΠ΅Π·Π°ΡΡΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°Π΄Π»ΠΈ Π‘ΡΠΎΡΠΈ
3 Π΄Π΅ΠΊΠ°Π±ΡΡ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΌΠ½ΠΎΠ³ΠΎΡΠ»ΠΎΠΉΠ½Π°Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°ΠΠ½ΠΎΠ³ΠΎΡΠ»ΠΎΠΉΠ½Π°Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°
ΠΠ½ΠΎΠ³ΠΎΡΠ»ΠΎΠΉΠ½Π°Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΡΡΠΈΠΊΠΎΠΌ ΠΠ°Π±Π΅Π»ΡΡΠΊΠΈΠΌ
27 Π°ΠΏΡΠ΅Π»Ρ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΈΠ΄Π΅Ρ Π³Π΅ΡΠΎΡΠΈΠ΄Π΅Ρ Π³Π΅ΡΠΎΡ
ΠΈΠ΄Π΅Ρ Π³Π΅ΡΠΎΡ Π² HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΆΠ΅ΠΉΠΊΠΎΠΌ ΠΡΠ½Π΄Π±Π΅ΡΠ³ΠΎΠΌ
6 Π°ΠΏΡΠ΅Π»Ρ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ/ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΡΠΊΠ°Ρ ΠΈΠ³ΡΠΎΠ²Π°Ρ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠ°ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ/ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΡΠΊΠΎΠ΅ ΠΈΠ³ΡΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅
ΠΠΎΡΡΠ½Π΅Π½ΠΈΠ΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠ°ΠΉΠ»Π° CSS. ΠΡΠΎΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΡΡΠΎΠ², Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅ΡΠ΅ΡΠΎΠ² Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ².
ΠΠ²ΡΠΎΡ ΠΠΈΡΠΊΠΎ ΠΠΎΡΠΈΡ
18 ΠΌΠ°ΡΡΠ° 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π³Π΅ΡΠΎΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π³Π΅ΡΠΎΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅
ΠΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠΊΠ½Π° Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ΅ΡΠ΅ΠΊΠΎΠΌ ΠΠ°Π»Π»Π°Π΄ΠΈΠ½ΠΎ
8 ΠΎΠΊΡΡΠ±ΡΡ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° Π΄Π»Ρ Π³Π΅ΡΠΎΡΠΠΊΠΊΡΡΠ°ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° Π΄Π»Ρ Π³Π΅ΡΠΎΡ
ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ°Π³ΠΈΠΈ JavaScript, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ Π³Π΅ΡΠΎΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΎΠΌΠΈΠ½ΠΈΠΊΠΎΠΌ ΠΠ°Π³Π½ΠΈΡΠΈΠΊΠΎ
22 ΡΠ΅Π½ΡΡΠ±ΡΡ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΠ€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ Ρ HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΎΠ»ΡΠ΅Π±Π½ΠΈΠΊΠΎΠΌ ΠΠ΅Π»ΠΎΠ³ΠΎ ΠΠΎΠ»ΠΊΠ°
5 Π°Π²Π³ΡΡΡΠ° 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° CSSΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° CSS
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° HTML ΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ΅Π½Π½Π΅ΡΠΎΠΌ Π€ΠΈΠ»ΠΈ
18 Π½ΠΎΡΠ±ΡΡ 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ²
8 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π² HTML ΠΈ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ / Π ΡΡΡΠ°Π½ΠΈΡΠ΅
ΠΡΠΎΡΡΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄Π»Ρ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄Π»Ρ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ clip-path
.
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ «Π‘Π΅ΠΊΡΡΠ°Π»ΡΠ½ΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°Π΄ΡΠΆΠ½ΡΠ΅ Π²ΠΎΠ»Π½Ρ»
ΠΡΠΎΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΈΡΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³Π΅ΡΠΎΡΠΠΈΡΡΠΈΠ½Π° Π³Π»Π°Π²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠΈΡΡΠΈΠ½Π° Π³Π»Π°Π²Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ HTML, CSS ΠΈ JS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΏΠΎ ΡΡ.
27 ΠΌΠ°Ρ 2017 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΡΡΠ΅ΠΊΡ Π³Π΅ΡΠΎΡ β ΠΡΡΠ½Π°Π»ΠΡΡΠ΅ΠΊΡ ΠΠ΅ΡΠΎΡ β ΠΡΡΠ½Π°Π»
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π΅ΡΠΎΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠ΅Π΅ Π²ΡΡΠΎΡΡ: 100vh
Π΄Π»Ρ ΠΏΠΎΠΊΡΡΡΠΈΡ Π²ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ ΠΆΡΡΠ½Π°Π»Π°. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ½ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΏΠΎΡ
ΠΎΠΆΡΡ Π½Π° ΠΎΡΠΊΡΡΡΠΈΠ΅ ΠΆΡΡΠ½Π°Π»Π°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΠΌΠ΅ΡΠΎΠ½ΠΎΠΌ ΠΡΠΌΠΏΠ±Π΅Π»Π»ΠΎΠΌ
15 Π½ΠΎΡΠ±ΡΡ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Flexbox HeroΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Flexbox Hero
ΠΡΠΎΡΡΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π³Π΅ΡΠΎΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° Ρ flexbox.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ½ΠΎΠΉ ΠΠΈΡΠ΅Π½ΡΠ΅
5 Π°ΠΏΡΠ΅Π»Ρ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΡΠΎΡΡΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°ΠΡΠΎΡΡΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°
HTML, CSS ΠΈ JS ΠΏΡΠΎΡΡΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° Ρ ΡΠ°Π·ΠΌΡΡΠΈΠ΅ΠΌ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΡΠΈΠΌΠ΅Π½ΠΈΡΠΎΠΌ
5 Π°ΠΏΡΠ΅Π»Ρ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Hero OnScrollHero OnScroll
ΠΠ΅ΡΠΎΠΉ HTML, CSS ΠΈ JS ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ΅ΡΠ΄Π·ΠΈΠΊΠΎΠΌ
9 Π½ΠΎΡΠ±ΡΡ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ ΡΠΈΠΊΠ»ΠΎΠΌ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π°ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ ΡΠΈΠΊΠ»ΠΎΠΌ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π°
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ ΡΠΈΠΊΠ»ΠΎΠΌ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° Π² ΡΠΈΡΡΠΎΠΌ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ΅Π½Π½ΠΈ Π‘ΠΈΠ½Π³ΠΎΠΌ
17 Π½ΠΎΡΠ±ΡΡ 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΅ΠΏΡΠ΅ΡΡΠ²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠΎΠ½Π° Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΠ΅ΠΏΡΠ΅ΡΡΠ²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠΎΠ½Π° Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
ΠΠ΅ΠΏΡΠ΅ΡΡΠ²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠΎΠ½Π° Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π² HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π ΠΎΠ±Π΅ΡΡΠΎΠΌ ΠΠΎΡΠ³Π΅Π·ΠΈ
17 ΡΠ΅Π½ΡΡΠ±ΡΡ 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
Π ΠΊΠΎΠ΄Π΅
Π Π°Π·ΠΌΡΡΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
ΠΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½Ρ Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΌ ΡΠ°Π·ΠΌΡΡΠΈΠ΅ΠΌ ΡΠΎΠ½Π°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎΡΡΠ°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
ΠΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΠΏΠΊΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅
ΠΡΡΠΎΠΊΠΎΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π»ΠΈΠΏΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ ΡΠ΅Π½ΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π»ΠΈΠΏΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉΠ»ΠΈΠΏΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΠ΅ΡΡΡ ΠΊ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π’ΠΎΠΌΠΌΠΈ Π₯ΠΎΠ΄ΠΆΠΈΠ½ΡΠΎΠΌ
9 Π°ΠΏΡΠ΅Π»Ρ, 2017
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠ΅Π½Ρ ΠΏΠ»Π°Π²Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
/ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ»Π΅ΠΉΠΊΠΎΠΌ ΠΠΎΡΡΠ½ΠΎΠΌ
11 ΡΠ΅Π²ΡΠ°Π»Ρ 2017 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΈΠ»Π°Π½ΠΎΠΌ ΠΠ°ΠΊΠ½Π°Π±ΠΎΠΌ
28 Π΄Π΅ΠΊΠ°Π±ΡΡ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π²Π²ΠΎΠ΄Π°/Π²ΡΠ²ΠΎΠ΄Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π²Π²ΠΎΠ΄Π°/Π²ΡΠ²ΠΎΠ΄Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ jquery-waypoints, ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅, ΠΊΠΎΠ³Π΄Π° data-animate-header
(ΡΡΠΎΡ ΡΠ°Π·Π΄Π΅Π») Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π°Π΄ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΡΡ ΡΠΊΡΠ°Π½Π°, Π·Π°ΡΠ΅ΠΌ Π°Π½ΠΈΠΌΠΈΡΡΠΉΡΠ΅ data-animate-header
(ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ) ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ css-ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ² ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΠΈΠ· 3 ΠΊΠ»Π°ΡΡΠΎΠ² ( .header-past
, .header-show
, .header-hide
) β Π±Π΅Π· Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ Ρ dom.
ΠΠ²ΡΠΎΡ antwon
16 ΠΈΡΠ½Ρ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° HTML, CSS ΠΈ JavaScript.
ΠΠ²ΡΠΎΡ ΠΠΌΠΌΠ°Π½ΡΡΠ»Ρ ΠΠΈΠ»Π°Π½Π΄
7 ΠΌΠ°ΡΡΠ° 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΈΠ½ΡΠ΅Π»Π»Π΅ΠΊΡΡΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ ΡΠ°ΠΉΡΠΎΠ²ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΈΠ½ΡΠ΅Π»Π»Π΅ΠΊΡΡΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ ΡΠ°ΠΉΡΠΎΠ²
ΠΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠ½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° jQuery ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΈ ΡΡΡΠ΅ΠΊΡ ΠΊΠ»Π°ΡΡΠ° Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠ΅ΠΊΡΠΈΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π»Π΅ΡΠΎΠΌ
2 ΡΠ΅Π²ΡΠ°Π»Ρ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΊΡΡΡΠΈΠ΅ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΊΡΡΡΠΈΠ΅ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΊΠ»Π°ΡΡΠΎΠ² Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΆΠ°ΡΠΏΠ΅Ρ
21 ΡΠ½Π²Π°ΡΡ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: CSS-ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°CSS-ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
ΠΠ°Π±Π°Π²Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠ΅Π³ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ CSS3!
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΡΠ΄ΠΈ Π‘ΡΠΌΠΌΠΎΠ½ΡΠΎΠΌ
23 ΠΎΠΊΡΡΠ±ΡΡ 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΅ΡΡ Π½ΡΡ ΡΠΊΠΎΠ»ΡΠ·ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡΠΠ΅ΡΡ Π½ΡΡ ΡΠΊΠΎΠ»ΡΠ·ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π‘ΠΊΡΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΡΠ²Π΅ΡΡ
Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΠΈΡΠΎΠΌ ΠΡΡΠ±Π΅ΡΠΎΠΌ
20 ΠΎΠΊΡΡΠ±ΡΡ 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ
ΠΠ»Π°ΡΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ HTML, CSS ΠΈ JS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΡΠΊΠΎΠΌ ΠΠΈΠ±ΡΠ½Π°ΠΎ
8 ΠΈΡΠ½Ρ 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (ΠΡΡΡΡΡΠΉ ΠΏΡΠΈΠ΅ΠΌ)Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (ΠΡΡΡΡΡΠΉ ΠΏΡΠΈΠ΅ΠΌ)
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ, ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΠΈ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ div
Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠ°ΡΠ΅ΠΌ Π΅ΡΡΡ div
, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ. ΠΡΠΎΡΡΠΎ Ρ
ΠΎΡΠ΅Π» ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΈ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ΄Π΅Ρ. Π Π°Π±ΠΎΡΠ°Π΅Ρ Π² ΠΏΡΠΈΠ»ΠΈΡΠ½ΠΎΠΌ Ρ
Π°ΠΊΠ΅ΡΡΠΊΠΎΠΌ ΡΡΠΈΠ»Π΅.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΡΡΠΈ ΠΠΎΡΡ
21 ΠΌΠ°ΡΡΠ° 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠΊ Ρ Π»ΠΈΠΏΠΊΠΈΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌΠΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠΊ Ρ Π»ΠΈΠΏΠΊΠΈΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ
Π‘ΠΎΠ·Π΄Π°Π΅Ρ Π»ΠΈΠΏΠΊΠΈΠΉ Ρ
Π°ΠΊΠ΅ΡΡΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ-Π½Π°ΠΊΠ»Π΅ΠΉΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Π±Π΅Π· ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠΎΠ±ΡΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΠΉΠΊΠ»ΠΎΠΌ
19 ΠΈΡΠ»Ρ 2013 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΈΠ΄Π΅ΠΎ ReactΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΈΠ΄Π΅ΠΎ React
ΠΡΠΎΡΡΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΈΠ΄Π΅ΠΎ React.js.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΡΠΊΠΎΠΌ Π‘Π°ΡΠΏΠΎΠ½Π³ΠΎΠΌ
2 ΠΈΡΠ½Ρ 2017 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΈΠ΄Π΅ΠΎΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΈΠ΄Π΅ΠΎ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΈΠ΄Π΅ΠΎ Ρ HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ»Π΅ΠΊΡΠΎΠΌ
6 ΡΠ΅Π²ΡΠ°Π»Ρ 2017 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΈΠ΄Π΅ΠΎ Π³Π΅ΡΠΎΡΠΠΈΠ΄Π΅ΠΎ Π³Π΅ΡΠΎΡ
Π ΡΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π΅ΡΠΎΡ Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ Π²ΠΈΠ΄Π΅ΠΎ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΠΈΡΠΎΠΌ Π‘ΠΈΠΌΠ΅ΠΎΠ½Π΅
20 ΠΎΠΊΡΡΠ±ΡΡ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ Mix-ModeΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ° Mix-Mode
ΠΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Ρ ΡΡΡΠ΅ΠΊΡΠ½ΡΠΌ, ΡΠ°Π·Π±ΠΎΡΡΠΈΠ²ΡΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Mix-blend-mode
.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°Π΄Π»ΠΈ Π‘ΡΠΎΡΠΈ
8 ΡΠ΅Π½ΡΡΠ±ΡΡ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²ΠΈΠ΄Π΅ΠΎΠ°Π½ΠΈΠΌΠ°ΡΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²ΠΈΠ΄Π΅ΠΎ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ»Π° Π½Π°ΡΡΡΠΎΠ΅Π½Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Adobe After Effects ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½Π° Π΄Π»Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ .ogv ΠΈ .webm. ΠΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ (Π½Π°ΠΌΠ΅ΡΠ΅Π½Π½ΠΎ). ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Bootstrap Π΄Π»Ρ HTML, JavaScript Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ.
ΠΠ²ΡΠΎΡ Π‘ΠΈΠ»ΡΠ²ΠΈΡ ΠΠ°Π³ΠΈΡ
4 ΠΎΠΊΡΡΠ±ΡΡ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΈΠ΄Π΅ΠΎΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΈΠ΄Π΅ΠΎ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΈΠ΄Π΅ΠΎ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ Π² HTML ΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΆΠ΅ΠΉΠΊΠΎΠ±ΠΎΠΌ ΠΡΠ²ΠΈΠ΄ΡΠΎΠ½ΠΎΠΌ
29 ΠΌΠ°Ρ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΠ·Π°ΠΉΠ½ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: bootstrap.css, font-awesome.css
Π ΠΊΠΎΠ΄Π΅
CSS Goey ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Π²ΡΠ΅Π³Π΄Π° Π²Π½ΠΈΠ·Ρ β Flexbox
ΠΠΎΠ³Π΄Π° Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° ΡΠΊΡΠ°Π½Π΅, Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Π½Π΅ ΠΎΡΡΠ°Π΅ΡΡΡ Π²Π½ΠΈΠ·Ρ, ΡΡΠΎ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΠ°Π½Π½ΠΎ. Π Π΅ΡΠ΅Π½ΠΈΠ΅. Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΠΌΠ°ΠΊΠ΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π³ΠΈΠ±ΠΊΠΈΡ
ΡΡΠΎΠ»Π±ΡΠΎΠ². Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΡΠΎΠΌΡ Π»ΠΈΠ±ΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ flex-grow: 1
Π² ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π·Π΄Π΅ΡΡ ΡΡΠΎ ΡΠ°Π·Π΄Π΅Π»
. ΠΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ margin-top: auto
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π²Π°Π»ΡΡ Π²Π½ΠΈΠ·Ρ, Π·Π΄Π΅ΡΡ ΡΡΠΎ footer
.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°
Π Π°Π·Π²Π΅ΡΠ½ΡΡΡ/ΡΠ²Π΅ΡΠ½ΡΡΡ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Ρ ΡΠ΅ΡΠΊΠΎΠΉ CSS
Π Π°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Grid. ΠΠΈΠΊΠ°ΠΊΠΈΡ ΠΏΠΎΠ»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ² Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ!
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΠΏΠΊΠΈΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Flexbox
ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ flexbox
Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π° ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Parallax
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» ΡΠ°ΠΉΡΠ° Ρ HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΡΠΈΠ½ΠΎΠΌ ΠΠ°ΠΊΠ΅ΡΡΠΎΠΌ
7 ΡΠ½Π²Π°ΡΡ 2017 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» HTML, CSS ΠΈ JavaScript Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΡΠΈΠ°ΡΠΎΠΌ
3 Π΄Π΅ΠΊΠ°Π±ΡΡ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ
ΠΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ
ΡΠ΅ΡΠ΅ΠΉ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ½Π΄ΡΡ ΠΡΠ½ΡΠΌΠΎΠΌ
22 ΡΠ΅Π½ΡΡΠ±ΡΡ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π° Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΠ΅Π΅ 2-3 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅. ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 767 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ).
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΡΠΎΡΡΠΎΠΉ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»ΠΡΠΎΡΡΠΎΠΉ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
ΠΡΠΎΡΡΠΎΠΉ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» HTML ΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΡΠΈΠ°ΡΠΎΠΌ
25 Π°Π²Π³ΡΡΡΠ° 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΡΠΎΡΡΠΎΠΉ Π²ΡΠ΄Π²ΠΈΠΆΠ½ΠΎΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»ΠΡΠΎΡΡΠΎΠΉ Π²ΡΠ΄Π²ΠΈΠΆΠ½ΠΎΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
HTML ΠΈ CSS ΠΏΡΠΎΡΡΠΎΠΉ Π²ΡΠ΄Π²ΠΈΠΆΠ½ΠΎΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ».
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π°ΠΉΠ»ΠΈ Π¨ΠΎΡ
24 Π°Π²Π³ΡΡΡΠ° 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: HTML ΠΈ CSS ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»HTML ΠΈ CSS ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
ΠΡΠ°ΡΠΊΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°Π΄ΡΠΎΠΌ Π₯ΠΎΠΊΠ°Π½ΡΡΠΎΠ½ΠΎΠΌ
4 ΠΌΠ°Ρ 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ»Π°ΡΡΠ½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Π½Π° ΡΠΈΡΡΠΎΠΌ CSSΠΠ»Π°ΡΡΠ½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠΌ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS. ΠΠ΅ΡΠΆΠΈΡΡΡ ΠΏΠΎΠ΄Π°Π»ΡΡΠ΅ ΠΎΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ΅Π±Ρ, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΈΠΊΠΎΠΌ ΠΡΠ΅ΠΉΠ²Π΅ΡΠΎΠΌ
21 ΡΠ½Π²Π°ΡΡ 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΊΡΠ°ΡΠΈΠ²Π°Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ° Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π° AuroraΠΊΡΠ°ΡΠΈΠ²Π°Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ° Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π° Aurora
ΠΊΡΠ°ΡΠΈΠ²Π°Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ° Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π° Aurora.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΌΠΈΡΠΎΠΌ ΠΡΠΎΠΊΠΎΠΌ ΠΠ°ΠΌΠ±Π»Π΅
28 ΠΎΠΊΡΡΠ±ΡΡ 2013 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
10 Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ HTML- ΠΈ CSS-ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΡΡΠΎΠ±Ρ Π²Π΄ΠΎΡ Π½ΠΎΠ²ΠΈΡΡ Π²Π°Ρ
ΠΡΠ½ΠΈΠ΅Π» — ΠΠ»ΠΎΠ³ —
ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π΅Π»ΡΠ²Π°Π΅ΡΠ΅ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ ΠΏΠΎΠ΄ ΡΡΠΊΠΎΠΉ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΈΠ· ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ ΡΠ°ΠΉΡΠ° Π±Π΅Π· ΠΎΡΠΈΠ±ΠΎΠΊ. ΠΡ ΡΠΎΡΠ½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π·Π°Π±ΡΠ»ΠΈ Π² ΡΠ°ΠΏΠΊΠ΅? ΠΡΠΌΠ°Π»ΠΈ Π»ΠΈ Π²Ρ ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΡΡΠΎΠΉ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ Π΄Π΅ΡΠ°Π»ΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅? ΠΡ Π² ΠΊΡΡΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°?
Π§ΡΠΎΠ±Ρ Π±ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ, ΡΡΠ° ΡΡΠ°ΡΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠ½Π΅ΠΌ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Π² ΡΡΠΈΠ»Π΅ ΠΡΠ΅Π²Π΅ΡΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅Ρ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ ΡΡΠ΄ Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² (Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠΈΠ²Π½ΡΡ , ΡΠ²Π΅ΡΡΡ Π²Π°Ρ), ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΡΠ΅ΡΠΏΠ°ΡΡ ΠΈΠ· Π½ΠΈΡ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅.
ΠΠΎΡΡΠΎΠΌΡ Ρ Π²ΡΠ±ΡΠ°Π» Π΄Π»Ρ Π²Π°Ρ 10 Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠ°ΠΏΠΊΠΈ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° . ΠΡΠ΅ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΡΠΊΡΡΡΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ΅ ΠΈ ΡΠ΄Π΅Π»Π°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bootstrap, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ Π² ΠΌΠΈΡΠ΅. ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°ΡΡΡΡ!
10 Free Header HTML & CSS Snippets
1. ΠΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Bootstrap
ΠΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΡ Bootstrap 4 ΠΈ Javascript, ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠ°Π½Π΅Ρ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΉ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅.
ΠΠ½ ΠΏΡΠΎΡΡ, ΡΠΈΡΡ, ΡΡΡΠ΅ΠΊΡΠΈΠ²Π΅Π½ ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ .
2. Bootstrap Background Image
Π‘ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ Π·Π΄Π΅ΡΡ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π²ΡΡΠΎΡΠ° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ°Π²Π½Π° 100% ΠΎΠΊΠ½Π° Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ min-height: 100vh
.
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ .bg-cover
, ΡΡΠΎΠ±Ρ ΡΠΎΠ½ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΠ» Π΄Π»Ρ Π²ΡΠ΅Ρ
ΠΎΠΊΠΎΠ½. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ Ρ
ΠΎΡΠΎΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ, ΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ ΠΎΡΠ΅Π½Ρ Ρ
ΠΎΡΠΎΡ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΠΊΡΠ°Π½Π΅. ΠΡΠ»ΠΈΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ°!
3. ΠΠ΅Π³Π°ΠΌΠ΅Π½Ρ Bootstrap
ΠΠ΄Π΅ΡΡ ΠΌΠ΅Π³Π°ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ, ΡΠΎΠ΄Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ Bootstrap 4. ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΊΠ»Π°ΡΡ CSS, ΡΡΠΎΠ±Ρ ΡΡΠΎ ΠΌΠ΅Π³Π°ΠΌΠ΅Π½Ρ Π±ΡΠ»ΠΎ Π½Π° ΠΌΠ΅ΡΡΠ΅. ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
Π° Π½Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
.
ΠΠΏΡΡΡ ΠΆΠ΅, ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ, ΠΎΡΠ΅Π½Ρ ΡΠΌΠ½ΠΎ ΠΈ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
4. Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Boostrap
ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΊΠ»Π°ΡΡΡ CSS jumbotron bg-cover
.
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΠΈΡΡΡΠΉ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.
5. ΠΠΎΠ»Π·ΡΠ½ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Bootstrap
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΊΠ»Π°ΡΡΡ CSS ΠΊΠ°ΡΡΡΠ΅Π»ΠΈ
. ΠΠΎΡΡΠΎΠΌΡ ΠΎΡΡΠ°Π»ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ CSS Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
6. Bootstrap Video Embed
ΠΡΠΎΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²ΠΈΠ΄Π΅ΠΎ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π½Π΅ ΡΡΡΡΠΏΠ°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΊΠ»Π°ΡΡΡ CSS Booststrap. Π·Π΄Π΅ΡΡ.
7. Bootstrap Transparent Jumbotron
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΏΠΎΡΡΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»Ρ, ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠΌΠ΅ΡΠ°ΡΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Ρ Π·Π΄Π΅ΡΡ, ΠΏΠ°Π½Π΅Π»ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠ΅Π½ΡΠ΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅, ΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° Jumbotron.
8. Bootstrap Magazine Carousel
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΆΡΡΠ½Π°Π»Π° ΠΈΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ Ρ ΠΊΠ°ΡΡΡΠ΅Π»ΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅, ΡΠΎ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²Π°Ρ. Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈ Bootstrap Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΡΡ ΡΠ°Π±ΠΎΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ²ΠΎΠΈΠΌ Π½Π°ΡΠΈΠ²Π½ΡΠΌ ΠΊΠ»Π°ΡΡΠ°ΠΌ.
9. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Bootstrap
ΠΠ° ΡΡΠΎΡ ΡΠ°Π· ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ JQuery Owl ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π² ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ°ΡΡΡ CSS Π² ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½Π° ΠΈΠ·-Π·Π° ΡΡΡΠ΅ΠΊΡΠΎΠ², Π²Π»ΠΈΡΡΡΠΈΡ Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΏΠΎΡΠ²Π»ΡΡΡΠΈΠ΅ΡΡ Π½Π° ΡΠ»Π°ΠΉΠ΄Π°Ρ . ΠΠ΅ Π°Ρ ΡΠΈ ΠΊΠ°ΠΊΠΎΠ΅ Π΄Π΅Π»ΠΎ.
10. ΠΠΈΠ΄Π΅ΠΎ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Bootstrap
ΠΡΠ΅Π³Π΄Π° ΠΏΡΠΈΡΡΠ½ΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ, Π²ΠΈΠ΄Π΅ΠΎ Π² ΡΠΎΠ½ΠΎΠ²ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ΅Π³Ρ HTML video
. ΠΠ»Ρ ΠΏΡΠΎΡΡΠΎΡΡ Π²ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ, Π½Π΅ ΠΏΡΠΈΠ±Π΅Π³Π°Ρ ΠΊ JavaScript.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π― Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΈ 10 ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΡΠ±Π΅Π΄ΠΈΠ»ΠΈ Π²Π°Ρ, ΡΡΠΎ Π²Ρ, Π½Π΅ ΠΊΠΎΠ»Π΅Π±Π»ΡΡΡ, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ ΡΠ΅ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»ΡΡΡ Π²Π°Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ, ΠΈ ΡΡΠΎ Π²Ρ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ΠΉ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ. ΠΠΏΡΡΡ ΠΆΠ΅, ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ, ΠΎΠ±Π»Π°Π΄Π°Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½Π°Π²ΡΠΊΠ°ΠΌΠΈ ΠΈ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ. Π§ΡΠΎ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅? ΠΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ Π²Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΡΠ΅? Π£ Π²Π°Ρ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ? ΠΠ΄Ρ Π²Π°ΡΠΈΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π²!
10 ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ HTML ΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ CSS
- ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ
ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π΅Π»ΡΠ²Π°Π΅ΡΠ΅ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ ΠΏΠΎΠ΄ ΡΡΠΊΠΎΠΉ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΈΠ· ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ ΡΠ°ΠΉΡΠ° Π±Π΅Π· ΠΎΡΠΈΠ±ΠΎΠΊ. ΠΡ ΡΠΎΡΠ½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π·Π°Π±ΡΠ»ΠΈ Π² ΡΠ°ΠΏΠΊΠ΅? ΠΡΠΌΠ°Π»ΠΈ Π»ΠΈ Π²Ρ ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΡΡΠΎΠΉ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ Π΄Π΅ΡΠ°Π»ΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅? ΠΡ Π² ΠΊΡΡΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°?
Π§ΡΠΎΠ±Ρ Π±ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ, ΡΡΠ° ΡΡΠ°ΡΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠ½Π΅ΠΌ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Π² ΡΡΠΈΠ»Π΅ ΠΡΠ΅Π²Π΅ΡΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅Ρ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ ΡΡΠ΄ Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² (Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠΈΠ²Π½ΡΡ , ΡΠ²Π΅ΡΡΡ Π²Π°Ρ), ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΡΠ΅ΡΠΏΠ°ΡΡ ΠΈΠ· Π½ΠΈΡ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅.
ΠΠΎΡΡΠΎΠΌΡ Ρ Π²ΡΠ±ΡΠ°Π» Π΄Π»Ρ Π²Π°Ρ 10 Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠ°ΠΏΠΊΠΈ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° . ΠΡΠ΅ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΡΠΊΡΡΡΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ΅ ΠΈ ΡΠ΄Π΅Π»Π°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bootstrap, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ Π² ΠΌΠΈΡΠ΅. ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°ΡΡΡΡ!
10 Free Header HTML & CSS Snippets
1. ΠΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Bootstrap
ΠΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΡ Bootstrap 4 ΠΈ Javascript, ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠ°Π½Π΅Ρ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΉ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅.
ΠΠ½ ΠΏΡΠΎΡΡ, ΡΠΈΡΡ, ΡΡΡΠ΅ΠΊΡΠΈΠ²Π΅Π½ ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ .
2. Bootstrap Background Image
Π‘ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ Π·Π΄Π΅ΡΡ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π²ΡΡΠΎΡΠ° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ°Π²Π½Π° 100% ΠΎΠΊΠ½Π° Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ min-height: 100vh
.
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ .bg-cover
, ΡΡΠΎΠ±Ρ ΡΠΎΠ½ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΠ» Π΄Π»Ρ Π²ΡΠ΅Ρ
ΠΎΠΊΠΎΠ½. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ Ρ
ΠΎΡΠΎΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ, ΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ ΠΎΡΠ΅Π½Ρ Ρ
ΠΎΡΠΎΡ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΠΊΡΠ°Π½Π΅. ΠΡΠ»ΠΈΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ°!
3. ΠΠ΅Π³Π°ΠΌΠ΅Π½Ρ Bootstrap
ΠΠ΄Π΅ΡΡ ΠΌΠ΅Π³Π°ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ, ΡΠΎΠ΄Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ Bootstrap 4. ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΊΠ»Π°ΡΡ CSS, ΡΡΠΎΠ±Ρ ΡΡΠΎ ΠΌΠ΅Π³Π°ΠΌΠ΅Π½Ρ Π±ΡΠ»ΠΎ Π½Π° ΠΌΠ΅ΡΡΠ΅. ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
Π° Π½Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
.
ΠΠΏΡΡΡ ΠΆΠ΅, ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ, ΠΎΡΠ΅Π½Ρ ΡΠΌΠ½ΠΎ ΠΈ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
4. Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Boostrap
ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΊΠ»Π°ΡΡΡ CSS jumbotron bg-cover
.
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΠΈΡΡΡΠΉ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.
5. ΠΠΎΠ»Π·ΡΠ½ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Bootstrap
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΊΠ»Π°ΡΡΡ CSS ΠΊΠ°ΡΡΡΠ΅Π»ΠΈ
. ΠΠΎΡΡΠΎΠΌΡ ΠΎΡΡΠ°Π»ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ CSS Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
6. Bootstrap Video Embed
ΠΡΠΎΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²ΠΈΠ΄Π΅ΠΎ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π½Π΅ ΡΡΡΡΠΏΠ°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΊΠ»Π°ΡΡΡ CSS Booststrap. Π·Π΄Π΅ΡΡ.
7. Bootstrap Transparent Jumbotron
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΏΠΎΡΡΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»Ρ, ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠΌΠ΅ΡΠ°ΡΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Ρ Π·Π΄Π΅ΡΡ, ΠΏΠ°Π½Π΅Π»ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠ΅Π½ΡΠ΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅, ΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° Jumbotron.
8. Bootstrap Magazine Carousel
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΆΡΡΠ½Π°Π»Π° ΠΈΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ Ρ ΠΊΠ°ΡΡΡΠ΅Π»ΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅, ΡΠΎ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²Π°Ρ. Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈ Bootstrap Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΡΡ ΡΠ°Π±ΠΎΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ²ΠΎΠΈΠΌ Π½Π°ΡΠΈΠ²Π½ΡΠΌ ΠΊΠ»Π°ΡΡΠ°ΠΌ.
9. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Bootstrap
ΠΠ° ΡΡΠΎΡ ΡΠ°Π· ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ JQuery Owl ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π² ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ°ΡΡΡ CSS Π² ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½Π° ΠΈΠ·-Π·Π° ΡΡΡΠ΅ΠΊΡΠΎΠ², Π²Π»ΠΈΡΡΡΠΈΡ Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΏΠΎΡΠ²Π»ΡΡΡΠΈΠ΅ΡΡ Π½Π° ΡΠ»Π°ΠΉΠ΄Π°Ρ . ΠΠ΅ Π°Ρ ΡΠΈ ΠΊΠ°ΠΊΠΎΠ΅ Π΄Π΅Π»ΠΎ.
10. ΠΠΈΠ΄Π΅ΠΎ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Bootstrap
ΠΡΠ΅Π³Π΄Π° ΠΏΡΠΈΡΡΠ½ΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ, Π²ΠΈΠ΄Π΅ΠΎ Π² ΡΠΎΠ½ΠΎΠ²ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ΅Π³Ρ HTML video
. ΠΠ»Ρ ΠΏΡΠΎΡΡΠΎΡΡ Π²ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ, Π½Π΅ ΠΏΡΠΈΠ±Π΅Π³Π°Ρ ΠΊ JavaScript.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π― Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΈ 10 ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΡΠ±Π΅Π΄ΠΈΠ»ΠΈ Π²Π°Ρ, ΡΡΠΎ Π²Ρ, Π½Π΅ ΠΊΠΎΠ»Π΅Π±Π»ΡΡΡ, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ ΡΠ΅ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»ΡΡΡ Π²Π°Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ, ΠΈ ΡΡΠΎ Π²Ρ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ΠΉ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ. ΠΠΏΡΡΡ ΠΆΠ΅, ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ, ΠΎΠ±Π»Π°Π΄Π°Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½Π°Π²ΡΠΊΠ°ΠΌΠΈ ΠΈ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ. Π§ΡΠΎ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅? ΠΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ Π²Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΡΠ΅? Π£ Π²Π°Ρ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ? ΠΠ΄Ρ Π²Π°ΡΠΈΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π²!
10 ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ HTML ΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ CSS
- ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ
Π ΠΠ°Π½ΠΈΡΠ»Π΅
Π£Π²Π»Π΅ΡΠ΅Π½Π½ΡΠΉ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠΎΠΌ Ρ 2007 Π³ΠΎΠ΄Π°, ΠΠ°Π½ΠΈΡΠ»Ρ Π·Π°ΡΠΈΡΠ°Π΅Ρ Π²Π΄ΠΎΠ²Ρ ΠΈ ΡΠΈΡΠΎΡΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΡΠ°ΠΉΡΡ, ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Ρ W3C. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΎΠΏΡΡΡ ΠΎΠ½ Π΄Π΅Π»ΠΈΡΡΡ ΡΠ²ΠΎΠΈΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ Π² Π΄ΡΡ Π΅ ΠΎΡΠΊΡΡΡΠΎΠ³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. ΠΠ½ Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Joomla CMS Ρ 2014 Π³ΠΎΠ΄Π°, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΏΠΈΠΊΠ΅ΡΠΎΠΌ ΠΈ ΠΎΡΠ½ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π³ΡΡΠΏΠΏΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Joomla Breizh.
ΠΠ΅Π±-ΡΠ°ΠΉΡ Facebook Twitter Joomla ΠΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΏΠΎΡΡΠ°
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Flexbox
ΠΠΎΠ³Π΄Π° Ρ Π²ΠΏΠ΅ΡΠ²ΡΠ΅ ΠΈΠ·ΡΡΠΈΠ» ΠΎΡΠ½ΠΎΠ²Ρ HTML ΠΈ CSS Π² 2014 Π³ΠΎΠ΄Ρ, ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΏΠΊΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π±ΡΠ»ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΠ΅Ρ
ΡΡΡΠ°ΡΠ½ΡΡ
ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΡ
Π·Π°Π΄Π°Ρ. Flexbox Π±ΡΠ» Π΅ΡΠ΅ Π½ΠΎΠ²ΡΠΌ, ΠΈ ΠΌΡ Π±ΡΠ»ΠΈ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ float
ΠΈ ΡΠ΅Ρ
Π½ΠΈΠΊΡ clearfix. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΊΠ°ΡΡΠΈΠ½Π° ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³Π°Ρ. Flexbox ΡΠΈΡΠΎΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ, ΠΈ ΡΡΠΎ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π΄Π»Ρ Π½Π°Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ.
ΠΡΠΎ-ΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·ΡΠ°Π·ΠΈΡΡ, ΡΡΠΎ Π² Π½Π°ΡΠΈ Π΄Π½ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π»Π΅Π³ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ CSS. ΠΡΠΎ Π½Π΅ ΡΠ°ΠΊ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ Π·Π°Π΄Π°Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ. Π― ΠΏΠΎΡΡΠ°ΡΠ°ΡΡΡ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ .
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΎΠ±ΡΡΡΠ½Ρ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS flexbox Π΄Π»Ρ ΡΡΠΏΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΈ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΆΠ½ΡΡ ΡΠΎΠ²Π΅ΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ΅ΠΌΠΎΠ². Π ΠΊΠΎΠ½ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ» ΡΠ΄Π΅Π»Π°Π½ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ. ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡΠ΅ ΡΠΈΡΠ°ΡΡ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²Π°Ρ ΠΆΠ΄Π΅Ρ ΡΠ³ΠΎΡΠ΅Π½ΠΈΠ΅!
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ Ρ Π²Π°Ρ Π΅ΡΡΡ Π±Π°Π·ΠΎΠ²ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΠΎ flexbox. ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Ρ Π½Π°ΠΏΠΈΡΠ°Π» Π²Π²ΠΎΠ΄Π½ΡΡ ΡΡΠ°ΡΡΡ ΠΎ flexbox Π² ΡΠ²ΠΎΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΌΡ ΠΎΠ±Π° Π½Π° ΠΎΠ΄Π½ΠΎΠΉ Π²ΠΎΠ»Π½Π΅. Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° β ΡΡΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ Π²ΠΈΠ΄ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈ ΠΏΠΎΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ°ΠΉΡΠ°. ΠΠ±ΡΡΠ½ΠΎ ΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΈΠ»ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ:
ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ°ΠΏΠΊΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ²Π»ΡΡΡΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ.
Flexbox Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ
ΠΠΎΠ³Π΄Π° flexbox ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π²ΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ. ΠΠ°ΡΠ΅ΠΌ Π²ΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ justify-content
Π΄Π»Ρ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π° ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ.
<Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> ΠΡΠ΅Π½Π΄ <Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ>
.ΡΠ°ΠΉΡ-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ; Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ: ΠΏΡΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρ; Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ; }
ΠΡΠΎ ΠΏΡΠΎΡΡΠΎ, ΠΏΡΠ°Π²Π΄Π°? ΠΠ»Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, Π΄Π°. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΌ, ΡΠ΅ΠΌ ΡΡΠΎ.
Π Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π²ΡΡΠ΅ Π½Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΉ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ .
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠΈΡΠΎΠΊΠΈΠΉ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Ρ Π½Π΅Π³ΠΎ Π½Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ. Π₯ΠΎΡΡ Π²ΡΠΎΡΠΎΠΉ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅. ΠΠΎ ΡΡΠΎΠΉ ΠΏΡΠΈΡΠΈΠ½Π΅ HTML Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.
<Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> <Π΄Π΅Π»> <Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ>
Π ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡ Π½Π°Π΄ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ .site-header__wrapper
.
.site-header__wrapper { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ; Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ: ΠΏΡΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρ; Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ; }
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
flex-wrap
ΠΡΠΎ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π·Π°ΡΠΈΡΠ½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ CSS. ΠΡΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΌ ΡΠΊΡΠ°Π½Π΅ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π‘ΠΌ. ΡΠΈΡΡΠ½ΠΎΠΊ Π½ΠΈΠΆΠ΅:
ΠΠ΅Π· flex-wrap: ΠΏΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌ wrap
Π±ΡΠ΄Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°. ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΊΠ»ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ!
Π§ΡΠΎ ΠΌΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ flexbox, ΡΠ°ΠΊ ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. ΠΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡ Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Ρ ΠΈΠ·ΡΡΠΈΠ» Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΠΈΡΠΊ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΡΠ΄ΠΊΠ° Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ flexbox.
Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΠΊΠ½ΠΎΠΏΠΊΡ ΡΡΠ΄ΠΎΠΌ ΡΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ°ΠΊ ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π½ΠΎ? ΠΠΎΠ»ΠΆΠ½Ρ Π»ΠΈ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅Π³ΠΎ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΡΠ»ΠΊΠΈ? ΠΠ»ΠΈ Π΅Π³ΠΎ Π½Π°Π΄ΠΎ ΠΎΡΠ΄Π΅Π»ΠΈΡΡ ΠΎΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ? Π― Π±Ρ ΠΏΠΎΡΠ΅Π» Π½Π° ΡΡΠΎ.
<Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> <Π΄Π΅Π»> <Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ> ΠΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅