ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ.
ΠΠ°Π΄Π°ΡΠ°
ΠΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π±Π΅Π· ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ².
Π Π΅ΡΠ΅Π½ΠΈΠ΅
Π’Π΅Π³ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° <ul> ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <li> Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π½Π°Π΄ Π΄ΡΡΠ³ΠΎΠΌ. ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ , ΡΠ΄ΠΎΠ±Π½ΠΎ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΡΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ. ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ° Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ².
ΠΠ°ΠΌ ΡΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΡΡΠΎ Π² HTML Π΅ΡΡΡ Π±Π»ΠΎΡΠ½ΡΠ΅ ΠΈ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π‘ΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΈΡ Π±Π»ΠΎΠΊΠΎΠ², ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² β ΡΡΠΎ ΡΠ΅Π³ΠΈ <span> ΠΈΠ»ΠΈ <strong>. ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ, ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΈΡ ΡΠ΅Π³ΠΎΠ² <div> ΠΈΠ»ΠΈ <p>. Π’Π°ΠΊ Π²ΠΎΡ, ΡΠ΅Π³ <li> ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
Π§ΡΠΎΠ±Ρ ΡΠ΅Π³ <li> Π½Π΅ Π²ΡΠ» ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΡΡΡΠΎΡΠ½ΡΠΌ.
ΠΠ° ΡΠΎ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΡΠ½ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (Ρ ΠΎΡΡ ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅):
- block β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠΉ.
- inline β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΡΡΠΎΡΠ½ΡΠΉ.
- inline-block β Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΎ ΡΡΠΎΡ ΡΠΈΠΏ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΈΡΠ°ΠΉΡΠ΅ Π½ΠΈΠΆΠ΅, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
Π‘Π½Π°ΡΠ°Π»Π° ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΠ² Π΅Π³ΠΎ ΠΏΡΠ½ΡΠΊΡ Π² ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π ΡΡΠΈΠ»Π΅ CSS ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ li ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ inline.
<!DOCTYPE html> <html> <head> <title>Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ</title> <style> ul.menu-top > li { display: inline; /* Π Π°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */ list-style: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ border: solid 1px #000000; background-color: #fffff0; } </style> </head> <body> <ul> <li>ΠΡΠ½ΠΊΡ 1</li> <li>ΠΡΠ½ΠΊΡ 2</li> <li>ΠΡΠ½ΠΊΡ 3</li> </ul> </body> </html>
ΠΠ½Π°ΠΊ > Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΠΎ ΠΌΡ ΠΎΠ±ΡΠ°ΡΠ°Π΅ΠΌΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ <li> ΡΠ΅Π³Π° <ul> Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ menu-top. Π§ΠΈΡΠ°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ.
ΠΡΠ°ΠΊ, ΡΡΠΎΡ ΡΡΠΈΠ»Ρ ΡΡΠ°Π±ΠΎΡΠ°Π» ΠΈ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ½ΠΊΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°:
Π ΠΈΡΡΠ½ΠΎΠΊ 1. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ° β1.Π£ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° Π΅ΡΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ inline ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ, ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠΌ Π½Π΅Π»ΡΠ·Ρ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, Π° Π±Π»ΠΎΡΠ½ΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΠΎΠ³ΠΎ Π½Π°ΠΌΠΈ ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π» ΡΠΈΡΠΈΠ½Ρ 150px ΠΈ Π²ΡΡΠΎΡΡ 40px. ΠΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ, ΡΠΎ Π΅ΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΄Π²Π° ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ:
<style>
ul.menu-top > li {
display: inline; /* Π Π°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */
list-style: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */
padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
border: solid 1px #000000;
background-color: #fffff0;
width: 150px;
height: 40px;
}
</style>
ΠΡΠΈ ΠΏΡΠ°Π²ΠΊΠΈ Π½Π΅ ΠΏΡΠΈΠ²Π΅Π΄ΡΡ Π½ΠΈ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌ. Π§ΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΠΏ inline-block. ΠΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΊΠΎΠ΄ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
<!DOCTYPE html> <html> <head> <title>Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ</title> <style> ul.menu-top > li { display: inline-block; /* Π Π°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */ list-style: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ border: solid 1px #000000; background-color: #fffff0; width: 150px; height: 40px; } </style> </head> <body> <ul> <li>ΠΡΠ½ΠΊΡ 1</li> <li>ΠΡΠ½ΠΊΡ 2</li> <li>ΠΡΠ½ΠΊΡ 3</li> </ul> </body> </html>
ΠΡΠΎΡ ΠΊΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²ΠΈΠ΄Π½Ρ:
Π ΠΈΡΡΠ½ΠΎΠΊ 2. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ° β2.ΠΠΎ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π² ΠΌΠ΅Π½Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠΏΠΈΡΠΊΠΈ:
<!DOCTYPE html> <html> <head> <title>ΠΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ.</title> <style> ul.menu > li { display: inline-block; /* Π Π°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */ list-style: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ background-color: #fffff0; border: 1px solid #000000; } </style> </head> <body> <ul> <li>ΠΡΠ°Π²ΠΊΠ° <ul> <li><a href="#">ΠΡΠΌΠ΅Π½ΠΈΡΡ</a></li> <li><a href="#">ΠΡΡΠ΅Π·Π°ΡΡ</a></li> <li><a href="#">ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ</a></li> <li><a href="#">ΠΡΡΠ°Π²ΠΈΡΡ</a></li> </ul> </li> <li>ΠΠ°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ <ul> <li><a href="#">ΠΠΈΡΠ½ΠΎΠ΅</a></li> <li><a href="#">ΠΡΡΡΠΈΠ²Π½ΠΎΠ΅</a></li> <li><a href="#">ΠΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΠΎΠ΅</a></li> </ul> </li> <li>Π Π°Π·ΠΌΠ΅Ρ <ul> <li><a href="#">ΠΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ</a></li> <li><a href="#">ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ</a></li> <li><a href="#">Π‘ΡΠ΅Π΄Π½ΠΈΠΉ</a></li> <li><a href="#">ΠΠΎΠ»ΡΡΠΎΠΉ</a></li> </ul> </li> </ul> </body> </html>
ΠΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:
Π ΠΈΡΡΠ½ΠΎΠΊ 3. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ° β3.ΠΡ Π²ΠΈΠ΄ΠΈΠΌ ΡΡΠΎ Π±Π»ΠΎΠΊΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π½Π°ΠΌ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ Π²ΡΡΠΎΡΡ, Π½ΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° Π½Π°ΠΌ Π·Π°ΡΠ°Π½Π΅Π΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ Π΅Ρ ΡΠΎΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΈ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ.
Π ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΏΠΎΡΠ΅ΠΌΡ ΡΠ°ΠΊ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ?
ΠΠ°ΡΠΈ Π±Π»ΠΎΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ inline-block. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ ΡΡΠΎ Ρ Π½ΠΈΡ Π΅ΡΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ), ΡΠ°ΠΊ ΠΈ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π’ΠΎ ΡΡΠΎ ΠΌΡ Π½Π°Π±Π»ΡΠ΄Π°Π΅ΠΌ — ΡΡΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΡΠΎΠΊΡ Ρ ΡΠΈΠΌΠ²ΠΎΠ»Π°ΠΌΠΈ «Π» ΡΠ°Π·Π½ΠΎΠΉ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ:
Π Π Π Π Π Π Π
ΠΡ Π²ΠΈΠ΄ΠΈΠΌ ΡΡΠΎ Π²ΡΠ΅ Π±ΡΠΊΠ²Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π²ΡΡΠ°Π²Π½Π΅Π½Ρ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΉ Π»ΠΈΠ½ΠΈΠΈ. Π’ΠΎΡΠ½Π΅Π΅ ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, Π½ΠΎ ΡΠ΅ΠΉΡΠ°Ρ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ Π²Π»Π°Π·ΠΈΡΡ Π² Π΄Π΅Π±ΡΠΈ. Π’Π°ΠΊ Π²ΠΎΡ, Ρ Π½Π°ΡΠΈΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅.
ΠΠ»Ρ Π²ΡΡΠ°Π²Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΡΠ»ΡΠΆΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ vertical-align. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ β3 Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ top, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΡΠ΅Ρ Π²Π΅ΡΡ Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π²Π΅ΡΡ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠΎΠΊΠΈ.
ΠΠΎΠΊΠ° ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ Π΅Π³ΠΎ ΠΊ ΡΡΡΠΎΠΊΠ΅ Ρ ΡΠΈΠΌΠ²ΠΎΠ»Π°ΠΌΠΈ «Π» ΡΠ°Π·Π½ΠΎΠΉ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ:
Π Π Π Π Π Π Π
ΠΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π±ΡΠΊΠ²Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ «ΡΠΊΠ°ΡΡΡ». Π― ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» CSS Π³ΡΠ°Π½ΠΈΡΡ border ΡΠ°ΠΌΠΎΠΉ Π²ΡΡΠΎΠΊΠΎΠΉ Π±ΡΠΊΠ²Π΅, ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΡΠΊΠ°ΡΠΊΠΎΠ² Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅Ρ, Π΅ΡΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ΠΉ (ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅) ΠΈ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠΎΡΠΊΠΎΠΉ ΡΠΈΠΌΠ²ΠΎΠ»Π° «Π».
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ vertical-align Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΡΡΠΎΡΠ½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠ½ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅ΠΉ ΠΏΡΠΎ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ: vertical-align.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΎΡΡΡΡΠΏΠ»Π΅Π½ΠΈΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ.
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±
Π Π°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈΠΌΠ΅Π΅Ρ Π΄Π²Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ: left ΠΈ right.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:
<!DOCTYPE html> <html> <head> <title>Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ</title> <style> ul.menu-top > li { float: left; /* ΡΠ°Π·Π΅ΡΠ°Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ */ list-style: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */ padding: 5px; margin: 2px; border: 1px solid #000000; background-color: #fffff0; } </style> </head> <body> <ul> <li>ΠΡΠ½ΠΊΡ 1</li> <li>ΠΡΠ½ΠΊΡ 2</li> <li>ΠΡΠ½ΠΊΡ 3</li> </ul> </body> </html>
ΠΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΡ ΠΊΠΎΠ΄Π°:
Π ΠΈΡΡΠ½ΠΎΠΊ 4. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ°.ΠΡΠΎΠ΄Π΅ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΎ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ Π½ΡΠ°Π½Ρ. Π‘Π΅ΠΉΡΠ°Ρ ΠΌΡ Π΅Π³ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΠΎΠ·ΡΠΌΡΠΌ ΠΊΠΎΠ΄, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΅ΡΡΡ Π΄Π²Π° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΡΠΏΠΈΡΠΊΠ° Ρ ΡΠ°Π·Π½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ: display ΠΈ float:
<!DOCTYPE html> <html> <head> <title>Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ</title> <style> ul{ border: 1px solid red; } ul.menu-1 > li, ul.menu-2 > li { list-style: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */ padding: 5px; margin: 2px; border: 1px solid #000000; background-color: #fffff0; } /* ΡΠ°Π·Π΅ΡΠ°Π΅ΠΌ ΡΠΏΠΈΡΠΊΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ */ ul.menu-1 > li { float: left; } ul.menu-2 > li { display: inline-block; } </style> </head> <body> <ul> <li>ΠΡΠ½ΠΊΡ 1</li> <li>ΠΡΠ½ΠΊΡ 2</li> <li>ΠΡΠ½ΠΊΡ 3</li> </ul> <ul> <li>ΠΡΠ½ΠΊΡ 1</li> <li>ΠΡΠ½ΠΊΡ 2</li> <li>ΠΡΠ½ΠΊΡ 3</li> </ul> </body> </html>
ΠΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΡ ΠΊΠΎΠ΄Π°:
Π ΠΈΡΡΠ½ΠΎΠΊ 5. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ°.Π ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΡΠΏΠΈΡΠΊΠ° <ul> ΠΈΠΌΠ΅ΡΡ ΠΊΡΠ°ΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΎΠ»ΡΠΈΠ½ΠΎΠΉ 1 ΠΏΠΈΠΊΡΠ΅Π». ΠΠΎ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display, Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ°. Π Π²ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π²ΡΠΏΠ°Π΄Π°ΡΡ ΠΈΠ· ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΡΠΈ ΡΡΠΎΠΌ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄ Π²ΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΌΠ΅ΡΡΠ°ΠΌΠΈ Π½Π°ΡΠΈ ΡΠΏΠΈΡΠΊΠΈ. ΠΠΎΡΡΠ°Π²ΠΈΠΌ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ menu-1 Π² ΠΊΠΎΠ΄Π΅ ΠΏΠ΅ΡΠ΅Π΄ ΡΠΏΠΈΡΠΊΠΎΠΌ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ menu-2 (ΡΠ΅ΠΉΡΠ°Ρ ΠΎΠ½ Π½ΠΈΠΆΠ΅).
ΠΠΎΡ ΡΡΠΎ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅:
ΠΡΠ½ΠΊΡΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π²Π΅ΡΠΆΠ½Π΅Π΅ ΠΌΠ΅Π½Ρ, Π²Π΅Π΄Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π½ΠΈΠΊΡΠΎ Π½Π΅ ΠΎΡΠΌΠ΅Π½ΡΠ» ΠΈ ΠΎΠ½ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° Π²ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠ°ΠΊ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ?
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ clear, ΠΎΠ½ΠΎ ΠΎΡΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΅ΡΠ»ΠΈ Ρ ΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float.
ΠΠΎΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° clear:
<!DOCTYPE html>
<html>
<head>
<title>Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ</title>
<style>
ul{
border: 1px solid red;
}
ul.menu-1 > li, ul.menu-2 > li {
list-style: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */
padding: 5px;
margin: 2px;
border: 1px solid #000000;
background-color: #fffff0;
}
/* ΡΠ°Π·Π΅ΡΠ°Π΅ΠΌ ΡΠΏΠΈΡΠΊΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ */
ul.menu-1 > li {
float: left;
}
ul.menu-2 > li {
display: inline-block;
}
/* ΠΎΡΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ */
.menu-2{
clear: both;
}
</style>
</head>
<body>
<ul>
<li>ΠΡΠ½ΠΊΡ 1</li>
<li>ΠΡΠ½ΠΊΡ 2</li>
<li>ΠΡΠ½ΠΊΡ 3</li>
</ul>
<ul>
<li>ΠΡΠ½ΠΊΡ 1</li>
<li>ΠΡΠ½ΠΊΡ 2</li>
<li>ΠΡΠ½ΠΊΡ 3</li>
</ul>
</body>
</html>
ΠΠΈΠ΄Π½ΠΎ ΡΡΠΎ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠΆΠ΅ Π½Π΅ ΠΎΠ±ΡΠΈΠΊΠ°Π΅Ρ Π²Π΅ΡΡ Π½ΠΈΠΉ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π½Π°Π΅Π·ΠΆΠ°ΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. ΠΠΎ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅ ΡΠ΅Π³ΠΈ <li> Π²ΡΡ Π΅ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π²Π½Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° <ul>.
Π ΠΈΡΡΠ½ΠΎΠΊ 7. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ°.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² ΡΠ°Π±ΠΎΡΠ΅ Π½Π°ΠΌ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π·Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΌ float. ΠΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π±ΡΠ» Π±Ρ Π²Π°ΡΠΈΠ°Π½Ρ Π·Π°ΠΊΡΡΡΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π² ΡΠΎΠΌ ΠΆΠ΅ Π±Π»ΠΎΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ ΠΎΡΠΊΡΡΡ.
ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΡ ΠΊΠΎΠ΄:
<!DOCTYPE html>
<html>
<head>
<title>Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ</title>
<style>
ul{
border: 1px solid red;
}
ul.menu-1 > li, ul.menu-2 > li {
list-style: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */
padding: 5px;
margin: 2px;
border: 1px solid #000000;
background-color: #fffff0;
}
/* ΡΠ°Π·Π΅ΡΠ°Π΅ΠΌ ΡΠΏΠΈΡΠΊΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ */
ul.menu-1 > li {
float: left;
}
/* ΡΠΎΠ·Π΄Π°ΡΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ clear: both; */
ul.menu-1::after{
content: '.'; /* ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ */
display: block; /* ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΎΠΊ */
clear: both;
height: 0; /* ΡΡΠΎΠ±Ρ Π½Π΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ */
}
ul.menu-2 > li {
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li>ΠΡΠ½ΠΊΡ 1</li>
<li>ΠΡΠ½ΠΊΡ 2</li>
<li>ΠΡΠ½ΠΊΡ 3</li>
</ul>
<ul>
<li>ΠΡΠ½ΠΊΡ 1</li>
<li>ΠΡΠ½ΠΊΡ 2</li>
<li>ΠΡΠ½ΠΊΡ 3</li>
</ul>
</body>
</html>
Π’Π΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ 100% ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΊΠΎΠ΄.
Π ΠΈΡΡΠ½ΠΎΠΊ 8. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ°.ΠΡΠΎΡ ΠΏΡΠΈΡΠΌ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ float ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΡΠΈ Π²ΡΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ² Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΡΠ΅Π³Π°ΠΌΠΈ <div>. Π’Π°ΠΊΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ»Π±ΡΠΎΠ² Ρ ΡΡΠ΅Π±ΡΠ΅ΠΌΡΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅. ΠΠΎΠ³Π΄Π° ΠΌΡ ΡΠΎΠ·Π΄Π°ΡΠΌ ΠΌΠ΅Π½Ρ, ΡΠΎ Π½Π°ΠΌ, Π² Π±ΠΎΠ»ΡΡΠ΅Π½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π², Π½Π΅ Π²Π°ΠΆΠ½Π° Π²ΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠΎΠ², ΠΎΠ½Π° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π°. ΠΠΎΡΡΠΎΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° {display: inline-block} Π² ΡΡΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΎΠΏΡΠ°Π²Π΄Π°Π½ΠΎ.
ΠΠΎ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΡ ΡΠ°ΡΠΊΡΡΡΠΈΡ ΡΠ΅ΠΌΡ ΠΌΡ ΡΡΡ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΠΈΡΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ. Π₯ΠΎΡΡ ΠΌΠΎΠΆΠ΅Ρ Π΅ΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS-ΡΠ°Π±Π»ΠΈΡ, Π½ΠΎ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊΠΈ Π½Π°ΡΡΠΎΠΉΡΠΈΠ²ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΈΡ ΠΏΡΡΠΌΠΎΠΌΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π° Π½Π΅ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈΠ»ΠΈ Π΅ΡΡ ΠΊΠ°ΠΊ-Π»ΠΈΠ±ΠΎ.
komotoz.ru
ΠΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ?
ΠΡ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²Π½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
ΠΠΎ-ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΎΠΌ.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΡΠ°Π²Π½ΡΡΡ ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display Π΄Π»Ρ <li> ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΎΠ΄ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ² Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ²:
<ul> <li>ΠΠ΅ΡΠ²ΡΠΉ</li> <li>ΠΡΠΎΡΠΎΠΉ</li> <li>Π’ΡΠ΅ΡΠΈΠΉ</li> </ul>
ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ±
ΠΠ΅ΡΠ²ΡΠΉ, ΡΠ°ΠΌΡΠΉ Π΄ΡΠ΅Π²Π½ΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± — Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ display Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ inline. Π’Π°ΠΊ ΠΆΠ΅ Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ Π²ΡΡΡΠ°Π²ΠΈΠΌ Π³ΡΠ°Π½ΠΈΡΡ Π² 1px:
ul li { border:1px solid #000; display:inline; }
ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ:
- ΠΠ΅ΡΠ²ΡΠΉ
- ΠΡΠΎΡΠΎΠΉ
- Π’ΡΠ΅ΡΠΈΠΉ
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΠΊ ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½Ρ ΡΠΎ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π’ΡΠ΅ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±.
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±
ΠΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ display ΡΡΠ°Π²ΠΈΠΌ inline-block. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ <li> ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ°Π½ΡΡ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ Π½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π±ΡΠ΄ΡΡ Π² ΡΡΡΠΎΡΠΊΡ, Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ Π½ΡΠΆΠ΅Π½ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ:
ul li { border:1px solid #000; display:inline-block; }
- ΠΠ΅ΡΠ²ΡΠΉ
- ΠΡΠΎΡΠΎΠΉ
- Π’ΡΠ΅ΡΠΈΠΉ
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΠΊ ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½Ρ ΡΠΎ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π’ΡΠ΅ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±.
Π’ΡΠ΅ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅Π½. Π‘Π½Π°ΡΠ°Π»Π° Π·Π°Π΄Π°Π΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Ρ display Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ block, ΡΠ΄Π΅Π»Π°Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ, Π° ΠΏΠΎΡΠΎΠΌ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° float, ΠΏΡΠΈΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΈΡ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ.
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΠΊ ΠΆΠ΅ Π»ΡΡΡΠ΅ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ΅Π³Ρ <ul> ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ hidden, ΠΈΠ½Π°ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅Ρ «Π½Π΅ ΠΏΠΎΡΡΠ²ΡΡΠ²ΡΠ΅Ρ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°.
ul { overflow:hidden; } ul li { border:1px solid #000; display:block; float:left; }
- ΠΠ΅ΡΠ²ΡΠΉ
- ΠΡΠΎΡΠΎΠΉ
- Π’ΡΠ΅ΡΠΈΠΉ
ΠΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π½Π΅ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΈ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΠΎΠΌΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ² margin ΠΈ padding.
www.web.cofp.ru
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ΅ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² (div) Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS.
Π§Π°ΡΡΠΎ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΡΠ΅ΡΠ°ΡΡ Π·Π°Π΄Π°ΡΡ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ΄.
ΠΠ°ΡΠ΅ΡΠΈΠ°Π» Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΠΏΡΠΈΠ·Π²Π°Π½ ΠΏΠΎΠΌΠΎΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌ Π² ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΠΈ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Π²Π΅ΡΡΡΠΊΠΈ web-ΡΡΡΠ°Π½ΠΈΡ.
ΠΠ· ΡΠ΅Π³ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ»ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΡΡΡΠΊΡΡΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΠ΄ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠ»ΠΎΡΠΊΠΎΡΡΠΈ. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ, Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΡΠ²Π»ΡΡΡΡΡ:
- ΠΌΠ΅ΡΠΎΠ΄ Β«FloatΒ»
- ΠΌΠ΅ΡΠΎΠ΄ Β«Inline-blockΒ»
- ΠΌΠ΅ΡΠΎΠ΄ Β«Table-cellΒ»
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°, ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ.
Β«ΠΠ»Ρ ΡΡΠ²ΠΊΠ°Β» ΠΈΠ»ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΎΡΠΈΠΈ
ΠΡΠ΅ ΡΡΡΡΠΊΡΡΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ»ΠΎΠ²Π½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π°:
ΠΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΡΠ΅ (Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅) β ΡΠΈΠΏΠ° img, span ΠΈ ΠΈΠΌ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅. Π£ Π½Π°Ρ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΠ΅Π½ΡΡΡ ΠΈΡ ΡΠΎΠ½ ΠΈ Π·Π°Π΄Π°Π²Π°ΡΡ ΠΈΠΌ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ.
ΠΠ»ΠΎΡΠ½ΡΠ΅ β Π·Π°Π½ΠΈΠΌΠ°ΡΡΠΈΠ΅ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π²ΡΠ΅Π³Π΄Π° Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ β p, h, div.
ΠΠ°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΈ Π±Π»ΠΎΡΠ½ΡΡ ΡΡΡΡΠΊΡΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅:
ΠΠ΅ΡΠΎΠ΄ Β«FloatΒ»
ΠΠ°ΠΊ ΡΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ (ΡΠΌ. Π²ΡΡΠ΅), Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π²Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Π΅ΠΌΡ ΡΠΈΡΠΈΠ½Ρ (width). ΠΠΎ ΡΡΠΎΠΌΡ, ΡΠΌΠ΅Π½ΡΡΠ°Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ div-Π°, Π² ΡΡΠ΄ΠΎΠΊ Π±Π»ΠΎΡΠΊΠΈ Π½Π΅ ΠΏΠΎΡΡΡΠΎΠΈΡΡ.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ (ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΠ΅Π΄ΠΈ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΎΠ²), ΠΌΠ΅ΡΠΎΠ΄ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° float.
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float ΠΎΠ±ΡΠ΅Π»ΠΎ Π±ΠΎΠ»ΡΡΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠ΅Π½Π½ΠΎΡΡΡ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΎΡ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° Π²Π΅ΡΡΡΠΊΠΈ ΠΊ Π±Π»ΠΎΡΠ½ΠΎΠΌΡ.
Float: left (right) ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅Ρ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ (ΠΏΡΠ°Π²ΠΎΠΌΡ) ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠΏΡΠ°Π²Π° (ΡΠ»Π΅Π²Π°) ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠ΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π² ΡΡΠ΄:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" media="all" type="text/css" href="style.css" /> </head> <body> <div>Π‘ΡΡΠΎΠΈΠΌ</div> <div>Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ</div> <div>ΡΡΠ΄</div> <div>ΠΈΠ· Π΄ΠΈΠ²ΠΎΠ²</div> </body> </html>
Π Π²Π½Π΅ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ:
div { float: left; /*ΠΠ°Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅*/ line-height: 120px;/*ΠΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ + Π²Π΅ΡΡ. ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°*/ font-size: 40px; background: dodgerblue; color: white; margin-top: 60px; width: 320px; /*Π€ΠΈΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°*/ margin-right: 10px; text-align: center; /*Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ*/ }
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠ΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ°, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ΄ ΠΈ Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°:
ΠΠ½ΠΎΠ³Π΄Π° Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π±ΡΠ²Π°Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π°Π΄ΠΏΠΈΡΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π±Π»ΠΎΠΊΠ°Ρ . ΠΠ° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΡΠ°Π±ΠΎΡΠ°Π» ΠΊΡΠΈΠ²ΠΎ. ΠΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π» ΠΊΠΎΠ΄ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ: ΠΏΡΠΎΡΠΈΡΠ°Π» Π±Π»ΠΎΠΊΠΈ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·, ΠΈ ΡΠ΄Π΅Π»Π°Π» ΡΠΎ, ΡΡΠΎ ΠΌΡ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠΎΡΠΈΠ»ΠΈ — Π²ΡΡΠΎΠ²Π½ΡΠ» ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. Π£ΡΡΠΈΡΠ΅ ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° float: right.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅ΡΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-ΡΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΡΠΎΡΠΊΡ:
<div></div>
Π ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΌΡ Π·Π°Π΄Π°Π²Π°Π»ΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΎΡΡΡΡΠΏΠ° margin-right. ΠΠΎ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° Π·Π°Π΄Π°ΡΠ°: ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π±Π»ΠΎΠΊΠΈ Π² ΡΡΠ΄, ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ , Π΄Π° ΠΈ Π΅ΡΠ΅ ΡΡΠΎΠ±Ρ ΠΎΡΡΡΡΠΏΡ Π±ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΡΠ½Π°ΡΡΠΆΠΈ?
ΠΠ»Π³ΠΎΡΠΈΡΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ.
HTML:
<div> <!--Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΎΠ±Π΅ΡΡΠΊΡ-ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ --> <div>Π‘ΡΡΠΎΠΈΠΌ</div> <div>Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ</div> <div>ΡΡΠ΄</div> <div>ΠΈΠ· Π΄ΠΈΠ²ΠΎΠ²</div> </div>
CSS:
.wrap { width: 1310px;/*ΡΠΈΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π΅ΡΡΠΊΠΈ*/ margin: 0 auto;/*ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌ Π΅Π΅*/ background: darkgray; height: 120px;/*ΠΠ°Π΄Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΠΎΠ±Π΅ΡΡΠΊΠΈ*/ } Β .bblock { float: left; /*ΠΠ°Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅*/ line-height: 120px;/*ΠΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ + Π²Π΅ΡΡ. ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°*/ font-size: 40px; background: dodgerblue; color: white; width: 320px; /*Π€ΠΈΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°*/ margin-right: 10px; text-align: center; /*Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ*/ } .wrap :last-child { margin-right: 0px;/*Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ»Π΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ div-Π°*/ }
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠ°ΠΊΡΡ ΠΊΠ°ΡΡΠΈΠ½Ρ:
ΠΡ ΡΡΠΎ ΠΆΠ΅, Π²ΡΠ΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΈΡΡΠ°ΡΠΈΠΉ Π½Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΡ, ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΎΠ±ΡΠΈΠΌ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΠΌ.
ΠΠ°ΠΆΠ½ΠΎ!!!
- Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ. ΠΠ½Π°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠΎ-ΡΠΎ ΡΠ°ΠΊΠΎΠ΅:
- ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π΅ Π²ΠΌΠ΅ΡΠ°ΡΡΠΈΠ΅ΡΡ Π±Π»ΠΎΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ· Π΄ΡΡΠ³ ΠΏΠΎΠ΄ Π΄ΡΡΠΆΠΊΡ. Π§ΡΠΎΠ±Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΊΠΎΡΡΠΊ, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-width.
- ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ !DOCTYPE Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΈΠ½Π°ΡΠ΅, ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π² IE, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ² ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ², Ρ Π²Π°Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° ΠΏΠΎΡΡΠ΄ΠΊΠ° 17px (Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΠΎΠ΄ ΡΠΊΡΠΎΠ»Π» ΡΠ°Π·ΠΌΠ΅ΡΠΈΠ»ΠΈ).
- ΠΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΎΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² margin ΠΈ padding Π΄Π»Ρ body.
- Π ΠΎΡΠ»ΠΈΡΠΈΠΈ ΠΎΡ ΠΌΠ΅ΡΠΎΠ΄Π° Β«Inline-blockΒ» Π²Ρ Π½Π΅ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Ρ Π½Π°Π»ΠΈΡΠΈΠ΅ΠΌ Π·Π°Π·ΠΎΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΏΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ margin-ΠΎΠ².
- ΠΠ»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΈ ΠΏΠΎΠ»Π΅ΠΉ ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ margin ΠΈ padding.
ΠΠ΅ΡΠΎΠ΄ Β«Inline-blockΒ»
ΠΠ°ΠΊ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ°ΠΊ ΠΈ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ°Π΅ΠΌΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ. Π ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°?
ΠΡΡΡΠ΅ΡΠ°ΠΉΡΠ΅, Π³Π²ΠΎΠ·Π΄Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: inline-block.
display: inline-block Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎ ΡΡΡΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌ, Π½ΠΎ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π·Π°Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»Ρ, ΠΎΡΡΡΡΠΏΡ ΠΈ Ρ.Π΄.
ΠΠ»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
- Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² (padding)
- Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π΄Π°Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΎ
- ΠΡΡΡΡΡΡΠ²ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ ΡΡ Π»ΠΎΠΏΡΠ²Π°Π½ΠΈΡ Π³ΡΠ°Π½ΠΈΡ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΡΡΡΠ»ΠΊΡ.
HTML:
<div> <p><img src="./vaden-pro-logo.png" alt="" /></p> <p><a href="#">Π‘ΡΡΠ»ΠΊΠ° ΠΌΠ΅Π½Ρ 1 Π΄Π»ΠΈΠ½Π½Π΅Π΅ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ</a></p> </div> <div> <p><img src="./vaden-pro-logo.png" alt="" /></p> <p><a href="#">Π‘ΡΡΠ»ΠΊΠ° ΠΌΠ΅Π½Ρ 2</a></p> </div> <div> <p><img src="./vaden-pro-logo.png" alt="" /></p> <p><a href="#">Π‘ΡΡΠ»ΠΊΠ° ΠΌΠ΅Π½Ρ 3</a></p> </div> <div> <p><img src="./vaden-pro-logo.png" alt="" /></p> <p><a href="#">Π‘ΡΡΠ»ΠΊΠ° ΠΌΠ΅Π½Ρ 4</a></p> </div>
CSS:
.nav { display: inline-block; /*ΠΠ°Π΄Π°Π΅ΠΌ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅*/ width: 180px; /*Π·Π°Π΄Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°*/ background: dodgerblue; } Β .string { text-align: center; /*Π Π°Π²Π½ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ ΠΏΠΎ-Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ*/ }
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠ°ΠΊΡΡ ΠΌΠ΅Π½ΡΡΠΊΡ:
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ, ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ ΠΊΡΠΈΠ²ΠΎΠ²Π°ΡΠΎ… ΠΠΎ ΡΠ°ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΌΡ Π½Π΅ Π½Π°ΠΌΠ΅ΡΠ΅Π½Ρ, ΠΏΠΎ-ΡΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΊ Π½Π°ΡΠΈΠΌ Π΄ΠΈΠ²Π°ΠΌ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ vertical-align (ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠΌ. Π½ΠΈΠΆΠ΅):
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π²ΡΡΠΎΠ²Π½ΡΠ»Π°ΡΡ ΠΏΠΎ Π²Π΅ΡΡ Π½Π΅ΠΉ Π»ΠΈΠ½ΠΈΠΈ:
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Π½ΡΠΌ, Π½ΠΎ Ρ ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ Π½Π° Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΠ²Π΅ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°ΡΡΠΎΡΡΠΈΠΉ ΡΠ΅Π΄Π΅Π²Ρ!!!
ΠΠ°ΠΆΠ½ΠΎ!!!
- ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Ρ Π½Π΅Π²ΠΌΠ΅ΡΠ°ΡΡΠΈΠΉΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡΡ Π²Π½ΠΈΠ· (ΠΊΠ°ΠΊ Π² ΡΠ»ΡΡΠ°Π΅ float: left)
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΉ ΠΊΠ°ΠΊ inline-block ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»Π΅Π½ ΠΊ ΠΏΡΠΎΠ±Π΅Π»Π°ΠΌ. ΠΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ Π½ΡΠ»Π΅Π²ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ
margin ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Π±ΡΠ΄Π΅Ρ Π·Π°Π·ΠΎΡ. ΠΠ°Π·ΠΎΡ ΡΡΠΎΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ°. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΏΠΈΡΠΎΠΊ:
HTML:<ul> <li>ΠΠ°Π·ΠΎΡ</li> <li>ΠΌΠ΅ΠΆΠ΄Ρ</li> <li>Π±Π»ΠΎΠΊΠ°ΠΌΠΈ</li> </ul>
CSS:
li { display: inline-block; width: 180px; background: darkgrey; color: gold; line-height: 120px; font-size: 32px text-align: center; }
Π Π΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½Π°:
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ±ΡΠ°ΡΡ Π·Π°Π·ΠΎΡΡ:
- ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ margin:
- ΡΠΊΠ°Π·Π°ΡΡ font-size: 0 Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ font-size β 0 Π΄Π»Ρ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΠΎΠ³ΠΎ;
ul { font-size: 0px;} li {font-size: 32px;}
- Π½Π΅ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ, Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅β¦ ΠΠ°ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΡΠΊΡ
<li>ΠΠ°Π·ΠΎΡ</li><li>ΠΌΠ΅ΠΆΠ΄Ρ</li><li>Π±Π»ΠΎΠΊΠ°ΠΌΠΈ</li>
Π Π΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΠ· Π²ΡΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ°:
- ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ margin:
- ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ΄ΡΡΠ΄ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΡ Π²ΡΡΠΎΡΡ, ΡΠΎ ΠΈΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ vertical-align: top. ΠΠ°ΠΏΠΎΠΌΠ½Ρ, ΡΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ vertical-align ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ baseline.
- ΠΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ.
- ΠΠ»Ρ Π΄ΡΠ΅Π²Π½ΠΈΡ
Π²Π΅ΡΡΠΈΠΉ Firefox Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΡΠΎΡΠΊΡ:
display: -moz-inline-stack;
ΠΈ ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ div-ΠΎΠ±Π΅ΡΡΠΊΡ. - IE 7 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ — Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΡΠΎΡΠΊΠΈ:
zoom: 1; /*Π·Π°Π΄Π°Π΅ΠΌ hasLayout*/ *display: inline; /*Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠ° β Ρ Π°ΠΊ Π΄Π»Ρ IE */ _height: 250px; /*Π² IE6 Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ min-height*/
- ΠΠ°ΠΌΠ΅ΡΡ, ΡΡΠΎ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΡΡΡΠΎΡΠΊΠΈ ΠΈΠ·Π±ΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π°Π³ΠΈΡΡΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ (Π½Π° ΠΏΠ΅ΡΠ²ΡΡ β Firefox, Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ — IE).
β
ΠΠ΅ΡΠΎΠ΄ Β«TableΒ»
Π’Π°Π±Π»ΠΈΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π±ΡΠ» ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ Π²Π΅ΡΡΡΠΊΠΈ, ΡΡΠΎ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΡΡΠ½ΡΠ»ΠΎΡΡ ΠΏΡΠΎΡΡΠΎΡΠΎΠΉ ΠΈ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎΠΉ ΠΏΠΎΠ½ΡΡΠ½ΠΎΡΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. Π‘ΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ ΠΈ ΠΏΠΎΡΠ»ΡΠΆΠΈΠ»ΠΎ ΠΏΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² CSS.
Π‘Π²ΠΎΠΉΡΡΠ²Π° display: table (table-cell, inline-table), ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±Π΅Π· ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ HTML ΡΠ°Π±Π»ΠΈΡ.
ΠΠ»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈΠΌΠ΅ΡΡΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: table, ΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (ΡΡΠ΅ΠΉΠΊΠΈ), ΠΈΠΌΠ΅ΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: table-cell:
<div> <div>Π‘ΡΡΠΎΠΈΠΌ</div> <div>ΡΠ°Π±Π»ΠΈΡΠ½ΡΠΉ</div> <div>ΡΡΠ΄</div> <div>ΠΈΠ· Π΄ΠΈΠ²ΠΎΠ²</div> </div>
.bblock { display: table-cell; font-size: 32px; width: 200px; height: 200px; background: gold; text-align: center; vertical-align: middle; } Β .wrap { display: table; border-spacing: 20px 20px; background-color: darkgray; }
ΠΠ°ΠΆΠ½ΠΎ!!!
- Π ΠΎΡΠ»ΠΈΡΠΈΠΈ ΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Β«Inline-blockΒ» ΠΈ Β«floatΒ», ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠ΅ΠΉΠΊΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ·.
- Π£ Π²Π°Ρ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin Π΄Π»Ρ ΡΡΠ΅Π΅ΠΊ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ°Π±Π»ΠΈΡΡ.
- ΠΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΈΠ· ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²Π° display: table* Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ IE6, IE7. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² IE8 Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΡΡ ΠΎΡΠΈΠ±ΠΊΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΏΡΠ΅Π²Π΄ΠΎΡΠ°Π±Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π²ΠΈΠ΄Π΅ ΡΠ°Π½Π΄ΠΎΠΌΠ½ΠΎ ΠΏΡΠΎΠΏΠ°Π΄Π°ΡΡΠΈΡ ΡΡΠ΅Π΅ΠΊ. ΠΠ°Π½Π½Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ° ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΠΎΠΉ ΠΏΡΠΎΡΠΈΡΠΎΠ²ΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
.
ΠΡΠ΅Π½ΠΎΠΊ: 35 (ΡΡΠ΅Π΄Π½ΡΡ 4.5 ΠΈΠ· 5)
vaden-pro.ru
ΠΠ°ΠΊ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ html. ΠΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ
Π½Π΅ Π²ΡΠ» ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΡΡΡΠΎΡΠ½ΡΠΌ.ΠΠ° ΡΠΎ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΡΠ½ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display . Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (Ρ ΠΎΡΡ ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅):
- block — ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠΉ.
- inline — ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΡΡΠΎΡΠ½ΡΠΉ.
- inline-block — Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΎ ΡΡΠΎΡ ΡΠΈΠΏ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΈΡΠ°ΠΉΡΠ΅ Π½ΠΈΠΆΠ΅, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
Π‘Π½Π°ΡΠ°Π»Π° ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΠ² Π΅Π³ΠΎ ΠΏΡΠ½ΡΠΊΡ Π² ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π ΡΡΠΈΠ»Π΅ CSS ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ li ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ inline .
Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΡΠ°ΠΊ, ΡΡΠΎΡ ΡΡΠΈΠ»Ρ ΡΡΠ°Π±ΠΎΡΠ°Π» ΠΈ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ½ΠΊΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°:
Π ΠΈΡΡΠ½ΠΎΠΊ 1. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ° β1.
Π£ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° Π΅ΡΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ inline ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ, ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠΌ Π½Π΅Π»ΡΠ·Ρ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, Π° Π±Π»ΠΎΡΠ½ΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΠΎΠ³ΠΎ Π½Π°ΠΌΠΈ ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π» ΡΠΈΡΠΈΠ½Ρ 150px ΠΈ Π²ΡΡΠΎΡΡ 40px . ΠΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ, ΡΠΎ Π΅ΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΄Π²Π° ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ:
ΠΡΠΈ ΠΏΡΠ°Π²ΠΊΠΈ Π½Π΅ ΠΏΡΠΈΠ²Π΅Π΄ΡΡ Π½ΠΈ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌ. Π§ΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΠΏ inline-block . ΠΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΊΠΎΠ΄ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΡΠΎΡ ΠΊΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²ΠΈΠ΄Π½Ρ:
Π ΠΈΡΡΠ½ΠΎΠΊ 2. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ° β2.
ΠΠΎ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π² ΠΌΠ΅Π½Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠΏΠΈΡΠΊΠΈ:
ΠΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ.ΠΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:
Π ΠΈΡΡΠ½ΠΎΠΊ 3. Π Π°Π±ΠΎΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ° β3.
ΠΡ Π²ΠΈΠ΄ΠΈΠΌ ΡΡΠΎ Π±Π»ΠΎΠΊΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π½Π°ΠΌ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ Π²ΡΡΠΎΡΡ, Π½ΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° Π½Π°ΠΌ Π·Π°ΡΠ°Π½Π΅Π΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ Π΅Ρ ΡΠΎΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΈ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ.
Π ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΏΠΎΡΠ΅ΠΌΡ ΡΠ°ΠΊ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ?
ΠΠ°ΡΠΈ Π±Π»ΠΎΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ inline-block . ΠΡΠΎ Π·Π½Π°ΡΠΈΡ ΡΡΠΎ Ρ Π½ΠΈΡ Π΅ΡΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ), ΡΠ°ΠΊ ΠΈ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π’ΠΎ ΡΡΠΎ ΠΌΡ Π½Π°Π±Π»ΡΠ΄Π°Π΅ΠΌ — ΡΡΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΡΠΎΠΊΡ Ρ ΡΠΈΠΌΠ²ΠΎΠ»Π°ΠΌΠΈ «Π» ΡΠ°Π·Π½ΠΎΠΉ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ:
Π Π Π Π Π Π Π
ΠΡ Π²ΠΈΠ΄ΠΈΠΌ ΡΡΠΎ Π²ΡΠ΅ Π±ΡΠΊΠ²Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π²ΡΡΠ°Π²Π½Π΅Π½Ρ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΉ Π»ΠΈΠ½ΠΈΠΈ. Π’ΠΎΡΠ½Π΅Π΅ ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, Π½ΠΎ ΡΠ΅ΠΉΡΠ°Ρ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ Π²Π»Π°Π·ΠΈΡΡ Π² Π΄Π΅Π±ΡΠΈ. Π’Π°ΠΊ Π²ΠΎΡ, Ρ Π½Π°ΡΠΈΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅.
ΠΠ»Ρ Π²ΡΡΠ°Π²Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΡΠ»ΡΠΆΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ vertical-align . Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ β3 Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ top , ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΡΠ΅Ρ Π²Π΅ΡΡ Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π²Π΅ΡΡ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠΎΠΊΠΈ.
ΠΠΎΠΊΠ° ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ Π΅Π³ΠΎ ΠΊ ΡΡΡΠΎΠΊΠ΅ Ρ ΡΠΈΠΌΠ²ΠΎΠ»Π°ΠΌΠΈ «Π» ΡΠ°Π·Π½ΠΎΠΉ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ:
Π Π Π Π Π Π Π
ΠΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π±ΡΠΊΠ²Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ «ΡΠΊΠ°ΡΡΡ». Π― ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» CSS Π³ΡΠ°Π½ΠΈΡΡ border ΡΠ°ΠΌΠΎΠΉ Π²ΡΡΠΎΠΊΠΎΠΉ Π±ΡΠΊΠ²Π΅, ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΡΠΊΠ°ΡΠΊΠΎΠ² Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅Ρ, Π΅ΡΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ΠΉ (ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅) ΠΈ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠΎΡΠΊΠΎΠΉ ΡΠΈΠΌΠ²ΠΎΠ»Π° «Π».
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ vertical-align Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΡΡΠΎΡΠ½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠ½ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅ΠΉ ΠΏΡΠΎ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ: vertical-align .
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΎΡΡΡΡΠΏΠ»Π΅Π½ΠΈΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ.
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±
Π Π°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float . ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈΠΌΠ΅Π΅Ρ Π΄Π²Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ: left ΠΈ right .
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:
Π‘ΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΡ ΠΊΠΎΠ΄Π°:
Π ΠΈΡΡΠ½ΠΎΠΊ 4. Π Π°Π±ΠΎΡerfa.ru
html — ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· div ΠΈΠ»ΠΈ ul
Stack Overflow Π½Π° ΡΡΡΡΠΊΠΎΠΌLoadingβ¦
- 0
- +0
- Π’ΡΡ ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ Π±ΡΡΡΡΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΡΠ°ΠΉΡΠΎΠΌ
- Π‘ΠΏΡΠ°Π²ΠΊΠ° ΠΠΎΠ΄ΡΠΎΠ±Π½ΡΠ΅ ΠΎΡΠ²Π΅ΡΡ Π½Π° Π»ΡΠ±ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ
- ΠΠ΅ΡΠ° ΠΠ±ΡΡΠ΄ΠΈΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΡ ΠΈ ΠΏΠΎΠ»ΠΈΡΠΈΠΊΡ ΡΠ°ΠΉΡΠ°
- Π Π½Π°Ρ Π£Π·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Stack Overflow
- ΠΠΈΠ·Π½Π΅Ρ Π£Π·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΏΠΎΠΈΡΠΊΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈΠ»ΠΈ ΡΠ΅ΠΊΠ»Π°ΠΌΠ΅ Π½Π° ΡΠ°ΠΉΡΠ΅
- ΠΠΎΠΉΡΠΈ Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ
-
ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ
- Stack Overflow Π½Π° ΡΡΡΡΠΊΠΎΠΌ ΡΠΏΡΠ°Π²ΠΊΠ° ΡΠ°Ρ
ru.stackoverflow.com
CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ: 18 Π½ΠΎΡΠ±ΡΡ 2014 ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ: 5 ΡΠ΅Π½ΡΡΠ±ΡΡ 2019CSS ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΠΊΠ΅Ρ html-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΊΠ°ΠΊ Π΄Π΅ΡΠ΅Π²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π£Π½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΊΠΎΡΠ½Π΅Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠΎΠ΄ΡΠ»Ρ CSS-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ Π»ΡΠ±ΠΎΠΉ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΏΠΎΡΡΠ΄ΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° (Ρ.Π΅. ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ ΠΈΠ· Β«ΠΏΠΎΡΠΎΠΊΠ°Β»).
Π CSS2 ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΄Π΅ΡΠ΅Π²Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π½ΠΎΠ»Ρ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΡΡ. ΠΠΎΠ΄ΡΠ»Ρ CSS3 Π΄ΠΎΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΈ ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΡΡ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΡΠ΅Π³ΡΠ»ΠΈΡΡΠ΅ΡΡΡ:
- ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈ ΡΠΈΠΏΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°,
- ΡΡ Π΅ΠΌΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ (Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ, ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅),
- ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² Π΄Π΅ΡΠ΅Π²Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°,
- Π²Π½Π΅ΡΠ½Π΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ.Π΄.).
Π‘Ρ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π CSS Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΡΠ΅ΠΌΡ ΡΡ Π΅ΠΌΠ°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ
ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π±Π»ΠΎΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ (ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ display block, list-item ΠΈΠ»ΠΈ table), ΡΡΡΠΎΡΠ½ΡΠΉ (Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ) ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ (ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ display inline, inline-block ΠΈΠ»ΠΈ inline-table), ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈ Β«Π»ΠΈΠΏΠΊΠΎΠ΅Β» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° ΠΈ ΡΡΡΠΎΠΊΠΈ.
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅
Π ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡΠ΅ΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π±Π»ΠΎΠΊ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΡΠ°Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ float: left ΠΈ Π»Π΅Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ float: right.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π ΠΌΠΎΠ΄Π΅Π»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ Π΅ΠΌΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ position: absolute; ΠΈ position: fixed;.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Β«Π²Π½Π΅ ΠΏΠΎΡΠΎΠΊΠ°Β» ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈΠ»ΠΈ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
1. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°(ΠΎΠ²) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (containing block). Π ΠΎΠ±ΡΠΈΡ ΡΠ»ΠΎΠ²Π°Ρ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ β ΡΡΠΎ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π ΡΠ»ΡΡΠ°Π΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ html ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° body, ΠΊΠΎΡΠΎΡΡΠΉ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π²ΡΠ΅Ρ Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. Π ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ β ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ.
- ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: static; ΠΈΠ»ΠΈ position: relative; ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ ΠΊΡΠ°Π΅ΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΠΈΠ»ΠΈ ΡΡΠΎΠ²Π½Ρ ΡΡΡΠΎΠΊΠΈ.
- Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: fixed; ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
- ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: absolute; ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ position: absolute/relative/fixed ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
β Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΎΠΊ β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠ»ΡΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° padding;
β Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΎΠΊ β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ ΡΡΡΠΎΠΊΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ;
β Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅Ρ, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ. - ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅.
2. ΠΡΠ±ΠΎΡ ΡΡ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π°Π»Π³ΠΎΡΠΈΡΠΌΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
position | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
static | ΠΠ»ΠΎΠΊ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
relative | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. ΠΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π²ΠΎ Π²ΡΠ΅Ρ
ΡΠ»ΡΡΠ°ΡΡ
, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ, Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π»ΡΠ±ΡΡ
ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ². Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΠ°ΠΊΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ ΠΈ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ². ΠΠ»ΠΈΡΠ½ΠΈΠ΅ position: relative; Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: |
absolute | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° (ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ) Π·Π°Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² top, right, bottom ΠΈ left. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ²Π½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π½Π΅ Π²Π»ΠΈΡΡ Π½Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΡΡΠΈΠ½ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΡΡΡΠΏΡ margin Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ ΡΡ Π»ΠΎΠΏΡΠ²Π°ΡΡΡΡ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² Ρ position: absolute;. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΠΌΠΎΠ³ΡΡ ΡΠΊΡΡΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΊΡΡΡΡ), Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ z-index ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΡ Π±Π»ΠΎΠΊΠΎΠ². |
sticky | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. ΠΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π΅ΡΠ»ΠΈ Π½ΠΈ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ ΠΈ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ. Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ². |
fixed | Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Ρ ΠΎΡΠ»ΠΈΡΠΈΠ΅ΠΌ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π’Π°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π ΡΡΠΎΠΌ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΡ
ΠΎΠΆΠΈ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΈ ΠΏΠ΅ΡΠ°ΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π½ΠΈΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»ΠΎΠΊΠΈ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ±ΡΠ΅Π·Π°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
position: static;
position: relative;
position: absolute;
position: sticky;
position: fixed;
position: initial;
position: inherit;
Π ΠΈΡ. 1. Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ°ΡΠΈΡΠ½ΡΠΌ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ3. Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ°: ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom, left
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ static. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠ΅ΡΡΡΡΠΌΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ:
top | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
top: 10px;
top: 2em;
top: 50%;
top: auto;
top: inherit;
top: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ top Π·Π°Π΄Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (Ρ ΡΡΠ΅ΡΠΎΠΌ Π΅Π³ΠΎ margin) ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½ΠΈΠΆΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (ΡΠΎ Π΅ΡΡΡ Π±Π»ΠΎΠΊΡ Π·Π°Π΄Π°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡ ΡΡΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΡΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ).
right | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
right: -10px;
right: .5em;
right: -10%;
right: auto;
right: inherit;
right: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ right ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (Ρ ΡΡΠ΅ΡΠΎΠΌ Π΅Π³ΠΎ margin) ΡΠΌΠ΅ΡΠ΅Π½ Π²Π»Π΅Π²ΠΎ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
bottom | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
bottom: 50px;
bottom: -3em;
bottom: -50%;
bottom: auto;
bottom: inherit;
bottom: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ bottom ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π±Π»ΠΎΠΊΠ° ΡΠΌΠ΅ΡΠ΅Π½ Π²Π²Π΅ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
left | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
left: 50px;
left: 10em;
left: 20%;
left: auto;
left: inherit;
left: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ left ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ ΡΠΌΠ΅ΡΠ΅Π½ Π²ΠΏΡΠ°Π²ΠΎ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, Π° ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ β Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ.
4. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±Π»ΠΎΠΊΠ°ΠΌ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ Π½Π° ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅. Β«ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊΒ» ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π½Π΅ ΠΊΠΎΡΠ½Π΅ΡΡΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠ»ΠΈ ΠΈΠΌΠ΅Π΅ΡΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π±Π»ΠΎΠΊ, Π²Π½Π΅ΡΠ½ΡΡ Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΡΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ. Π’Π΅ΠΌ ΡΠ°ΠΌΡΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ· Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ ΡΠΌΠ΅ΡΡΠΈΡΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄ΡΡ Π΅Π³ΠΎ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ, Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ ΡΡΡΠΎΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²ΠΏΡΠ°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ, ΠΎΡΠ²ΠΎΠ±ΠΎΠΆΠ΄Π°Ρ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Ρ Π΅Π³ΠΎ.
ΠΡΠ°Π²ΠΈΠ»Π°, ΡΠ΅Π³ΡΠ»ΠΈΡΡΡΡΠΈΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Π±ΠΎΠΊΠΎΠ², ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ float.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
float | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
none | ΠΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
left | ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. |
right | ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΏΡΠ°Π²ΠΎ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
float: left;
float: right;
float: none;
float: inherit;
ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ ΡΡΠ΅ΡΠΎΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΈ ΡΠ°ΠΌΠΎΠΊ. ΠΠ΅ΡΡ Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ margin ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ ΡΡ Π»ΠΎΠΏΡΠ²Π°ΡΡΡΡ.
ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ margin, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌΠΎΠ΅ (ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅) Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° display Π½Π° display: block Π΄Π»Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: inline, inline-block, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ inline-table ΠΌΠ΅Π½ΡΠ΅Ρ Π½Π° table.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ display: flex ΠΈ display: inline-flex. ΠΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
Π ΠΈΡ. 3. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²5. Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΡΡΠ΄ΠΎΠΌ Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ clear
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ clear ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΡΠΎΡΠΎΠ½Ρ Π±Π»ΠΎΠΊΠ°/Π±Π»ΠΎΠΊΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ»Π΅Π³Π°ΡΡ ΠΊ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. Π CSS2 ΠΈ CSS 2.1 ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ Π½Π΅ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
clear | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
none | ΠΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
left | Π‘ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. |
right | Π‘ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΡΠ°Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. |
both | Π‘ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
clear: none;
clear: left;
clear: right;
clear: both;
clear: inherit;
ΠΠ»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΈΠ»ΠΈ Π³ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ {overflow: hidden;}.
6. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
Π CSS ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΡΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ . Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π±Π»ΠΎΠΊΠΈ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z Π΄ΡΡΠ³ Π½Π°Π΄ Π΄ΡΡΠ³ΠΎΠΌ. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π±Π»ΠΎΠΊΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
Π ΠΈΡ. 1. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ ZΠΠΎΡΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΄Π΅ΡΠ΅Π²ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅, ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° ΠΎΡΠΈ Z ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ»ΠΎΠΊΠΈ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ, Π° Π±Π»ΠΎΠΊΠΈ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ½ΠΈΠ·Ρ Π²Π²Π΅ΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠ»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΡ ΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ, ΡΡΠΎ ΠΈ Π±Π»ΠΎΠΊ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π΅ΠΌΡ Π½Π΅ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ z-index.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΏΠΎΡΠΎΠ± Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
z-index | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π² 0. ΠΡΠ»ΠΈ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° Π·Π°Π΄Π°Π½ΠΎ position: fixed; ΠΈΠ»ΠΈ ΡΡΠΎ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. Π’Π°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΈΡΠ»Π°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π³Π»ΡΠ±Ρ ΡΠΊΡΠ°Π½Π°. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
z-index: auto;
z-index: 0;
z-index: 5;
z-index: 999;
z-index: -1;
z-index: inherit;
z-index: initial;
html5book.ru
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π½Π° HTML+CSS Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ | ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ
ΠΠΎΠ±ΡΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΡΡΠΎΠΊ, Π΄ΠΎΡΠΎΠ³ΠΈΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΡΠ΅ΠΌΡ Β«ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ HTML ΠΈ CSSΒ». ΠΠ΅Π½Ρ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ° ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠ½Π΅ΠΌ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΡΠ°ΠΌΡΠ΅ Π²Π°ΠΆΠ½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, Π΅Π³ΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½Π°Π·ΡΠ²Π°ΡΡ Π³Π»Π°Π²Π½ΡΠΌ ΠΌΠ΅Π½Ρ. ΠΠ°Π½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΠ΄ΡΡ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ. Π’ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ ΠΈ ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Ρ Π·Π°Π΄Π°Π΄ΠΈΡΠ΅ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡ, ΠΈΡ ΠΎΠ±ΡΠ΅Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅ ΠΎΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π½Π° seo-ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅.
HTML-ΠΊΠΎΠ΄ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
ΠΠΎΠ³Π΄Π°-ΡΠΎ Π΄Π°Π²Π½ΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π΄Π΅Π»Π°Π»ΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°Ρ , ΡΠ°Π±Π»ΠΈΡΠ°Ρ , ΡΠ»ΡΡΠ΅ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π½Π° ΡΠ΅ΠΌ-ΡΠΎ Π΅ΡΠ΅, Π½ΠΎ Π² Π½Π°ΡΠ΅ Π²ΡΠ΅ΠΌΡ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ°ΠΌΡΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΠΈ ΠΎΠ½ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π³ΠΈ Β«ΡΠΏΠΈΡΠΊΠ°Β».
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ΅Π³ΠΈ <ul>, <li> ΠΈ <a>.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΡΠΈ html-ΡΠ΅Π³ΠΈ, css, ΡΠ°Π±Π»ΠΈΡΡ, ΡΠΎ ΠΏΠΎΡΠΈΡΠ°ΠΉΡΠ΅ ΠΎΠ± ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ html ΡΠ΅Π³ΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅:
<ul> <li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="#">Π£ΡΠ»ΡΠ³ΠΈ</a></li> <li><a href="#">Π¦Π΅Π½Ρ</a></li> <li><a href="#">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></li> </ul>
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ CSS ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
ul { list-style: none; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ°*/ margin: 0; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ*/ padding-left: 0; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ*/ } a { text-decoration: none; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΡΡΡΠ»ΠΎΠΊ*/ } li { float:left; /*Π Π°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠ΅Π½Ρ*/ Β margin-right:5px; /*ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΡΡΡΡΠΏ Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ*/ }
ΠΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ Π²Π΅ΡΡ Π½Π΅Π΅ ΠΌΠ΅Π½Ρ Π² ΡΠ°ΠΏΠΊΡ, Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΠΎΡΠΎΠ±ΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ Π½Π°Π²ΠΎΡΠΎΡΠΎΠ² ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°ΡΡ ΠΊΠ°ΡΠΊΠ°ΡΠΎΠΌ Π²Π°ΡΠ΅Π³ΠΎ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠΎΠΏΠΈΡΡΠ΅ΡΠ΅ ΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΡΠ΅ Ρ ΡΠ΅Π±Ρ Π΄Π°Π½Π½ΡΠΉ html ΠΈ css ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΡΠΈΠΌΠ΅Ρ ΠΊΠ°ΡΠΊΠ°ΡΠ° (ΡΠ°Π±Π»ΠΎΠ½Π°) Π²Π°ΡΠ΅Π³ΠΎ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
ΠΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ Π²ΡΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ΅Π½ΡΠΊΠΎ, Π²Ρ ,ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠ°Π·Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, Π½ΠΎ Π±Π΅Π· ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΎΡΠ½ΠΎΠ² Ρ Π²Π°Ρ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Ρ ΠΎΡΠΎΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π±Π΅Π· ΠΎΡΠΈΠ±ΠΎΠΊ Π² html ΠΈ css.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ°ΠΊ ΠΆΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΡΡΠ³ΠΈΡ CSS ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ΅Π½Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΠΌΠΈΠΌΠΎ float:left;, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, display:inline-block; ΠΈΠ»ΠΈ display:flex;, Π½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΠΎΡΠΎΠ± ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π²ΡΡΠ΅.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΆΠ΅ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠΌ Π½Π°Ρ ΡΠ°Π±Π»ΠΎΠ½Β ΠΌΠ΅Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ ΠΈ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ.
ΠΡΠΈΠΌΠ΅ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π‘Π΅ΠΉΡΠ°Ρ Ρ ΠΏΡΠΈΠ²Π΅Π΄Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³ΠΎΡΠΎΠ²ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Ρ Π³ΠΎΡΠΎΠ²ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ.
ΠΡΠ΅ Β«ΠΊΡΠ°ΡΠΈΠ²ΠΎΡΡΠΈΒ» Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΡΠ°ΠΌΠΈ, Π° Π½Π΅ ΠΈΡΠΊΠ°ΡΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. ΠΡΠΎΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π·ΡΠ² Π·Π° ΠΎΡΠ½ΠΎΠ²Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π½ΠΈΠΆΠ΅
ΠΡΠΎΡΡΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠΈΠ½Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ° Ρ ΡΠ°Π·Π΄Π΅Π»ΡΠ½ΡΠΌΠΈ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ
CSS ΡΡΠΈΠ»ΠΈ Β«Π²Π΅ΡΡ Π½Π΅Π³ΠΎΒ» ΠΌΠ΅Π½Ρ
ΠΠΈΠΆΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΡΡΠΈΠ»ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. HTML ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠ΅ΠΌ ΠΆΠ΅, ΡΡΠΎ ΠΈ Π² Β«ΠΊΠ°ΡΠΊΠ°ΡΠ΅Β» ΠΌΠ΅Π½Ρ.
ul { list-style: none; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ°*/ margin: 0; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ*/ padding-left: 0; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ*/ margin-top:25px; /*Π΄Π΅Π»Π°Π΅ΠΌ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ*/ } a { text-decoration: none; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΡΡΡΠ»ΠΎΠΊ*/ background:#30A8E6; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΠ½ ΠΊ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ*/ color:#fff; /*ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΡΡΡΠ»ΠΎΠΊ*/ padding:10px; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΡΡΡΡΠΏ*/ font-family: arial; /*ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΡΠΈΡΡ*/ border-radius:4px; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅*/ -moz-transition: all 0.3s 0.01s ease; /*Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#1C85BB;/*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/ } li { float:left; /*Π Π°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠ΅Π½Ρ*/ margin-right:5px; /*ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΡΡΡΡΠΏ Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ*/ }
ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Π½Π° ΡΠ²Π΅ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Ρ ΠΊΡΠ°ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ
CSS ΡΡΠΈΠ»ΠΈ ΠΌΠ΅Π½Ρ Π½Π° ΡΠ²Π΅ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ
ul { list-style: none; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ°*/ margin: 0; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ*/ padding-left: 0; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ*/ margin-top:25px; /*Π΄Π΅Π»Π°Π΅ΠΌ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ*/ background:#FF4444; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΠ½ Π²ΡΠ΅ΠΌΡ ΠΌΠ΅Π½Ρ (Π·Π°ΠΌΠ΅Π½ΠΈΠ² ΡΡΠΎΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ, Π²Ρ ΠΏΠΎΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ²Π΅Ρ Π²ΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ)*/ height: 50px; /*Π·Π°Π΄Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ*/ } a { text-decoration: none; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΡΡΡΠ»ΠΎΠΊ*/ background:#FF4444; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΠ½ ΠΊ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ (Π·Π°ΠΌΠ΅Π½ΠΈΠ² ΡΡΠΎΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ, Π²Ρ ΠΏΠΎΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ²Π΅Ρ Π²ΡΠ΅Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ)*/ color:#fff; /*ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΡΡΡΠ»ΠΎΠΊ*/ padding:0px 15px; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΡΡΡΡΠΏ*/ font-family: arial; /*ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΡΠΈΡΡ*/ line-height:50px; /*ΡΠΎΠ²Π½ΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ*/ display: block; border-right: 1px solid #F36262; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π±ΠΎΡΠ΄ΡΡ ΡΠΏΡΠ°Π²Π°*/ -moz-transition: all 0.3s 0.01s ease; /*Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#D43737;/*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/ } li { float:left; /*Π Π°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠ΅Π½Ρ*/ }
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° HTML+CSS
ΠΠ»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ (ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ) ΠΌΠ΅Π½Ρ Π½Π° ΡΠ°ΠΉΡΠ΅ Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅ΡΠ΅Π½ΡΒ ΠΏΡΠ½ΠΊΡΠΎΠ² Π² HTML-ΠΊΠΎΠ΄ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΡΡΠ»ΠΊΠΈ ΠΈΠ· Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»ΠΈ CSS. Π ΡΡΠΈΠ»ΡΡ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠΊ β ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡΒ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Π½ΡΠΆΠ½ΡΠΉ Π½Π°ΠΌ ΠΏΡΠ½ΠΊΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ ΠΏΡΠ½ΠΊΡ Β«ΡΡΠ»ΡΠ³ΠΈΒ».
ΠΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
HTML ΠΊΠΎΠ΄ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
<ul> <li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="#">Π£ΡΠ»ΡΠ³ΠΈ</a> <ul> <li><a href="#">Π£ΡΠ»ΡΠ³Π° 1</a></li> <li><a href="#">ΠΠ»ΠΈΠ½Π½Π°Ρ ΡΡΠ»ΡΠ³Π° 2</a></li> <li><a href="#">Π£ΡΠ»ΡΠ³Π° 3</a></li> </ul> </li> <li><a href="#">Π¦Π΅Π½Ρ</a></li> <li><a href="#">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></li> </ul>
Π‘ΡΠΈΠ»ΠΈ CSS Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
ul { list-style: none; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ°*/ margin: 0; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ*/ padding-left: 0; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ*/ margin-top:25px; /*Π΄Π΅Π»Π°Π΅ΠΌ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ*/ background:#819A32; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΠ½ Π²ΡΠ΅ΠΌΡ ΠΌΠ΅Π½Ρ*/ height: 50px; /*Π·Π°Π΄Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ*/ } a { text-decoration: none; /*ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΡΡΡΠ»ΠΎΠΊ*/ background:#819A32; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΠ½ ΠΊ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ*/ color:#fff; /*ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΡΡΡΠ»ΠΎΠΊ*/ padding:0px 15px; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΡΡΡΡΠΏ*/ font-family: arial; /*ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΡΠΈΡΡ*/ line-height:50px; /*ΡΠΎΠ²Π½ΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ*/ display: block; border-right: 1px solid #677B27; /*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π±ΠΎΡΠ΄ΡΡ ΡΠΏΡΠ°Π²Π°*/ -moz-transition: all 0.3s 0.01s ease; /*Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#D43737;/*Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/ } li { float:left; /*Π Π°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠ΅Π½Ρ*/ position:relative; /*Π·Π°Π΄Π°Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ*/ } /*Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠΊΡΡΡΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ*/ li > ul { position:absolute; top:25px; display:none; } /*ΠΠ΅Π»Π°Π΅ΠΌ ΡΠΊΡΡΡΡΡ ΡΠ°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ*/ li:hover > ul { display:block; width:250px; /*ΠΠ°Π΄Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ*/ } li:hover > ul > li { float:none; /*Π£Π±ΠΈΡΠ°Π΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅*/ }
Π ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΡΠ»ΡΠ³ΠΈ ΠΈ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠΌ: ΡΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΡΡΠΊΡΡΡΡ ΠΈ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ΄ΡΠ°.
Π― ΠΏΠΎΡΡΠ°ΡΠ°Π»ΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΊΡΠ°ΡΠΊΠΎ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ ΠΎ ΡΠΎΠΌ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π»Π°Π²Π½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ², ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ Π½Π΅ΠΌΡ ΠΏΡΠΎΡΡΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½Π΅Π΅, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° Ρ ΡΠΎΠ±ΡΠ°Π» Π²ΡΠ΅ ΠΌΠ΅Π½Ρ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅, Π² ΠΎΠ΄Π½ΠΎΠΌ html-ΡΠ°ΠΉΠ»Π΅, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ Π½ΠΈΠΆΠ΅. ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠΎ ΠΊΠ°ΠΊ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅:Β
ΠΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ ΠΈ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΡΡΠ°Π·Ρ ΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.
nz4.ru