css — ΠΠ°ΠΊ ΡΠ°ΡΡΡΡΠ½ΡΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° Π²Π΅ΡΡ Π±Π»ΠΎΠΊ?
ΠΠΎΠΏΡΠΎΡ Π·Π°Π΄Π°Π½
ΠΠ·ΠΌΠ΅Π½ΡΠ½ 3 ΠΌΠ΅ΡΡΡΠ° Π½Π°Π·Π°Π΄
ΠΡΠΎΡΠΌΠΎΡΡΠ΅Π½ 1k ΡΠ°Π·
ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΡΠ°ΡΡΡΡΠ½ΡΡΡ ΡΡΡΠ»ΠΊΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π½Π° Π½Π΅Ρ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ ΠΏΠΎ Π±ΡΠΊΠ³ΡΠ°ΡΠ½Π΄Ρ ΡΡΠ³Π° li? display: block Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
.product-menu { display: flex; justify-content: center; background: #ccffff; width: 70%; height: 500px; border-radius: 2%; } .product-list { display: flex; flex-direction: column; list-style-type: none; margin-top: 50px; font-family: Geneva, Arial, Helvetica, sans-serif; } .product-list li { display: flex; justify-content: center; width: 100px; height: 30px; border: solid #666666 1px; background: #fff; } .product-list a { display: block; align-items: center; margin-top: 6px; text-decoration: none; font-size: 20px; border: 1px red solid; }
<div> <ul> <li><a href="#">ΠΡΠ½ΠΊΡ 1</a></li> <li><a href="#">ΠΡΠ½ΠΊΡ 2</a></li> <li><a href="#">ΠΡΠ½ΠΊΡ 3</a></li> </ul> </div>
- css
- html5
1
ΠΠ°ΠΊ Π²Π°ΡΠΈΠ°Π½Ρ, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ΅Π³Ρa
width: 100%
ΠΈ text-align: center
;UPD. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ Π½Π° Π²Π΅ΡΡ Π±Π»ΠΎΠΊ, Π½ΡΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ height: 100%
ΠΈ ΡΠ±ΡΠ°ΡΡ margin-top
.
.product-menu { display: flex; justify-content: center; background: #ccffff; width: 70%; height: 500px; border-radius: 2%; } .product-list { display: flex; flex-direction: column; list-style-type: none; margin-top: 50px; font-family: Geneva, Arial, Helvetica, sans-serif; } .product-list li { display: flex; justify-content: center; width: 100px; height: 30px; border: solid #666666 1px; background: #fff; } .product-list a { display: block; align-items: center; text-decoration: none; font-size: 20px; width: 100%; height: 100%; text-align: center; border: 1px red solid; }
<div> <ul> <li><a href="#">ΠΡΠ½ΠΊΡ 1</a></li> <li><a href="#">ΠΡΠ½ΠΊΡ 2</a></li> <li><a href="#">ΠΡΠ½ΠΊΡ 3</a></li> </ul> </div>
2
Π’Π°ΠΌ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΎΡΠ²Π΅ΡΠ΅ ΡΡΠΈΠ»Ρ ΡΡΡΠ»ΠΊΠΈ Π½Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π·Π°Π΄Π°Π½, ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ»Π΅ΠΊΡΠΎΠ² Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈΠ»ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ, ΡΠΌΠΎΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΡΠ»ΠΊΠΈ ΠΈ ΡΠ°ΠΌ Π²ΡΡ ΠΎΡΠΌΠ΅ΡΠ΅Π½ΠΎ, Π³Π΄Π΅ ΠΈ ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1. 0" /> <title>Document</title> <style> .product-menu { display: flex; justify-content: center; background: #ccffff; width: 70%; height: 500px; border-radius: 2%; } .product-list { display: flex; flex-direction: column; list-style-type: none; margin-top: 50px; font-family: Geneva, Arial, Helvetica, sans-serif; } .product-list li { display: flex; justify-content: center; width: 100px; height: 30px; border: solid #666666 1px; background: #fff; } .product-list a { display: flex; /*ΡΡΡ block Π½Π΅ Π½Π°Π΄ΠΎ align-items ΠΈ justify-content ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ»Π΅ΠΊΡΠΎΠ² */ align-items: center; justify-content: center; /*Π²ΠΎΡ ΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΈ Π²ΡΡ Π±ΡΠ΄Π΅Ρ ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ*/ text-decoration: none; font-size: 20px; width: 100%; height: 100%; text-align: center; border: 1px red solid; } </style> </head> <body> <div> <ul> <li><a href="#">ΠΡΠ½ΠΊΡ 1</a></li> <li><a href="#">ΠΡΠ½ΠΊΡ 2</a></li> <li><a href="#">ΠΡΠ½ΠΊΡ 3</a></li> </ul> </div> </body> </html>
Π― Π±Ρ ΡΠ±ΡΠ°Π» Π²ΡΠ΅ ΠΈΠ· li
ΠΈ ΠΏΠ΅ΡΠ΅Π½Π΅Ρ Π² a
.
a
. ΠΠ°ΠΊ Ρ ΠΏΠΎΠ½ΡΠ», ΠΊΡΠ°ΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ°, Π±ΡΠ»Π° Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π΅Π΅ ΡΠΎΠΆΠ΅ ΡΠ±ΡΠ°Π»..product-menu { display: flex; justify-content: center; background: #ccffff; width: 70%; height: 500px; border-radius: 2%; } .product-list { display: flex; flex-direction: column; list-style-type: none; margin-top: 50px; font-family: Geneva, Arial, Helvetica, sans-serif; } .product-list li { /* display: flex; */ /* justify-content: center; */ /* height: 30px; */ width: 100px; min-height: 30px; /* ΠΠ°ΠΌΠ΅Π½ΠΈΠ» height Π½Π° min-height */ border: solid #666666 1px; background: #fff; } .product-list a { display: block; /* align-items: center; */ /* margin-top: 6px; */ /* border: 1px red solid; */ /* ΠΠΎΠ±Π°Π²ΠΈΠ» */ height: 100%; box-sizing: border-box; padding-top: 6px; text-align: center; text-decoration: none; font-size: 20px; }
<div> <ul> <li><a href="#">ΠΡΠ½ΠΊΡ 1</a></li> <li><a href="#">ΠΡΠ½ΠΊΡ 2</a></li> <li><a href="#">ΠΡΠ½ΠΊΡ 3</a></li> </ul> </div>
ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡΠ΅
Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· Google
Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· Facebook
Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΏΠΎΡΡΡ
ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π±Π΅Π· ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ
ΠΠΎΡΡΠ°
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ°, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡ Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ
ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π±Π΅Π· ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ
ΠΠΎΡΡΠ°
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ°, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡ Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ
ΠΠ°ΠΆΠΈΠΌΠ°Ρ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡ ΠΎΡΠ²Π΅ΡΒ», Π²Ρ ΡΠΎΠ³Π»Π°ΡΠ°Π΅ΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠΎΠΉ ΠΎ ΠΊΡΠΊΠΈ
html — ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡ Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΊΠΎΠΉ?
ΠΠ°Π΄Π°ΡΡ Π²ΠΎΠΏΡΠΎΡ
ΠΠΎΠΏΡΠΎΡ Π·Π°Π΄Π°Π½
ΠΠ·ΠΌΠ΅Π½ΡΠ½ 2 Π³ΠΎΠ΄Π° 8 ΠΌΠ΅ΡΡΡΠ΅Π² Π½Π°Π·Π°Π΄
ΠΡΠΎΡΠΌΠΎΡΡΠ΅Π½ 126 ΡΠ°Π·
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π΅ΡΡ Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΊΠΎΠΉ? Π Π±Π»ΠΎΠΊΠ΅ <nav>
ΡΠ΅ΡΠΈΠ» ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» flex-box.
display: block;
ΠΈ width: 100%; height: 100%
Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠ΅ ΡΡΠ΄ΠΈΡΠ΅ ΡΡΡΠΎΠ³ΠΎ, Ρ Π½ΠΎΠ²ΠΈΡΠΎΠΊ.nav{ display: flex; justify-content: space-between; padding: 5px 10px; background-color: #293855; border-radius: 5px; margin: 10px 10px 30px 10px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; } nav a{ display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; } nav a:hover{ color: #fff; text-decoration: none; } .header__section{ display: flex; align-items: center; } .header__item{ padding: 10px 10px; } .header__item:not(.headerlogo):hover{ background-color: #337ab7; border-color: #2e6da4; border-radius: 5px; } .headerlogo{ font-weight: 700; } .headerButton{ cursor: pointer; }
<nav> <div> <div>TOAA Web</div> <div><a href="/">ΠΠ»Π°Π²Π½Π°Ρ</a></div> </div> <div> <div><a href="/auth">ΠΠΎΠΉΡΠΈ</a></div> <div><a href="/registration">Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ</a></div> </div> </nav>
- html
- css
- flexbox
5
ΠΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π΅ΡΡ Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΊΠΎΠΉ.
nav{ display: flex; justify-content: space-between; padding: 5px 10px; background-color: #293855; border-radius: 5px; margin: 10px 10px 30px 10px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; } nav a{ color: #fff; text-decoration: none; } nav a:hover{ color: #fff; text-decoration: none; } .header__section{ display: flex; align-items: center; } .header__item{ padding: 10px 10px; } .header__item:not(.headerlogo):hover{ background-color: #337ab7; border-color: #2e6da4; border-radius: 5px; } .headerlogo{ font-weight: 700; } .headerButton{ cursor: pointer; }
<nav> <div> <div>TOAA Web</div> <a href="/"><span >ΠΠ»Π°Π²Π½Π°Ρ</span></a> </div> <div> <a href="/auth"><span >ΠΠΎΠΉΡΠΈ</span></a> <a href="/registration"><span >Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ</span></a> </div> </nav>
2
ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡΠ΅
Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· Google
Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· Facebook
Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΏΠΎΡΡΡ
ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π±Π΅Π· ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ
ΠΠΎΡΡΠ°
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ°, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡ Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ
ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π±Π΅Π· ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ
ΠΠΎΡΡΠ°
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ°, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡ Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ
ΠΠ°ΠΆΠΈΠΌΠ°Ρ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡ ΠΎΡΠ²Π΅ΡΒ», Π²Ρ ΡΠΎΠ³Π»Π°ΡΠ°Π΅ΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠΎΠΉ ΠΎ ΠΊΡΠΊΠΈ
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π±Π»ΠΎΠΊ Div ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ Π² HTML β PeterElSt
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Div ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ Π² HTML, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π³. Π’Π΅Π³ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΡΠ»ΠΊΠΈ Ρ ΠΎΠ΄Π½ΠΎΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π΄ΡΡΠ³ΡΡ. ΠΡΡΠΈΠ±ΡΡ href ΡΠ΅Π³Π° ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ URL-Π°Π΄ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π²Π΅Π΄Π΅Ρ ΡΡΡΠ»ΠΊΠ°. Π’Π΅Π³ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ. Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ div ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅Π³ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π°. ΠΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: Clickable Div ΠΠΎΠ³Π΄Π° ΠΊΡΠΎ-ΡΠΎ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ Π½Π° div, ΠΎΠ½ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΊΠ°Π·Π°Π½Π½ΡΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ href.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ div ΡΠ²Π»ΡΡΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΈΡ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ². ΠΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ div, ΠΎΠ½ΠΈ Π½Π΅ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ²Π»ΡΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅Π»ΠΊΠ½ΡΡ, Π½Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ onclick Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΈΡΠΏΡΡΠΊΠ°Π΅ΠΌΡΡ ΠΈΠΌ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ div ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ Ρ Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ Π² HTML. ΠΡ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ onclick ΠΈ ΡΠ²ΡΠΆΠ΅ΠΌ Π΅Π³ΠΎ Ρ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ div. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠΈΡΠ»ΠΎΠΌ ΠΈΠ»ΠΈ Π·Π½Π°ΠΊΠΎΠΌ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΠ΅Π±ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π±ΡΠΊΠ². ΠΠΎΠ³Π΄Π° ΠΎΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΡΠΎ Π΄Π°Π½Π½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ Π²Π΅ΡΠ½Π°, JavaScript Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π΅Π΅.
Π₯ΠΎΡΠΎΡΠ΅ΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ UI/UX ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΡΡΠΈ ΡΡΠΎΠ³ΠΎ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π°ΠΌ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΈΡΡΡΠΉ JavaScript. ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠΌΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div.
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML? Π’Π΅Π³ΠΈ img> ΠΈ a> ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² HTML Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ . ΠΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° img> ΠΈ ΡΠ΅Π³Π° aβ.
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ Π²Π΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π½Π°Π΄ Π½ΠΈΠΌ ΡΠ΅Π³ A.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Div ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ Π² ββHTML?
ΠΡΠ΅Π΄ΠΈΡ: stackoverflow.com
ΠΡ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΊ Π½Π΅ΠΌΡ ΡΠΎΠ±ΡΡΠΈΠ΅ Π² ΠΊΠ°ΠΌΠΏΡΡΠ΅, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ²ΡΠ·ΡΠ²Π°Π΅ΠΌΡΡ Ρ Π½ΠΈΠΌ. ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΌΡ Π²ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΊΡΡΡΠΎΡΠ°: ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div. ΠΡΠ»ΠΈ Π²Ρ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅ ΡΡΠΎ, Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ div Π±ΡΠ΄ΡΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½Ρ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML-ΡΠ΅Π³Π° A
Π’Π΅Π³ *aβ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ»ΠΊΠΈ Π² HTML. URL-Π°Π΄ΡΠ΅Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Π΅Π΄Π΅Ρ ΡΡΡΠ»ΠΊΠ°, ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ href Π² ΡΠ΅Π³Π΅ *a>. Π¦Π΅Π»Π΅Π²ΠΎΠΉ Π°ΡΡΠΈΠ±ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π²Π΅Π½ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ , ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ. ΠΡΠ°ΡΠ·Π΅Ρ Π·Π°ΠΏΡΠΎΡΠΈΡ URL-Π°Π΄ΡΠ΅Ρ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ href, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π»ΠΊΠ½Π΅Ρ ΡΡΡΠ»ΠΊΡ.
ΠΠΎΠ³Ρ Π»ΠΈ Ρ ΡΠ΄Π΅Π»Π°ΡΡ Div ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ?
ΠΠ²ΡΠΎΡΡ ΠΈ ΠΏΡΠ°Π²Π°: Stack Overflow
ΠΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ div ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠΎΠ±ΡΡΠΈΠ΅ onclick ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ div.
ΠΠΎ ΠΌΠ½Π΅Π½ΠΈΡ Π²Π°Π»ΠΈΠ΄Π°ΡΠΎΡΠΎΠ² W3C, Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π² ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ°ΠΏΠΎΠ»Π½ΠΈΠ² Π²Π΅ΡΡ div ΡΡΡΠ»ΠΊΠΎΠΉ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ. >div> Π²Π½ΡΡΡΠΈ A ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠΌ Π² HTML5. ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠΌ. http://dev.w3.org/html5/markup/a.html#a-changes. Π HTML5 Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠΌ. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ΅Π³ΠΈ Π² div ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π²Π½ΡΡΡΠΈ href, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΡΡΠ»ΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»Π°ΡΡ Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π€ΡΠ½ΠΊΡΠΈΡ OnClick Ρ Javascript, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ.
Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Div ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Javascript
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ JavaScript. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠ²ΠΎΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΡ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ, div Β«ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»Π΅Π½Β» Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠ°ΠΉΡΠ°. ΠΠΎΠ³Π΄Π° Π²Ρ Π΄Π΅Π»Π°Π΅ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ display: block, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Β«ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠΉΒ». Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ΅Π³ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ href. ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ ΡΡΠΈΠΌ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ HTML-ΠΊΠΎΠ΄?
ΠΡΠ΅Π΄ΠΈΡ: www.askquesty.com
Π¦Π΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ°ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠ³ΠΎ Π² HTML. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ https://testbook.com/ β ΡΡΠΎ ΡΡΡΠ»ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π² ΡΠ΅ΠΊΡΡΠ΅ Β«Π‘ΡΡΠ°Π½ΠΈΡΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ° TestbookΒ». ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π½Π° ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΡΠ°ΠΏΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅Π³ */a*, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, Π³Π΄Π΅ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ ΡΡΡΠ»ΠΊΠ°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠΎΡΡΠΈΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ, Π½Π°ΡΡΠΈΠ²ΡΠΈΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² HTML. ΠΠ·-Π·Π° Π°ΡΡΠΈΠ±ΡΡΠ° href ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ»ΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π² HTML Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ HTML. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠΈΠΏΡ ΡΠ°ΠΉΠ»ΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π°ΡΠ΄ΠΈΠΎΡΠ°ΠΉΠ»Ρ, Π²ΠΈΠ΄Π΅ΠΎ, HTML-ΡΠ°ΠΉΠ»Ρ ΠΈ Ρ. Π΄. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ΅ ΠΊΠΎΠ΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ URL_of_choice URL-Π°Π΄ΡΠ΅ΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π°Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎΡΠ΅ΡΠ°Π» ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π΅ΡΡΡ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΡΠ΅ΠΊΡΡΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ ΠΈΠ»ΠΈ ΠΎΠ½Π° Π½Π°Π²Π΅Π΄Π΅Ρ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ ΠΈ ΡΠ΅Π»ΠΊΠ½Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠΎΠ² Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π²ΠΊΠ»ΡΡΠ°Ρ Testbook, ΠΡΡΡ WordPress, ΠΡΡΡ Excel ΠΈΠ»ΠΈ ΠΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ «ΠΠ»: Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠ° ΡΡΡΠ»ΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΏΠΎΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ°ΠΆΠ°Π² Π½Π° Π½Π΅Π΅, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΡ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π² Css?
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π² CSS ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° :active. ΠΡΠΎΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΡΠ΄Π΅Π»Π°Π΅Ρ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΆΠ°Π»ΠΈ, Π°ΠΊΡΠΈΠ²Π½ΡΠΌ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ.
ΠΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ»Π°ΠΆΠΊΠΎΠΌ. ΠΠ°ΡΠ΅ΠΌ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΌΠ΅ΡΠΊΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ»Π°ΠΆΠΊΠ° Β«ΡΠΈΠΏ Π²Π²ΠΎΠ΄Π°Β», Π½Π°Π·Π½Π°ΡΠΈΠ² Π°ΡΡΠΈΠ±ΡΡ Β«Π΄Π»ΡΒ» ΠΌΠ΅ΡΠΊΠ΅ ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ, Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Β«Π²Ρ ΠΎΠ΄Β». Π ΠΏΠΎΠ»Π΅ ΡΠ»Π°ΠΆΠΊΠ° Π²Π²Π΅Π΄ΠΈΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠΌ ΡΠΏΠ»ΠΎΡΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ #ccc; ΠΎΠ±ΠΎΠ·Π½Π°ΡΡΡΠ΅ Π΅Π³ΠΎ ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠΌ ΡΠΏΠ»ΠΎΡΠ½ΡΠΌ #ddd; Π° Π·Π°ΡΠ΅ΠΌ, ΠΏΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ»Π°ΠΆΠΊΠ°, Π²Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΈΡΠΈΠ½Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ· Π΄Π²ΡΡ ΡΠΈΡΡ
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Div ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ Javascript
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π³ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript. . ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° div. ΠΠ°ΡΠ΅ΠΌ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΡΡ ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΊ div Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠΎΠ±ΡΡΠΈΡ onclick. ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° div.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Div ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ Π² ΠΌΠ°ΡΠΈΠ½ΠΎΠΏΠΈΡΠ½ΠΎΠΌ ΡΠ΅ΠΊΡΡΠ΅?
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° href ΡΠ΅Π³Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ , ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ div, ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΠΈ Π²ΡΠ΅Π³ΠΎ div.
ΠΠ°ΠΊ ΡΠ²ΡΠ·Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Div Π² HTML?
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠ΅Π»ΠΈΡΡ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ ID, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ # ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ²ΠΎΠΉ href. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΡΠ΅ ΠΊ ΡΠΎΠΌΡ ΠΆΠ΅ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΊΠ°ΠΊ href=»#footer»>, Π²Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΠ΅, ΡΡΠΎ div id=»footer» ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠ·Π²ΡΠ°Ρ ΠΊ Π½Π°ΡΠ°Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΡΡΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ Π²ΠΎΠ·Π²ΡΠ°ΡΠ° ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΡΠΈΠΏΡ href.
Π‘Π΄Π΅Π»Π°ΡΡ Π±Π»ΠΎΠΊ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π±Π»ΠΎΠΊ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :active. ΠΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ div Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠΊΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ Π² HTML
ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΎΠ½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ ΡΡΡΠ»ΠΊΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΠ΅ΠΊΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ button> (ΠΈ ΠΏΠΎΠΌΠ΅ΡΠΈΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΊΠ°ΠΊ *i, *b, *strong, *br) ΠΈ Ρ. Π΄. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ *img. ΠΠ½ΠΎΠΏΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ *input, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΠΊΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ.
Π¦Π΅Π»Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ β ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΈ ΠΊΠΎΠ΄ CSS Π΄Π»Ρ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³Π° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡ: dopointer ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠ΅Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΌΡΡΠΈ Π² ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ. Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅Π³ΠΎΠ² anhcor Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π±Π»ΠΎΠΊ Div ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ Π² React
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π±Π»ΠΎΠΊ Div ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ Π² React, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ onClick. ΠΡΠΎΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ΅Π»ΡΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄Π΅Π»Π°ΡΡ Π²ΡΠ΅, ΡΡΠΎ Ρ ΠΎΡΠΈΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² React
Π‘ΠΎΠ±ΡΡΠΈΠ΅ onClick ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² React Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ β Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΠΎΠ½ Π²ΠΈΠ΄Π΅Π½. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ onClick Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ true, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½. ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½, Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ false.
ΠΠ»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ | Webflow University
Π£ΡΠΎΠΊ
ΠΠ»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ
Π£ΡΠΎΠΊ
ΠΡΠ΅ ΡΡΠΎΠΊΠΈ
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊΠΈ ΡΡΡΠ»ΠΎΠΊ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π±Π°Π½Π½Π΅Ρ, Π² ΡΡΡΠ»ΠΊΡ.
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
youtube.com/embed/RtqZ7py63M8″>Π ΡΡΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎ ΡΡΠ°ΡΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ. Π‘ΠΊΠΎΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ!
ΠΠ»ΠΎΠΊΠΈ ΡΡΡΠ»ΠΎΠΊ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½Ρ Π±Π»ΠΎΠΊΠ°ΠΌ Div Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΡΡΡΠΊΡΡΡΡ ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π½ΠΎ ΠΎΠ±Π»Π°ΡΡΡ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΎΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ. ΠΠ»ΠΎΠΊΠΈ ΡΡΡΠ»ΠΎΠΊ ΠΌΠΎΠ³ΡΡ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π±Π°Π½Π½Π΅Ρ, Π² ΡΡΡΠ»ΠΊΡ.
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅:
- ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΎΠΊ
- ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΎΠΊ
- Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΈΠΏΠ° ΡΡΡΠ»ΠΊΠΈ
- Π‘ΡΠΈΠ»Ρ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΎΠΊ
- ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Div Π² Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ ΠΈ 1 Π½Π°ΠΎΠ±ΠΎΡΠΎΡ
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΎΠΊ
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ Π² ΡΠ²ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ, ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΏΠ°Π½Π΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΡΡΠ»ΡΠΊ: A) Π½Π° Π»Π΅Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΎΠΊ Π½Π° ΡΠ²ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ
ΠΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΡΠΎΠΌΠ΅ Π΄ΡΡΠ³ΠΈΡ ΡΡΡΠ»ΠΎΠΊ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ Π² Π±Π»ΠΎΠΊ Β«Π‘ΡΡΠ»ΠΊΠ°Β» ΠΊΠ°ΠΊ Ρ ΠΏΠ°Π½Π΅Π»ΠΈ Β«ΠΠΎΠ±Π°Π²ΠΈΡΡΒ», ΡΠ°ΠΊ ΠΈ Ρ Ρ ΠΎΠ»ΡΡΠ°.
Π‘ΠΠΠΠ’ ΠΠΠ― ΠΠ ΠΠ€ΠΠ‘Π‘ΠΠΠΠΠΠΠ: Β ΠΡΡΠ³ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½Ρ Π² Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ ΠΎΡΠΎΡΠΌΠΈΡΡ Π΅Π³ΠΎ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠ»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ.Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΈΠΏ ΡΡΡΠ»ΠΊΠΈ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΠ°ΠΊ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π±Π»ΠΎΠΊΠΈ ΡΡΡΠ»ΠΎΠΊ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ ΠΆΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΡΡΠ»ΠΎΠΊ β URL, ΡΡΡΠ°Π½ΠΈΡΠ°, ΡΡΡΠ°Π½ΠΈΡΠ° ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ (Π΅ΡΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ), ΡΠ°Π·Π΄Π΅Π» ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΏΠΎΡΡΠ°, ΡΠ΅Π»Π΅ΡΠΎΠ½ ΠΈ ΡΠ°ΠΉΠ». ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ ΡΡΡΠ»ΠΎΠΊ.
ΠΠ»Ρ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΊΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌ ΡΡΡΠ»ΠΊΠΈ, Π²ΡΠ±ΡΠ°Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π½Π°ΠΆΠ°Π² ΠΊΠ»Π°Π²ΠΈΡΡ Π²Π²ΠΎΠ΄Π°.ΠΠ»ΠΎΠΊΠΈ ΡΡΡΠ»ΠΎΠΊ Style
ΠΠ»ΠΎΠΊΠΈ ΡΡΡΠ»ΠΎΠΊ ΡΠ°ΠΊ ΠΆΠ΅ Π³ΠΈΠ±ΠΊΠΈ, ΠΊΠ°ΠΊ ΠΈ Π±Π»ΠΎΠΊΠΈ Div, ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈ ΡΡΡΡΠΊΡΡΡΡ. ΠΠ½ΠΈ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠΏΠΈΡΠΎΠΊ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Π² Π±Π»ΠΎΠ³Π΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π‘ΡΠΈΠ»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΡΡΡΠ»ΠΎΠΊ
ΠΠ»ΠΎΠΊΠΈ ΡΡΡΠ»ΠΎΠΊ ΡΠ²Π»ΡΡΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΎΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ, ΡΡΠΎ Π½Π° Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π»ΠΊΠ½ΡΡΡ. ΠΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°Π³ΠΈ, ΡΡΠΎΠ±Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ:
- ΠΡΠ±Π΅ΡΠΈΡΠ΅ Block
- ΠΠ°ΠΆΠΌΠΈΡΠ΅ States ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Hover
- ΠΠΎΠ±Π°Π²ΠΈΡΡ Box Shadow ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»Ρ
- . ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ box shadow ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ:
- ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ
- ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ States > Hover
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
- ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ None/Default Default State
- Create ΠΠ΅ΡΠ΅Ρ
ΠΎΠ΄ Π΄Π»Ρ Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
- . text
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ΅ΠΊΡΡ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π½ΡΡΡΡ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΎΠΊ, ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΈΠ½ΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π΅ΡΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΡΡΠΈΠ»Ρ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ΅Π³Π° ΠΡΠ΅ ΡΡΡΠ»ΠΊΠΈ .
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ ΡΡΡΠ»ΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΡΡΠ»ΠΎΠΊ, ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ² ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ°:
- ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ
- ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΠΏΠ°Π½Π΅Π»Ρ ΡΡΠΈΠ»Π΅ΠΉ
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π½Π° Π½Π΅Ρ
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° Π½Π° ΡΠ΅ΡΠ½ΡΠΉ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Β«Π½Π΅ΡΒ» Π½Π΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ°. Π§ΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΏΡΡΠΌΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ.
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Div Π² Π±Π»ΠΎΠΊ Link ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Link Π² Π±Π»ΠΎΠΊΠΈ Div ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π±Π»ΠΎΠΊ div Π²ΠΌΠ΅ΡΡΠΎ Π±Π»ΠΎΠΊΠ° link Π΄Π»Ρ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π±ΡΡΡΡΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π° Π΄ΡΡΠ³ΠΎΠΉ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΏΠΎΡΠΎΠ± ΡΡΠ½ΠΊΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Link Π² Π±Π»ΠΎΠΊ Div
Π§ΡΠΎΠ±Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊ Link Π² Π±Π»ΠΎΠΊ Div, ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π±Π»ΠΎΠΊ Link ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠΉΡΠ΅ Π΅Π³ΠΎ Π² Π±Π»ΠΎΠΊ Div.
- . text