ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΡΠ½ΠΎΠ²Ρ bootstrap 3 Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ . Π£ΡΠΎΠΊ β10
ΠΠ»Π°Π²Π½Π°Ρ Β» ΠΡΠ½ΠΎΠ²Ρ Bootstrap 3 Β» ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΡΠ½ΠΎΠ²Ρ bootstrap 3 Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ . Π£ΡΠΎΠΊ β10
05.08.2016
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ!
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ ΠΈΠ·ΡΡΠ°ΡΡ ΠΎΡΠ½ΠΎΠ²Ρ Β«bootstrap3Β».
Π ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½Π΅ΠΌ ΡΡΠΎΠΊΠ΅ Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΡΡΠΎΠΊΠ°Ρ
Π²Ρ Π½Π°ΡΡΠΈΠ»ΠΈΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΏΠΈΡΠΊΠΈ ΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ. ΠΠΎ ΡΡΡΠΈ, ΡΠΏΠΈΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΌΠ΅Π½Ρ, Π½ΠΎ Π² bootstrap Π΅ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ΅Π½Ρ.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΈΠΌ ΠΊΠ»Π°ΡΡΠ°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΡΡΡΠΎ, ΠΊΡΠ°ΡΠΈΠ²ΠΎ, Π° Π³Π»Π°Π²Π½ΠΎΠ΅, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΈ Π²Ρ Π² ΡΡΠΎΠΌ ΡΠ΅ΠΉΡΠ°Ρ ΡΠ°ΠΌΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ.
ΠΠΎΡ ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΌΠ΅Π½Ρ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ :
β¦Π° Π²ΠΎΡ ΡΠ°ΠΊ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΡΡΡΡΡΡ ΠΈ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ΅Π½Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ:
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΡΠΏΡΠ°Π²Π° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΠ΅Π½Ρ, ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ:
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΠΌ ΠΊΠΎΠ΄, Π° ΠΏΠΎΡΠΎΠΌ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΠΊΠ»Π°ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ.
<nav role="navigation"> <div> <!-- ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π³ΡΡΠΏΠΏΠΈΡΡΡΡΡΡ Π΄Π»Ρ Π»ΡΡΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΡΡΠΆΠ΅Π½ΠΈΠΈ --> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span><!--ΠΠΎΠ»ΠΎΡΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅--> <span></span><!--ΠΠΎΠ»ΠΎΡΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅--> <span></span><!--ΠΠΎΠ»ΠΎΡΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅--> </button> <a href="#">Brand</a> </div> <!-- ΠΡΡΠΏΠΏΠΈΡΡΠ΅ΠΌ ΡΡΡΠ»ΠΊΠΈ, ΡΠΎΡΠΌΡ, Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΡΠΎΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ --> <div> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown 1<b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> <ul> <li><a href="#">Link 3</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown 2<b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.![]()
navbar-collapse --> </div><!-- /.container-fluid --> </nav>
Π‘Π΅ΠΉΡΠ°Ρ ΠΌΠ΅Π½Ρ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ Β«container-fluidΒ» (ΡΡΡΠΎΠΊΠ° β2):
<div>
ΠΡΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΠΊΠ»Π°ΡΡΠ° Β«container-fluidΒ» ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΊΠ»Π°ΡΡ Β«containerΒ», ΡΠΎΠ³Π΄Π° ΠΌΠ΅Π½Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, Π° ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΊΠ»Π°ΡΡΠ° Β«containerΒ». Π ΠΊΠ»Π°ΡΡΠ΅ Β«containerΒ» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΡΡ.
Π Π²ΠΎΡ ΡΡΠ° ΡΠ°ΡΡΡ ΠΊΠΎΠ΄Π° ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ (ΡΡΡΠΎΠΊΠ° β11). Π‘ΡΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅Π»ΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°, Π»ΠΎΠ³ΠΎΡΠΈΠΏ. Π’Π°ΠΊΠΆΠ΅ Π² ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΊΠΎΠ΄Π° Π΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ (ΡΡΡΠΎΠΊΠΈ β5 — β10):
<div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span><!--ΠΠΎΠ»ΠΎΡΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅--> <span></span><!--ΠΠΎΠ»ΠΎΡΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅--> <span></span><!--ΠΠΎΠ»ΠΎΡΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅--> </button> <a href="#">Brand</a> </div>
ΠΠ°Π»ΡΡΠ΅ ΠΈΠ΄Π΅Ρ ΡΠΏΠΈΡΠΎΠΊ ΠΌΠ΅Π½Ρ.
<div> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown 1<b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> <ul> <li><a href="#">Link 3</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown 2<b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse -->
Π₯ΠΎΡΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΡΡΠΎΠΊΡ β5:
<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
ΠΈ ΡΡΡΠΎΠΊΡ β15:
<div>
ΠΡΠ»ΠΈ id ΡΡΠΈΡ Π΄Π²ΡΡ ΡΡΡΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ, ΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡΡ . ΠΠ°Β ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΡΠΎ Β«bs-example-navbar-collapse-1Β».
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΠΌΠΎ ΠΌΠ΅Π½Ρ Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ:
<ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul>
Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΡΡΠ»ΠΊΠ° ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½Π° ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ β ΠΎΠ±ΡΡΡΠ½ΡΡΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΠΎ, Π΅ΡΠ»ΠΈ ΠΊΡΠΎ Π½Π΅ Π·Π½Π°Π΅Ρ, Π²Π°ΠΌ ΡΡΠ΄Π°.
Π‘ΡΡΠΎΠΊΠ° β 17 β Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ Β«activeΒ»:
<li><a href="#">Link</a></li>
Π‘ΡΡΠΎΠΊΠ° β21 β ΡΡΠΎΠ±Ρ ΡΠΏΠΈΡΠΎΠΊ Π²ΡΠΏΠ°Π΄Π°Π» Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ, Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ul Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡΒ Β«dropdown-menuΒ»:
<li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a><!--ΠΠ°ΡΠ΅ΡΠΊΠ°--> <ul><!--ΠΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡ--> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li><!--Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π»ΠΈΠ½ΠΈΡ--> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One more separated link</a></li> </ul> </li>
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ ΡΠ²Π΅ΡΡ Ρ, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ Β«navbar-fixed-topΒ» (Π‘ΡΡΠΎΠΊΠ° β1):
<nav role="navigation">
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ ΡΠ½ΠΈΠ·Ρ, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ Β«navbar-fixed-bottomΒ» (Π‘ΡΡΠΎΠΊΠ° β1):
<nav role="navigation">
Π€ΡΡ , Π²ΡΠΎΠ΄Π΅ Π²ΡΠ΅!
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ΄Π΅Π»ΡΡΡ Ρ Π²Π°ΠΌΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΊΠΎΠ΄Π°ΠΌΠΈ Π³ΠΎΡΠΎΠ²ΡΡ
ΠΌΠ΅Π½ΡΡΠ΅ΠΊ.
Π£Π΄Π°ΡΠΈ, ΠΆΠ΄Ρ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΡΠΎΠΊΠ°Ρ .
Π ΡΠ΅ΠΏΠ΅ΡΡ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΌΠ΅Π½Ρ Π½Π° Bootstrap3:
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ΅Π½Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ Π»ΠΈΠ±ΠΎ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅Π³Π΄Π° Π½Π° Π²ΠΈΠ΄Ρ ΠΈ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ Β«navbar-fixed-topΒ» Π΄Π»Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ ΡΠ²Π΅ΡΡ
Ρ ΠΈΠ»ΠΈ Β«navbar-fixed-bottomΒ» Π΄Π»Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ ΡΠ½ΠΈΠ·Ρ ΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΊΠ»Π°ΡΡΠ°ΠΌ ΠΌΠ΅Π½Ρ Β«navbarΒ» ΠΈ Β«navbar-defaultΒ».
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ ΠΊ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠ»Π°ΡΡ Β«navbar-fixed-topΒ»
<nav role="navigation"> <div> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-target="#navbarCollapse" data-toggle="collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">ΠΡΠ΅Π½Π΄</a> </div> <!-- Collection of nav links and other content for toggling --> <div> <ul> <li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="#">Π‘ΡΠ°ΡΡΠΈ</a></li> <li><a href="#">ΠΠΎΠ²ΠΎΡΡΠΈ</a></li> </ul> <ul> <li><a href="#">ΠΠΎΠΉΡΠΈ</a></li> </ul> </div> </div> </nav>
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠ»Π°ΡΡ Β«navbar-fixed-bottomΒ»
<nav role="navigation"> <div> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-target="#navbarCollapse" data-toggle="collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">ΠΡΠ΅Π½Π΄</a> </div> <!-- Collection of nav links and other content for toggling --> <div> <ul> <li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="#">Π‘ΡΠ°ΡΡΠΈ</a></li> <li><a href="#">ΠΠΎΠ²ΠΎΡΡΠΈ</a></li> </ul> <ul> <li><a href="#">ΠΠΎΠΉΡΠΈ</a></li> </ul> </div> </div> </nav>
ΠΠ΅ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ±ΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
<nav role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-target="#navbarCollapse" data-toggle="collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">ΠΡΠ΅Π½Π΄</a> </div> <!-- Collection of nav links, forms, and other content for toggling --> <div> <ul> <li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="#">Π‘ΡΠ°ΡΡΠΈ</a></li> <li><a href="#">ΠΠΎΠ²ΠΎΡΡΠΈ</a></li> </ul> <ul> <li><a href="#">ΠΠΎΠΉΡΠΈ</a></li> </ul> </div> </nav>
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ
<nav role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-target="#navbarCollapse" data-toggle="collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">ΠΡΠ΅Π½Π΄</a> </div> <!-- Collection of nav links and other content for toggling --> <div> <ul> <li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="#">Π‘ΡΠ°ΡΡΠΈ</a></li> <li><a href="#">ΠΠΎΠ²ΠΎΡΡΠΈ</a></li> </ul> <ul> <li><a href="#">ΠΠΎΠΉΡΠΈ</a></li> </ul> </div> </nav>
ΠΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΠΌΠ΅Π½Ρ?
Π ΡΡΡΠΎΠΊΡ β1 ΠΊ ΠΊΠ»Π°ΡΡΡ Β«navbarΒ» Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΡΠ±ΠΎΠΉ ΠΏΡΠΈΠ΄ΡΠΌΠ°Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Β«redΒ»:
<nav role="navigation">
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³Π°ΠΌΠΈ <head></head> Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠ΄ CSS:
<style> .red { background: #cc0000;} li.active a { background-color: #5a0202 !important;} ul.nav.navbar-nav a {color: #fff !important;} </style>
ΠΡΠΎ Π½Π΅ Π·Π½Π°Π΅Ρ CSS, Π²Π°ΠΌ ΡΡΠ΄Π°.
ΠΡΠΎ Π²ΡΠ΅! Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ ΠΈΠ·ΡΡΠ°ΡΡ ΠΎΡΠ½ΠΎΠ²Ρ Bootstrap 3.
ΠΠ΅Π½Ρ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΌΠ΅Π½Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅. ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΡΠΈΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Ρ Π½ΠΈΠ·ΠΊΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΈΡ . ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ 100% ΡΠΈΡΠΈΠ½Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ: inline-block.
<style> .custom-restricted-width { /* To limit the menu width to the content of the menu: */ display: inline-block; /* Or set the width explicitly: */ /* width: 10em; */ } </style> <div> <span>Yahoo Sites</span> <ul> <li> <a href="#">Flickr</a> </li> <li> <a href="#">Messenger</a> </li> <li> <a href="#">Sports</a> </li> <li> <a href="#">Finance</a> </li> <li>More Sites</li> <li> <a href="#">Games</a> </li> <li> <a href="#">News</a> </li> <li> <a href="#">OMG!</a> </li> </ul> </div>
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ pure-menu-horizontal
ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ°.
<div> <a href="#">BRAND</a> <ul> <li> <a href="#">News</a> </li> <li> <a href="#">Sports</a> </li> <li> <a href="#">Finance</a> </li> </ul> </div>
ΠΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΡΠΌΠ΅ΡΡΡΠ΅ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°, Π΄ΠΎΠ±Π°Π²ΠΈΠ² pure-menu-selected
ΠΊΠ»Π°ΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ°. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΠΈΡΡ ΡΡΡΠ»ΠΊΡ ΠΊΠ°ΠΊ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° pure-menu-disabled
Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°. ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π±Π»Π΅ΠΊΠ»ΡΠΌΠΈ ΠΈ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΡΡ ΡΡΠΈΠ»ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
<div> <ul> <li> <a href="#">Selected</a> </li> <li> <a href="#">Normal</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div>
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ
ΠΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΠ΅ΡΠ΅Π· JavaScript, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ, ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠ΅Π½Π°ΡΠΈΡ, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π½Π° Π²Π°Π½ΠΈΠ»ΡΠ½ΠΎΠΌ JS, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ARIA, ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΡ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°ΠΊΡΡΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ ΠΈΠ»ΠΈ ΠΊΠ»Π°Π²ΠΈΡΠΈ ESC. ΠΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΉΡΠΈ Π΄Π°Π»ΡΡΠ΅, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅ ΠΊΡΠ°Π΅Π², ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΡ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
ΠΠ°ΠΆΠ΅ Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ JavaScript Π²Ρ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. ΠΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ pure-menu-allow-hover
Π² pure-menu-has-children
ΡΠΏΠΈΡΠΎΠΊ ΠΏΡΠ½ΠΊΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΄ΠΎΠ±Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π·Π°ΠΏΠ°ΡΠ½ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π±Π΅Π· JavaScript.
<div> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Contact</a> <ul> <li> <a href="#">Email</a> </li> <li> <a href="#">Twitter</a> </li> <li> <a href="#">Tumblr Blog</a> </li> </ul> </li> </ul> </div>
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ
Π’Π° ΠΆΠ΅ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΡ
ΡΡ ΡΠΏΠΈΡΠΊΠΎΠ², ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ
ΠΌΠ΅Π½Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ, Π½ΠΎ ΠΈΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
.
<div> <ul> <li> <a href="#">Flickr</a> </li> <li> <a href="#">Messenger</a> </li> <li> <a href="#">Sports</a> </li> <li> <a href="#">Finance</a> </li> <li> <a href="#">More</a> <ul> <li> <a href="#">Autos</a> </li> <li> <a href="#">Flickr</a> </li> <li> <a href="#">Even More</a> <ul> <li> <a href="#">Foo</a> </li> <li> <a href="#">Bar</a> </li> <li> <a href="#">Baz</a> </li> </ul> </li> </ul> </li> </ul> </div>
ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ pure-menu-scrollable
ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ°. ΠΠΎΠ³Π΄Π° ΠΌΠ΅ΡΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ»ΠΈΡΡΡΠ²Π°ΡΡ. ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ. ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΈΠΌΠΏΡΠ»ΡΡΠ°, ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ JS, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ scrollbooster, Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ².
<div> <a href="#">Yahoo</a> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Flickr</a> </li> <li> <a href="#">Messenger</a> </li> <li> <a href="#">Sports</a> </li> <li> <a href="#">Finance</a> </li> <li> <a href="#">Autos</a> </li> <li> <a href="#">Beauty</a> </li> <li> <a href="#">Movies</a> </li> <li> <a href="#">Small Business</a> </li> <li> <a href="#">Cricket</a> </li> <li> <a href="#">Tech</a> </li> <li> <a href="#">World</a> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Support</a> </li> </ul> </div>
ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΎΠ³ΡΠ°Π½ΠΈΡΡΡΠ΅ Π²ΡΡΠΎΡΡ ΠΌΠ΅Π½Ρ, Π° Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ pure-menu-scrollable
ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ°. ΠΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ»ΠΈΡΡΡΠ²Π°ΡΡ. ΠΠΎΠ΄ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ.
<style> /* Customization to limit height of the menu */ .custom-restricted { height: 160px; width: 150px; border: 1px solid gray; border-radius: 4px; } </style> <div> <a href="#">Yahoo</a> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Flickr</a> </li> <li> <a href="#">Messenger</a> </li> <li> <a href="#">Sports</a> </li> <li> <a href="#">Finance</a> </li> <li> <a href="#">Autos</a> </li> <li> <a href="#">Beauty</a> </li> <li> <a href="#">Movies</a> </li> <li> <a href="#">Small Business</a> </li> <li> <a href="#">Cricket</a> </li> <li> <a href="#">Tech</a> </li> <li> <a href="#">World</a> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Support</a> </li> </ul> </div>
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΡΡΠ²Π°ΡΡΡΡ
ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Pure Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Ρ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΌΠ΅Π½Ρ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ:
-
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ Π·Π° Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠΎΠΌ, ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΠΌΠ΅Π½Ρ Π½Π° ΡΡΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Pure.
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ , ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ°Π±ΠΎΡΠ΅ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ .
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ-Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ , ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡΠΊΠ°Π»ΡΠ·ΡΠ²Π°Π΅Ρ ΠΈΠ· ΠΏΠΎΠ»Ρ Π·ΡΠ΅Π½ΠΈΡ.
<ul> <li> <a href="/layouts/side-menu/">Responsive Vertical Menu</a>, which collapses behind a hamburger, similar to the menu on this Pure website. </li> <li> <a href="/layouts/tucked-menu/">Responsive Horizontal-Scrollable Menu</a>, which tucks out of the way on small screens. </li> <li> <a href="/layouts/tucked-menu-vertical/">Responsive Horizontal-to-Vertical Menu</a>, which slides out of view.</li> </ul>
[CSS] — ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ CSS — SheCodes
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° display: inline-block. ΠΠΎΠ΄ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π² ΡΡΠΎΠΌ ΠΏΡΠΎΡΠ΅ΡΡΠ΅.
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 4 ΠΌΠ΅ΡΡΡΠ° Π½Π°Π·Π°Π΄ Π² CSS by Maedeh
ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π² css horizental
ΡΠΏΠΈΡΠΎΠΊ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΠ»Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΏΠΎ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎ CSSπ©βπ» ΠΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΏΠΎ ΠΊΠΎΠ΄Ρ HTML, CSS ΠΈ JavaScript
Π‘ΠΏΡΠΎΡΠΈΠ» 11 ΡΠ°ΡΠΎΠ² Π½Π°Π·Π°Π΄ Π² CSS by Anamarija
ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΠΌΠ°ΠΉΠ»ΠΈΠΊΠΈ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ Π»ΡΡΡΠ΅Π΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΌΠ°ΠΉΠ»ΠΈΠΊΠΈ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 12 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ ΠΠΈΠΊΠΈ
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ
CSS ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°Π±ΠΈΠ²ΠΊΠ° Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 12 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Niki
ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°Π·ΠΌΡΡΡΡ ΡΠ΅Π½Ρ Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
CSS ΠΊΠΎΡΠΎΠ±ΠΊΠ°-ΡΠ΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡ ΡΠ°Π·ΠΌΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 12 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ ΠΠΈΠΊΠΈ
ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°?
ΡΠ²Π΅Ρ ΡΠΎΠ½Π° CSS Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 12 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS Π‘Π°ΡΠ°
ΠΠΎΠ³Π΄Π° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ css?
Π£Π‘ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠ°Π·ΠΎΠ²ΡΠΉ ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠΉ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 13 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS Π‘Π°Π±Π°
ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠΎΠ½Π°?
Π£Π‘ ΡΠΎΠ½ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 13 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Ciara
ΠΊΠ°ΠΊΠΈΠ΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ CSS
ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π±ΡΠ°ΡΡΠ΅Π² ΠΈ ΡΠ΅ΡΡΠ΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² n-ΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 13 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ ΠΡΠ½Π³Π΅Π»ΠΎ
ΡΠΈΠΏ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ Π² css
CSS ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡ flex-Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠ΄ ΡΡΠΎΠ»Π±Π΅Ρ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 13 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Saba
ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠΉ? ΠΎΠ½ Π½Π΅ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΡΠΈΡΠΈΠ½Π΅: 100%
Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 14 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΠΆΠ΅Π½Π½ΠΈΡΠ΅Ρ
ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ
Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΡΠ΅ΠΊΡΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 14 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Jasmine
ΠΊΠ°ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΡΠΎ-ΡΠΎ Π΅ΡΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ?
Π£Π‘ ΠΏΠ°ΡΠΈΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 15 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Charlotte
ΠΠ°ΠΊΠΈΠ΅ Π΅ΡΡΡ Π²Π°ΡΠΈΠ°Π½ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ?
Π£Π‘ ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡ ΠΎΠΏΡΠ°Π²Π΄Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 15 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Confidence
ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΈΡΠΈΠ½Π° Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS ΠΏΡΠΎΡΠ΅Π½Ρ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 16 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Lungelo
css ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ· ΡΡΡΠ»ΠΊΠΈ
CSS ΡΠ²ΡΠ·Ρ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ ΡΡΠΈΠ»Ρ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 16 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΏΠΎ ΠΡΠ½Π³Π΅Π»ΠΎ
Π² css ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΠΏΠΈΡΠΊΠ΅ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ, Π° Π½Π΅ Π΄ΡΡΠ³ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΎΠΌ
CSS ΡΠΏΠΈΡΠΎΠΊ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 17 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Unisha
ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° CSS?
Π£Π‘ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ Π²Π΅ΡΡΠΈΠ½Π° Π»Π΅Π²ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 18 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by OFFA
ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ
ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ CSS ΡΠ΅Ρ Π½ΠΈΠΊΠ° ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 18 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄
Π²
CSS
Π ΠΈΠΊΠΊΠ΅ Π.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ?
Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎ-Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ ΡΠΎΠ½ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΡΡΠ΅ΠΊΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS-ΡΡΠ½ΠΊΡΠΈΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 18 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS Π ΠΈΠΊΠΊΠ΅ Π.
Π³Π΄Π΅ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ?
Π£Π‘ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ ΡΠΌ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 19 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΠΈΡΠ΅Π»Ρ
ΠΠΎΡΠ΅ΠΌΡ ΠΊΠ»Π°ΡΡ Β«Π‘Π΅Π³ΠΎΠ΄Π½ΡΒ» Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠ΄ ΠΊΠ»Π°ΡΡ Β«ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉΒ»? ΠΠ°ΠΊ ΠΌΠ½Π΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ°ΠΊ? .weatherAppBody { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; Π²Π΅ΡΡ Π½Π΅Π΅ ΠΏΠΎΠ»Π΅: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: 100px; ΠΏΠΎΠ»Π΅ ΡΠ»Π΅Π²Π°: 300px; ΠΎΡΡΡΡΠΏ: 80px 100px; } Ρ2 { ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 20px; Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ; ΠΏΠΎΠ»Π΅: 0 Π°Π²ΡΠΎ; ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ; } h3 { Π²Π΅Ρ ΡΡΠΈΡΡΠ°: 100; } .
ΡΠ΅ΠΊΡΡΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ { ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ; Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ; ΠΏΠΎΠ»Π΅: 0 Π°Π²ΡΠΎ; } .localInfo { ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ; ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ; } .ΡΠ΅Π³ΠΎΠ΄Π½Ρ { Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: Π²ΠΏΡΠ°Π²ΠΎ; ΠΏΠΎΠ»Π΅ ΡΠ²Π΅ΡΡ Ρ: 0px; ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 0px; ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ: ΡΠΏΡΠ°Π²Π°; } .Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ { ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ; ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ: ΡΠΏΡΠ°Π²Π°; ΠΏΠΎΠ»Π΅ ΡΠ²Π΅ΡΡ Ρ: 0px; ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 0px; ΡΡΠ½ΠΎ: ΠΎΠ±Π°; } .ΠΠΎΠ»Π½Π°Ρ Π½Π΅Π΄Π΅Π»Ρ { ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 20px; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π½ΠΈΠΆΠ½Π΅Π΅; Π²Π½ΠΈΠ·Ρ: 0px; Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: 0px; }
Π£Π‘ ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡ Π·Π°ΠΊΠ°Π· ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 19 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS Π ΠΈΠΊΠΊΠ΅ Π.
ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ
CSS Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 19 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΠΈΡΠ΅Π»Ρ
ΠΠΎΠ³Π΄Π° Ρ Π·Π°Ρ ΠΎΠΆΡ Π²
ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ?
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 19 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΠΈΡΠ΅Π»Ρ
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ΅ΠΊΡΡ-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΌ?
Π£Π‘ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° ΡΠ΅ΠΊΡΡ-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 20 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS Π‘ΡΠ΅ΠΉΡΠΈ
ΠΊΠ°ΠΊ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ? Π― Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π·Π°Π½ΠΈΠΌΠ°Π» Π²Π΅ΡΡ ΡΠΊΡΠ°Π½.
![]()
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΠΏΠΎΠ²ΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 21 Π΄Π΅Π½Ρ Π½Π°Π·Π°Π΄ Π² CSS Π§Π΅ΡΡΠ΅Ρ
ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
CSS ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΠΈΠ»Ρ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 22 Π΄Π½Ρ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Vennesa
ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ
CSS Π²ΡΡΠΎΡΠ° Π»ΠΈΠ½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΠ°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 22 Π΄Π½Ρ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Vennesa
ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ box-shadow?
Π£Π‘ ΠΊΠΎΡΠΎΠ±ΠΊΠ°-ΡΠ΅Π½Ρ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΡΠ΅ΠΊΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 22 Π΄Π½Ρ Π½Π°Π·Π°Π΄ Π² CSS ΠΠ»ΠΈΠ·Π°Π±Π΅Ρ
ΠΊΠ°ΠΊ ΡΠ±ΡΠ°ΡΡ ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ Ρ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠΈ?
ΡΡΡΠ»ΠΊΠ° ΡΠ²Π΅Ρ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠ° Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π‘Π΅Π»Π΅ΠΊΡΠΎΡ CSS
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 22 Π΄Π½Ρ Π½Π°Π·Π°Π΄ Π² CSS ΠΠ»ΠΈΠ·Π°Π±Π΅Ρ
ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ?
Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ ΡΠ΅ΠΊΡΡ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 23 Π΄Π½Ρ Π½Π°Π·Π°Π΄ Π² CSS ΠΠ»ΠΈΠ·Π°Π±Π΅Ρ
ΠΊΠ°ΠΊ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ?
Π£Π‘ ΡΠ΅Π½ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 23 Π΄Π½Ρ Π½Π°Π·Π°Π΄ Π² CSS ΠΠ»ΠΈΠ·Π°Π±Π΅Ρ
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΌΠ°ΡΠΆΠΈ?
Π£Π‘ ΠΌΠ°ΡΠΆΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 23 Π΄Π½Ρ Π½Π°Π·Π°Π΄ Π² CSS ΠΠ»ΠΈΠ·Π°Π±Π΅Ρ
ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΌΠ°ΡΠΆΠ°
ΠΌΠ°ΡΠΆΠ° ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» HTML Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 25 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Francesca
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Π² ΠΊΠ°ΠΊΠΎΠΌ ΡΠ³Π»Ρ Π² CSS?
Π£Π‘ ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ³Π»Ρ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 25 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by EBONI
ΠΊΠ°ΠΊ ΡΠ±ΡΠ°ΡΡ ΠΏΠΎΠ»Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
CSS Π΄ΠΎΠΏΡΡΠΊ ΠΠ»Π΅ΠΌΠ΅Π½Ρ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 26 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS Π’Π°ΡΡΡΠ½Π°
ΠΊΠ°ΠΊ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎ
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ CSS ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 26 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS Π’Π°ΡΡΡΠ½Π°
ΠΊΠ°ΠΊ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π΄Π²Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎ ΡΡΠΎΡΠΎΠ½Π°ΠΌ
CSS ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 26 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS Π’Π°ΡΡΡΠ½Π°
ΠΊΠ°ΠΊ ΡΠ°ΡΠΊΡΠ°ΡΠΈΡΡ ΡΡΠΈΡΡ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
CSS ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Clarissa
ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ² Π² ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅
CSS ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ² ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Π€ΠΎΠ»Π°ΡΠ°ΠΉΠΎ
ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ Π±ΡΡΠ³Π΅Ρ Π½Π° ΡΡΠ΅Π΄Π½ΠΈΠΉ ΡΠΊΡΠ°Π½
Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π±ΡΡΠ³Π΅Ρ ΠΌΠ΅Π½Ρ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Folasayo
ΠΊΠ°ΠΊ ΡΠΊΡΡΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄Π»Ρ ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΡΠΊΡΠ°Π½Π°?
Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS Π€Π»ΠΎΡΠ΅Π½ΡΠΈΡ
ΠΊΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ css ul
CSS ΡΠ» ΡΠ΅Π½ΡΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Alina
ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ΅ΠΊΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ
CSS ΡΠ΅ΠΊΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Π€ΠΎΠ»Π°ΡΠ°ΠΉΠΎ
ΠΊΠ°ΠΊΡΡ ΡΡΠΈΠ»ΠΈΡΡ CSS Ρ ΠΌΠΎΠ³Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΌΠΎΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ?
Π£Π‘ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠΊΠ°Π»Π°
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Soulinny
ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄ css
ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ MDN
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ ΠΠΈΠ³Π°Π½
ΠΊΠ°ΠΊ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ vw
Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΡΠ΅ΠΊΡΡ ΠΎΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ ΡΠ΅ΡΠΊΠΈ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Meegan
ΠΠ°ΠΊ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΡΠ΅ΠΊΡΡ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠ°
Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡ ΡΡΠΎΠ»Π±Π΅Ρ Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²: ΡΠ΅Π½ΡΡ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 27 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Meegan
ΠΠ°ΠΊ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΡΠΎΠ»Π±ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ 2 ΠΈ 1 ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π°
CSS ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡ ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 28 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS by Trang
ΠΏΠΎΡΠ΅ΠΌΡ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ text-align: center Π² css Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΏΠΎΠ»Ρ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 28 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Trang
ΠΊΠ°ΠΊ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠΏΡΡΠΊ ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡ ΡΡΠΈΠ»Ρ
π©βπ» Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ
Π‘ΠΏΡΠΎΡΠΈΠ» 28 Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² CSS ΠΎΡ Π Π°Π²Π½ΠΈΡ
ΠΌΠΎΠΉ ΠΊΠΎΠ΄ Π½Π΅ ΡΠ°ΠΊΠΎΠΉ ΠΆΠΈΡΠ½ΡΠΉ, ΠΊΠ°ΠΊ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ
CSS Π²Π΅Ρ ΡΡΠΈΡΡΠ° ΡΡΠΈΠ»Ρ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½
ΠΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΏΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ: HTML CSS JavaScript ΠΠΎΠ΄ ΠΠ‘ ΠΏΠΈΡΠΎΠ½ Π Π΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ ΠΠ°ΡΠ°Π»ΡΠ½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΠΎΠΏΡΡΠ½ΡΠΉ Π²Π΅ΡΠ΅Ρ ΠΠΆΠ°Π²Π° PHP Node. js Π ΡΠ±ΠΈΠ½ ΠΠ΄ΡΠΈ .NET
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS?
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΠΏΠΈΡΠΊΠ°. Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ CSS.
Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ Ρ ΠΎΠ±ΡΡΡΠ½Ρ ΠΈ ΠΏΠΎΠΊΠ°ΠΆΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠ°ΡΠ½Π΅ΠΌ.
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ display, flex, float ΠΈ Ρ. Π΄.
Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ Ρ Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ HTML-ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°, ΠΏΠΎΠΊΠ° Ρ Π½Π΅ Π²Π²Π΅Π΄Ρ Π½ΠΎΠ²ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ.
<ΡΠ»>
ΠΠΌΠ΅ΠΉΡΠ΅ ΡΡΠΎ Π² Π²ΠΈΠ΄Ρ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΈΡΠΏΠ»Π΅Ρ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ
ul li { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ; }
Π’ΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠ΅ ΡΡΡΠΎΠΊΠΈ CSS Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ.
ΠΡΡ ΠΎΠ΄
- Π―Π±Π»ΠΎΠΊΠΈ
- ΠΠ°Π½Π°Π½Ρ
- ΠΠΏΠ΅Π»ΡΡΠΈΠ½Ρ
- ΠΠΈΠ½ΠΎΠ³ΡΠ°Π΄
- ΠΠ°Π½Π³ΠΎ
ΠΠΎ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΡ ΠΊΠ°ΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. ΠΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»Ρ, ΠΎΡΡΡΡΠΏΡ ΠΈΠ»ΠΈ ΠΈ ΡΠΎ, ΠΈ Π΄ΡΡΠ³ΠΎΠ΅, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΠΏΠΎΠ»Π΅ Π² 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.
- Π―Π±Π»ΠΎΠΊΠΈ
- ΠΠ°Π½Π°Π½Ρ
- ΠΠΏΠ΅Π»ΡΡΠΈΠ½Ρ
- ΠΠΈΠ½ΠΎΠ³ΡΠ°Π΄
- ΠΠ°Π½Π³ΠΎ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΈΡΠΏΠ»Π΅Ρ: flex
- Π―Π±Π»ΠΎΠΊΠΈ 9 0548
- ΠΠ°Π½Π°Π½Ρ
- ΠΠΏΠ΅Π»ΡΡΠΈΠ½Ρ
- ΠΠΈΠ½ΠΎΠ³ΡΠ°Π΄
- ΠΠ°Π½Π³ΠΎ
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ flexbox. ΠΠ΄Π΅ΡΡ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ display:flex
Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°
. Π‘ΠΌ. ΠΌΠΎΠΉ CSS Π½ΠΈΠΆΠ΅.
ΡΠ» { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ; } ΡΠ»Ρ Π»ΠΈ { ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ; ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 20px; } ΡΠ» Π»ΠΈ: ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ΅Π±Π΅Π½ΠΎΠΊ { ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 0; }
ΠΡ Π²ΠΈΠ΄Π΅Π»ΠΈ Π²ΡΠ²ΠΎΠ΄ Π²ΡΡΠ΅.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS float
- Π―Π±Π»ΠΎΠΊΠΈ
- ΠΠ°Π½Π°Π½Ρ
- ΠΠΏΠ΅Π»ΡΡΠΈΠ½Ρ
- ΠΠΈΠ½ΠΎΠ³ΡΠ°Π΄
- ΠΠ°Π½Π³ΠΎ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» CSS float Π΄Π»Ρ ΡΠ»Π΅Π²Π°. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΈΡΠ°ΡΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ ΠΏΠΎΡΠ»Π΅ ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΡΡΠΈΡΡ Π΅Π³ΠΎ.
Π‘ΠΌ. ΠΌΠΎΠΉ CSS Π½ΠΈΠΆΠ΅.
ΡΠ» Π»ΠΈ { ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ; ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ; ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 20px; } ΡΠ» Π»ΠΈ: ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ΅Π±Π΅Π½ΠΎΠΊ { ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 0; } /* Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ° */ ΡΠ»:: ΠΏΠΎΡΠ»Π΅ { ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅: ""; ΡΡΠ½ΠΎ: ΠΎΠ±Π°; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ°Π±Π»ΠΈΡΠ°; }
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ
ΠΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° ΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Ρ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ
. ΠΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡ ΠΆΠ΅ ΡΠ°ΠΊΡΠΈΠΊΡ ΠΈ Π² ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅
.
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π½ΠΎΠ²ΡΠΉ HTML Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ, ΠΊΠ°ΠΊ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π½ΠΈΠΆΠ΅.
<ΠΎΠ»>
Π‘ΠΌ. Π²ΡΠ²ΠΎΠ΄ (Π±Π΅Π· CSS) Π½ΠΈΠΆΠ΅.
- ΠΡΠΏΠΈΡΡ ΡΠ±Π»ΠΎΠΊΠΈ
- Π‘ΡΠ΅ΡΡΡ Π±Π°Π½Π°Π½
- Π‘Π΄Π΅Π»Π°ΡΡ Π°ΠΏΠ΅Π»ΡΡΠΈΠ½ΠΎΠ²ΡΠΉ ΡΠΎΠΊ
- ΠΡΠΏΠΈΡΡ Π²ΠΈΠ½ΠΎΠ³ΡΠ°Π΄
- ΠΠ°Π»Π΅Π·ΡΡ Π½Π° Π΄Π΅ΡΠ΅Π²ΠΎ ΠΌΠ°Π½Π³ΠΎ
Π§ΡΠΎΠ±Ρ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΈΡ
ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΎΠ². ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΠΌΠ½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ (ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ) ΠΌΠ΅ΡΠΎΠ΄.
ΠΎΠ» Π»ΠΈ { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ; ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 20px; } ΠΎΠ» Π»ΠΈ: ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ΅Π±Π΅Π½ΠΎΠΊ { ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 0; }
Π‘ΠΌ. Π²ΡΠ²ΠΎΠ΄ Π½ΠΈΠΆΠ΅.
- ΠΡΠΏΠΈΡΡ ΡΠ±Π»ΠΎΠΊΠΈ
- Eat Banana
- Π‘Π΄Π΅Π»Π°ΡΡ Π°ΠΏΠ΅Π»ΡΡΠΈΠ½ΠΎΠ²ΡΠΉ ΡΠΎΠΊ
- ΠΡΠΈΠΎΠ±ΡΠ΅ΡΠ°ΡΡ Π²ΠΈΠ½ΠΎΠ³ΡΠ°Π΄
- ΠΠΎΠ»Π΅Π· ΠΌΠ°Π½Π³ΠΎ
. Π§ΠΈΡΠ»Π° (1, 2, 3β¦) ΡΠ°Π·ΠΎΡΠ°ΡΠΎΠ²Π°Π»ΠΈ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ. ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠ΅ Π½ΠΎΠΌΠ΅ΡΠ° ΡΠΏΠΈΡΠΊΠ°, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ±ΡΠΎΡΠΈΡΡ ΡΡΠ΅ΡΡΠΈΠΊ, ΠΊΠ°ΠΊ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π² ΠΌΠΎΠ΅ΠΌ CSS Π½ΠΈΠΆΠ΅.
ΠΎΠ» { ΡΠ±ΡΠΎΡ ΡΡΠ΅ΡΡΠΈΠΊΠ°: ΡΠΏΠΈΡΠΎΠΊ-ΡΡΠ΅ΡΡΠΈΠΊ; } ΠΎΠ» Π»ΠΈ { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ; ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 20px; ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°: 20px; /* ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΡΠ΅Π» */ ΠΏΡΠΈΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ΅ΡΡΠΈΠΊΠ°: ΡΡΠ΅ΡΡΠΈΠΊ-ΡΠΏΠΈΡΠΎΠΊ; /* Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ */ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ; /* Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ */ } ΠΎΠ» Π»ΠΈ: ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ΅Π±Π΅Π½ΠΎΠΊ { ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 0; } ΠΎΠ» Π»ΠΈ: Π΄ΠΎ { ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅: ΡΡΠ΅ΡΡΠΈΠΊ(ΡΠΏΠΈΡΠΎΠΊ-ΡΡΠ΅ΡΡΠΈΠΊ) "."; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; /* Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ */ ΡΠ»Π΅Π²Π°: 1px; /* Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ */ }
Π‘ΠΌ. ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π²ΡΠ²ΠΎΠ΄ Π½ΠΈΠΆΠ΅.
- ΠΡΠΏΠΈΡΡ ΡΠ±Π»ΠΎΠΊΠΈ
- Π‘ΡΠ΅ΡΡΡ Π±Π°Π½Π°Π½
- Π‘Π΄Π΅Π»Π°ΡΡ Π°ΠΏΠ΅Π»ΡΡΠΈΠ½ΠΎΠ²ΡΠΉ ΡΠΎΠΊ
- ΠΡΠΏΠΈΡΡ Π²ΠΈΠ½ΠΎΠ³ΡΠ°Π΄
- ΠΠ°Π»Π΅Π·ΡΡ Π½Π° Π΄Π΅ΡΠ΅Π²ΠΎ ΠΌΠ°Π½Π³ΠΎ
Π‘ΠΏΠΈΡΠΎΠΊ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ: 900 03
- Π’Π΅Π³ HTML ul ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° (ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ)
- ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS?
- ΠΠ°ΠΊ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΡΠΏΠΈΡΠΎΠΊ HTML ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS?
- ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² HTML CSS?
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΠΈ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. Π― Π΄Π°Π» Π²Π°ΠΌ ΠΏΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ CSS Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π²ΡΠ΅ Π΅ΡΠ΅ Π΅ΡΡΡ ΠΏΡΡΠ°Π½ΠΈΡΠ°, Π΄Π°ΠΉΡΠ΅ ΠΌΠ½Π΅ Π·Π½Π°ΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡ ΠΆΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ JavaScript, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΌΠ΅Π½Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠΉ.
Π¨ΠΈΡ Π°Π± Π£Π» Π₯Π°ΠΊ
ΠΠΎΠΆΠ΅ΡΡ Π·Π²Π°ΡΡ ΠΌΠ΅Π½Ρ Π¨ΠΈΡ
Π°Π±.