рдпрд╣ рдХреМрди рд╕рд╛ рд╕рдордп рд╣реИ?

"рддреБрдо рдпрд╣рд╛рдБ рдХреНрдпрд╛ рдХрд░ рд░рд╣реЗ рд╣реЛ?"





рдЖрдЬ, рд╕реНрдХрд╛рдЗрдк рдЪреИрдЯ рдкрд░, рд╕рдЬреНрдЬрдиреЛрдВ рдиреЗ рдПрдХ рдЕрдВрддрд░рдВрдЧ рдмрд╛рддрдЪреАрдд рдХреА, рдЬреАрд╡рди рдХреЗ рдЕрд░реНрде рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪрд╛ рдФрд░ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ, рдореМрд╕рдо рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХреАред рдЗрд╕ рднрд╛рд╡рдирд╛рддреНрдордХ рдмрд╛рддрдЪреАрдд рдХреЗ рдПрдХ рд╕рдВрджреЗрд╢ рдореЗрдВ, jquery рдореЛрдмрд╛рдЗрд▓ рдврд╛рдВрдЪреЗ рдХрд╛ рдПрдХ рд▓рд┐рдВрдХ рдлрд┐рд╕рд▓ рдЧрдпрд╛ред рд╕рд╛рдорд╛рдиреНрдп рд╡рд┐рдХрд╛рд╕ рдХреЗ рд▓рд┐рдП рдлреНрд░реЗрдорд╡рд░реНрдХ рд╕рд╛рдЗрдЯ рдХреЗ рдЖрд╕рдкрд╛рд╕ рдЪрд▓рдиреЗ рдХреЗ рдмрд╛рдж, рдХреБрдЫ рджрд┐рд▓рдЪрд╕реНрдк рдХреА рддрд▓рд╛рд╢ рдореЗрдВ, рдореИрдВ рдЗрд╕ рддрд░рд╣ рдХреЗ рдбреЗрдореЛ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдЖрдпрд╛:



<div data-role="header"> <a href="#" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">Cancel</a> <h1>My App</h1> <button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save </button></div>
      
      







рдпрд╣ рдЙрджрд╛рд╣рд░рдг рд░рджреНрдж рдХрд░реЗрдВ рдФрд░ рд╕рд╣реЗрдЬреЗрдВ рдмрдЯрди рдмрдирд╛рддрд╛ рд╣реИред рдлреНрд░реЗрдорд╡рд░реНрдХ рдХреЗ рдкреНрд░рд╢рдВрд╕рдХреЛрдВ рдХреЗ рд▓рд┐рдП, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдкрд┐рдЫрд▓реЗ рдХреБрдЫ рд╡рд░реНрд╖реЛрдВ рдореЗрдВ рд▓реЛрдХрдкреНрд░рд┐рдп рдмреВрдЯрд╕реНрдЯреНрд░реИрдк, рдпрд╣ рдХреЛрдб рдареАрдХ рджрд┐рдЦрддрд╛ рд╣реИред рдореЗрд░реЗ рд▓рд┐рдП, рдпрд╣ рдирд░рдХ рдЬреИрд╕рд╛ рджрд┐рдЦрддрд╛ рд╣реИ рдФрд░ рдЗрд╕реАрд▓рд┐рдПред



рдПрд▓рд┐рдЬрд╛рдмреЗрде рд╣рд░реНрд▓реЗ, рдмреНрд▓рд╛рдЗрдВрдбреНрд╕ рдмрд╛рдИ рдбрд┐рдЬрд╝рд╛рдпрд░






(рдЪрд┐рддреНрд░ рдзреНрдпрд╛рди рдЖрдХрд░реНрд╖рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП)



рдХрдИ рд╕рд╛рд▓ рдкрд╣рд▓реЗ, рд▓реЛрдЧреЛрдВ рдиреЗ рддрд╛рд▓рд┐рдХрд╛рдУрдВ рдХреЛ рдмрдирд╛рдпрд╛, рдФрд░ рддрддреНрд╡реЛрдВ рдХреЗ рд▓рд┐рдП рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рдЕрдХреНрд╕рд░ рд╕реНрд╡рдпрдВ рдЯреИрдЧ рдореЗрдВ рдЫреЛрдбрд╝ рджрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛, рдФрд░ рд╢реИрд▓реА рдлрд╝рд╛рдЗрд▓реЛрдВ рдореЗрдВ рдирд╣реАрдВред рдФрд░ рдпрд╣ рдПрдХ рдмреБрд░рд╛ рд╢рд┐рд╖реНрдЯрд╛рдЪрд╛рд░ рд╣реИред рддрд╛рд▓рд┐рдХрд╛рдУрдВ рдХреЛ рддрд╛рд▓рд┐рдХрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдмрдирд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдФрд░ рдмреНрд▓реЙрдХреЛрдВ рдореЗрдВ рд▓реЗрдЖрдЙрдЯ рдХреА рд╕рд┐рдлрд╛рд░рд┐рд╢ рдХреА рдЬрд╛рддреА рд╣реИред рд╕реНрдЯрд╛рдЗрд▓реНрд╕ рдХреЛ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдмрд╛рд╣рд░ рд▓реЗ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП, рдХреНрдпреЛрдВрдХрд┐ рд╡реЗ рдХрд╣рддреЗ рд╣реИрдВ: "рдЕрд▓рдЧ рд╕реЗ рдордХреНрдЦрд┐рдпреЛрдВ, рдЕрд▓рдЧ рд╕реЗ рдХрдЯрд▓реЗрдЯ", рдпрд╛рдиреАред рд▓реЗрдЖрдЙрдЯ рдбрд┐рдЬрд╛рдЗрди рд╕реЗ рдЕрд▓рдЧ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдЗрд╕ рдмрд╛рд░реЗ рдореЗрдВ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдмрд╣реБрдд рдХреБрдЫ рд▓рд┐рдЦрд╛ рдЧрдпрд╛ рд╣реИ рдФрд░ рд╡рд┐рд╢рд╛рд▓ рд╡рд┐рд╢рд╛рд▓ рдиреЗрдЯрд╡рд░реНрдХ рдореЗрдВ рдмрд╣реБрдд рд╕рд╛рд░реЗ рд╣реЛрд▓реАрд╡рд░ рд╣реИрдВред рдФрд░ рдпрд╣ рдЕрдм рдХрдо рдФрд░ рдХрдо рд▓рдЧрддрд╛ рд╣реИ рдЖрдк рдЯреИрдЧ рдХреЗ рдЕрдВрджрд░ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ (рд▓реЗрдЖрдЙрдЯ рдХреЗ рдЕрдВрджрд░)ред рд▓реЗрдХрд┐рди рдлреНрд░реЗрдорд╡рд░реНрдХ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк, рди рдХреЗрд╡рд▓ рд╕рднреА рд╕рд╛рдЗрдЯреЗрдВ рдПрдХ "рдЪреЗрд╣рд░реЗ" рдкрд░ рдмрди рдЬрд╛рддреА рд╣реИрдВ, рд▓реЗрдЖрдЙрдЯ рдлрд┐рд░ рд╕реЗ рдкрд┐рдЫрд▓реА рд╢рддрд╛рдмреНрджреА рдореЗрдВ рд▓реМрдЯ рд░рд╣рд╛ рд╣реИред



рджреЛрд╣рд░рд╛рд╡ - рд╕реАрдЦрдиреЗ рдХреА рдорд╛рдБ



рдореИрдВ рдКрдкрд░ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрддрд╛рдиреЗ рдФрд░ рд╕рдордЭрд╛рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░реВрдВрдЧрд╛ред рдЙрдирдХреЗ рд▓реЗрдЖрдЙрдЯ рдХреА рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рдмрдирд╛рдирд╛ рдХреНрдпреЛрдВ рдЖрд╡рд╢реНрдпрдХ рдерд╛? рдпрд╣ рдЖрд╡рд╢реНрдпрдХ рд╣реИ:





CSS3 рдЕрдкрдиреА рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдХреЗ рд╕рд╛рде рдЙрдкрд░реЛрдХреНрдд рд╕рднреА рдХреЗ рдмрдЪрд╛рд╡ рдореЗрдВ рдЖрдпрд╛ред рд▓реЗрдХрд┐рди рдЙрд╕ рдкрд░ рдФрд░ рдмрд╛рдж рдореЗрдВред



рдЪреМрдЦрдЯреЗ рдХреНрдпрд╛ рдХрд░рддреЗ рд╣реИрдВ? рдмреЗрд╢рдХ, рдореБрдЦреНрдп рдмрд╛рдд рдпрд╣ рд╣реИ рдХрд┐ рдпрд╣ рдЬреАрд╡рди рдХреЛ рд╕рд░рд▓ рдмрдирд╛рддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдмрд╛рдХреА:





рд▓реЗ рей



рдФрд░ рдЗрд╕рд▓рд┐рдП, рддреАрд╕рд░реА рдмрд╛рд░ рдореИрдВ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдлрд┐рд░ рд╕реЗ рд▓рд┐рдЦрдирд╛



рд╣рдо рдЗрд╕ рддрд░рд╣ рд▓рд┐рдЦрддреЗ рдереЗ:

 <button style="text-align:right; font-weight:bold; display:inline; font-size:12pt; border-radius:1em; backgrund-image: url("..")">
      
      







рдЖрдЬ рдЗрд╕ рддрд░рд╣ рд╣реИ:

 <button class="ui-btn-right ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right">
      
      







рдХреГрдкрдпрд╛ рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рдореИрдВрдиреЗ рд╕рднреА рд╡рд░реНрдЧреЛрдВ рдХреЛ рдирд╣реАрдВ рдмрдЪрд╛рдпрд╛, рд▓реЗрдХрд┐рди рдХреЗрд╡рд▓ рдПрдХ рд╣рд┐рд╕реНрд╕рд╛ред

рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдпрджрд┐ рдЖрдк рдЗрд╕ рдмрдЯрди рдХреЗ рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдкрд╛рд░реНрд╕ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЖрдк рджреЗрдЦреЗрдВрдЧреЗ рдХрд┐ рдХрдИ рдбреБрдкреНрд▓рд┐рдХреЗрдЯ рдФрд░ рдкреБрди: рдЕрд╕рд╛рдЗрди рдХрд┐рдП рдЧрдП рдЧреБрдг рд╣реИрдВред



рддреЛ, рд╕рдм рдХреБрдЫ рд╣реИ рдХрд┐ рд╡рд╕реНрддреБрддрдГ рдХреБрдЫ рд╡рд░реНрд╖реЛрдВ рдХреЗ рд▓рд┐рдП рдкреНрд░рдпрд╛рд╕ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛, рддреЛ рдмрд╛рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдиреИрддрд┐рдХрддрд╛ рдФрд░ рд▓реЗрдЖрдЙрдЯ рдХреЗ рд╕реМрдВрджрд░реНрдпрд╢рд╛рд╕реНрддреНрд░, рдЧреБрдордирд╛рдореА рдореЗрдВ рдбреВрдм рдЧрдпрд╛ рд╣реИред рдлрд┐рд░ рд╕реЗ рдкрд┐рдЫрд▓реА рд╢рддрд╛рдмреНрджреА рдореЗрдВ рд▓реМрдЯ рдЖрдпрд╛ред рдФрд░ рдпрд╣ рдПрдХ рдореБрдЦреНрдпрдзрд╛рд░рд╛ рдмрди рдЧрдИ рд╣реИред рдлреНрд░реАрд▓рд╛рдВрд╕ рдПрдХреНрд╕рдЪреЗрдВрдЬ рдпрд╛ рдЬреЙрдм рдПрдХреНрд╕рдЪреЗрдВрдЬреЛрдВ рдкрд░, 90% рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдФрд░ рдЕрдиреНрдп рдлреНрд░реЗрдорд╡рд░реНрдХ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред рд▓реЗрдЖрдЙрдЯ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЛ рд▓реЗрдЖрдЙрдЯ рдХреЗ рдореВрд▓ рдХреЗ рдмрдЬрд╛рдп рд╡рд░реНрдЧ рдХреЗ рдирд╛рдореЛрдВ рдХрд╛ рдПрдХ рдЧреБрдЪреНрдЫрд╛ рдФрд░ рдХрд┐рд╕ рд╡рд░реНрдЧ рдХреЗ рд▓рд┐рдП рдЬрд┐рдореНрдореЗрджрд╛рд░ рд╣реИ, рдпрд╣ рдЬрд╛рдирдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдЕрдм рдЖрдкрдХреЛ рдпрд╣ рдЬрд╛рдирдиреЗ рдХреА рдЬрд░реВрд░рдд рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпрд╣ рдпрд╛ рдпрд╣ рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддреА рд╣реИ рдФрд░ рд╡реЗрдирд┐рд▓рд╛ рд╕реАрдПрд╕рдПрд╕ рдкрд░ рдХрд┐рд╕реА рдкреНрд░рдХрд╛рд░ рдХреА рдЪрд┐рдк рдХреИрд╕реЗ рдмрдирд╛рдИ рдЬрд╛рддреА рд╣реИред рдФрд░ рдпрд╣ рдХреБрдЫ рдкреНрд░рдХрд╛рд░ рдХреЗ рдбреАрдбрдмреНрд▓реНрдпреВ (рджреГрд╢реНрдп рдореЛрдб) рдпрд╛ рдХрд▓рд╛рдХрд╛рд░ рдХреА рдпрд╛рдж рджрд┐рд▓рд╛рддрд╛ рд╣реИ ... рдареАрдХ рд╣реИ, рдареАрдХ рд╣реИ, рдереЛрдбрд╝рд╛ рд╡рд┐рдЪрд▓рд┐рддред



рдореБрдЦреНрдп рдмрд╛рдд, рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ, рдпрд╣рд╛рдВ рдпрд╣ рд╣реЛ рдЧрдпрд╛ рд╣реИ рдХрд┐ рдпрджрд┐ рдЖрдкрдХреЛ рд▓реЗрдЖрдЙрдЯ рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рддреЛ рдЖрдкрдХреЛ рд╕реАрдПрд╕рдПрд╕ рдирд╣реАрдВ, рдмрд▓реНрдХрд┐ HTML рдХреЛ рд╕рдВрдкрд╛рджрд┐рдд рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред рдореИрдВ рдЗрд╕реЗ рд╣рдорд╛рд░реЗ рд╕рдордп рдХреА рддреНрд░рд╛рд╕рджреА рдорд╛рдирддрд╛ рд╣реВрдВред рд▓реЗрдХрд┐рди рд╣рдореЗрдВ рдПрдЪрдЯреАрдПрдордПрд▓ 5 рдХреЗ рд╕рд╛рде рдЬреЛрдбрд╝реЗ рдЬрд╛рдиреЗ рд╡рд╛рд▓реЗ рдЕрднреВрддрдкреВрд░реНрд╡ рд╕реАрдПрд╕рдПрд╕ 3 рдлреАрдЪрд░реНрд╕ рджрд┐рдП рдЧрдП рдереЗ - рдпреЗ рд╕реАрдПрд╕рдПрд╕ рдЧреНрд░рд┐рдб рд▓реЗрдЖрдЙрдЯ ( рд╣реИрдмрд░ рдкрд░ ), рдлреНрд▓реЗрдХреНрд╕рдмреЙрдХреНрд╕ ( рд╣реИрдмрд░ рдкрд░ ), рдЕрджреНрднреБрдд рдЪрдпрдирдХрд░реНрддрд╛ (рдмрд╣рди, рдмрдЪреНрдЪреЗ, рд╕рд╛рдорд╛рдиреНрдпреАрдХреГрдд (рдЕрднреА рддрдХ рдХреЛрдИ рдорд╛рддрд╛-рдкрд┐рддрд╛ рдирд╣реАрдВ рд╣реИ)) рдФрд░ рдмрд╣реБрдд рдХреБрдЫ рд╣реИрдВред рдмреЗрд╢рдХ, рд╕рдм рдХреБрдЫ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ, рдФрд░ рд╕рднреА рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдореЗрдВ рдирд╣реАрдВ, рд▓реЗрдХрд┐рди рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ рдЧреНрд░реЗрд╕рдлреБрд▓ рдбрд┐рдЧреНрд░реЗрдбреЗрд╢рди рдХрд╛ рдЖрд╡рд┐рд╖реНрдХрд╛рд░ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ред



WTF?



рдЖрдкрдХрд╛ рдЙрдЪрд┐рдд рдкреНрд░рд╢реНрди, рдкреНрд░рд┐рдп% рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдирд╛рдо% рд╣реИ: "рдореИрдВ рдХреНрдпрд╛ рд╕реБрдЭрд╛рд╡ рджреЗ рд░рд╣рд╛ рд╣реВрдВ, рдореИрдВ рдХрд┐рд╕рдХреЗ рд▓рд┐рдП рдЕрдЧреНрд░рдгреА рд╣реВрдВ?"



рдЕрдм, рдПрдХ рдФрд░ рдкреИрд░рд╛рдЧреНрд░рд╛рдл, рдФрд░ рдПрдХ рдХрд░реАрдмреА рдорд╛рдорд▓реЗ рдкрд░ рдЪрд▓рддреЗ рд╣реИрдВред



рдпрджрд┐ рдЖрдк рд╡реЗрдм рдкрд░ рдбрд┐рдЬрд╝рд╛рдЗрди рдХрд╛ рдирд┐рд░реАрдХреНрд╖рдг рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЖрдк рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд рдкреИрдЯрд░реНрди рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВред рд╣рд╛рдВ, рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдЗрддрдирд╛ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдмрд╣реБрдд рдЖрджрд░реНрд╢ рд╣реИред рд╢реАрд░реНрд╖ рд▓реЗрдЦ (рд╢реАрд░реНрд╖ рд▓реЗрдЦ) рдФрд░ рддрд╣рдЦрд╛рдиреЗ (рдкрд╛рдж рд▓реЗрдЦ) рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░реЗрдВред рдЫрдкрд╛рдИ рдореЗрдВ рдЙрдиреНрд╣реЗрдВ рд╣реЗрдбрд░ рдФрд░ рдлреБрдЯрд░ рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИред рдиреЗрд╡рд┐рдЧреЗрд╢рдиред рдПрдХ рдпрд╛ рджреЛ рд╕рд╛рдЗрдбрдмрд╛рд░ рд╣реИрдВред рдФрд░, рдЬрд╝рд╛рд╣рд┐рд░ рд╣реИ, рд╕рд╛рдордЧреНрд░реАред рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдореЗрдВ рдЪреМрдЦрдЯреЗ рдХреЗ рдЖрдЧрдорди рдХреЗ рд╕рд╛рде, рд╕рд╛рдЗрдбрдмрд╛рд░ рдХреЛ рдРрд╕реЗ рдЫреЛрдбрд╝ рджрд┐рдпрд╛ рдЧрдпрд╛, рдЬрд┐рд╕ рд░реВрдк рдореЗрдВ рд╡реЗ рдереЗред рдЕрдм рд╡реЗ рд╕рд╛рдЗрдб рдирд╣реАрдВ рд╣реИрдВ, рд▓реЗрдХрд┐рди рд╢реАрд░реНрд╖ рдпрд╛ рдлреБрдЯрд░ рдмрд╛рд░ :-)



рдореИрдВ рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ рд╕реБрдЭрд╛рд╡ рджреЗрддрд╛ рд╣реВрдВ рдХрд┐ рдХрд┐рд╕реА рд╡рд┐рдЪрд╛рд░ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░реЗрдВ, рд╢рд╛рдпрдж рдирдпрд╛ рдирд╣реАрдВред рдПрдХ рдирдП рдкреНрд░рдХрд╛рд░ рдХреЗ рдврд╛рдВрдЪреЗ рдХреЗ рдКрдкрд░, рдЬрдм рд▓реЗрдЖрдЙрдЯ рдЕрдкрд░рд┐рд╡рд░реНрддрд┐рдд рд░рд╣рддрд╛ рд╣реИ, рдФрд░ рдХреЗрд╡рд▓ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд╕рд╛рд░реНрд╡рднреМрдорд┐рдХ рдкрд░рд┐рд╡рд░реНрддрди рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдХреБрдЫ рдФрд░ рдЬреИрд╕реЗ рдХрд┐ reset.css рдФрд░ normalize.css, рд╕рд┐рд░реНрдл рдЕрдиреНрдп рдЙрджреНрджреЗрд╢реНрдпреЛрдВ рдХреЗ рд▓рд┐рдПред



рдЗрд╕реЗ рд╕реНрдкрд╖реНрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП - рдореИрдВ рдЖрдкрдХреЛ рдПрдХ рдЙрджрд╛рд╣рд░рдг рджрд┐рдЦрд╛рдКрдВрдЧрд╛:



90% рд╕рд╛рдЗрдЯ рд╡рд╛рдпрд░рдлреНрд░реЗрдо рдПрдЪрдЯреАрдПрдордПрд▓ 5 рдкрд░ рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рджрд┐рдЦрддреЗ рд╣реИрдВ



 тАж <body> <header>/</header> <nav></nav> <article></article> <aside></aside> <footer></footer> </body> ...
      
      







рдореИрдВ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдпрд╣ рдиреЛрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ рдХрд┐ HTML5 рдиреЗ рд╣рдореЗрдВ рдпреЗ рдЕрджреНрднреБрдд рдЯреИрдЧ рджрд┐рдП рд╣реИрдВред рдЕрдм рдЖрдкрдХреЛ рдХреНрд▓рд╛рд╕ = "рд╣реЗрдбрд░" рд▓рд┐рдЦрдирд╛ рдирд╣реАрдВ рд╣реЛрдЧрд╛ред



рдФрд░ рдЕрдм рд╣рдо рдХрдХреНрд╖рд╛рдУрдВ рдХреЗ рдмрд┐рдирд╛ рдХрд┐рд╕реА рднреА рддрддреНрд╡ рдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдЖрдИрдбреА (рдЖрдИрдбреА рдХреЛ рдЖрдорддреМрд░ рдкрд░ рдЬреЗрдПрд╕ рдХреА рдЕрдкреЗрдХреНрд╖рд╛ рдХреЗ рдЕрдиреБрд╕рд╛рд░ рдЫреЛрдбрд╝ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛)ред рд╕реНрдкрд╖реНрдЯрддрд╛ рдХреЗ рд▓рд┐рдП рд╕рд░рд▓ рд╕реАрдПрд╕рдПрд╕:



 body > header, body > footer { width: 100%; text-align: center; background-color: #efe; } body > nav { width: 80%; margin: 0 auto; text-align: center; } body > article { float:left; width: 60%; background-color: #eef; } body > aside { float: right; width: 40%; background-color: #fee; }
      
      







Jsfiddle рдкрд░ рдПрдХ рд╣реА рдмрд╛рдд



рдпрджрд┐ рдЖрдкрдХреЛ рдПрдХ рдФрд░ рд╕рд╛рдЗрдбрдмрд╛рд░ рдЬреЛрдбрд╝рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рддреЛ рдЖрдк рдЯрд╛рдЗрдк рдХреЗ рдЫрджреНрдо рд╡рд░реНрдЧ рдХреЛ рд▓рд╛рдЧреВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ: nth-child рдпрд╛ рдЗрд╕рдХреЗ "рдмреНрд░рджрд░реНрд╕"ред рдпрд╣ рджреЗрдЦрддреЗ рд╣реБрдП рдХрд┐ рддрддреНрд╡ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдпрд╛ рдирд╣реАрдВ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рдмрдЯрди рдФрд░ рдЗрдирдкреБрдЯ, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдЗрдирдкреБрдЯ [рдкреНрд░рдХрд╛рд░ = "рдмрдЯрди"] рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред



рдЗрд╕ рдкреНрд░рдХрд╛рд░, рдкреГрд╖реНрда рдХреЛ рдПрдХ рдмрд╛рд░ рдореЛрдбрд╝рдиреЗ рдФрд░ рдЗрдВрдЬрди рдкрд░ рдЦреАрдВрдЪрдиреЗ рдХреЗ рдмрд╛рдж, рд╣рдо рдХреЗрд╡рд▓ рдЦрд╛рд▓ рдмрджрд▓ рд╕рдХрддреЗ рд╣реИрдВред рдХреНрдпрд╛ рд╡реЗ рд╕рднреА рдЗрдВрдЬрди рдФрд░ рд╕реНрдерд┐рд░ рд╕рд╛рдЗрдЯреЛрдВ рдХреЗ рд▓рд┐рдП рд╕рд╛рд░реНрд╡рднреМрдорд┐рдХ рдмрд╛рд╣рд░ рдмрд╛рд░реА рдЪрд╛рд╣рд┐рдПред рдЦреИрд░, рдпрд╛ рдХрдо рд╕реЗ рдХрдо рдмрджрд▓рд╛рд╡ рдХреЗ рд╕рд╛рдеред рдФрд░ рдХреНрдпрд╛ CSS рдЗрд╕рдХреЗ рд▓рд┐рдП рдореВрд▓ рд░реВрдк рд╕реЗ рдкреНрд░рдпрд╛рд╕рд░рдд рдирд╣реАрдВ рд╣реИ рдФрд░ рдХреНрдпрд╛ CSS3 рдХреЗ рдирд╡рд╛рдЪрд╛рд░ рдкреНрд░рдпрд╛рд╕рд░рдд рд╣реИрдВ?



рдмреЗрд╢рдХ, рдХрдХреНрд╖рд╛рдПрдВ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдирд╣реАрдВ рдЫреЛрдбрд╝реА рдЬрд╛ рд╕рдХрддреАрдВред рд▓реЗрдХрд┐рди рдореИрдВрдиреЗ рдЗрд╕ рджрд┐рд╢рд╛ рдореЗрдВ рдХрд╛рдо рдХрд┐рдпрд╛ рдФрд░ рдХрдо рд╕реЗ рдХрдо рдХрдХреНрд╖рд╛рдУрдВ рдХреЗ рд╕рд╛рде рд▓реЗрдЖрдЙрдЯ рдмрдирд╛рдпрд╛ред



рдореБрдЭреЗ рдХреНрдпрд╛ рд▓рд╛рдн рджрд┐рдЦрд╛рдИ рджреЗрддреЗ рд╣реИрдВ?

рдпреЗ рд╢реБрд░реБрдЖрдд рдореЗрдВ рд╕реВрдЪреАрдмрджреНрдз рдЖрдЗрдЯрдо рд╣реИрдВ:

- рдбрд┐рдЬрд╛рдЗрди / рддрддреНрд╡ рдмрджрд▓рддреЗ рд╕рдордп, рд▓реЗрдЖрдЙрдЯ рдореЗрдВ рд╣рд╕реНрддрдХреНрд╖реЗрдк рди рдХрд░реЗрдВ;

- рдХреЛрдб рдЕрд░реНрде, рд╕реНрд╡рдЪреНрдЫ рдФрд░ рдиреНрдпреВрдирддрд░ рд╣реИ;

рдФрд░ рднреА, рдмрд╣реБрдд рдорд╣рддреНрд╡рдкреВрд░реНрдг:

- рдЙрддреНрдкрдиреНрди рд╕реАрдПрдордПрд╕ рдХреЗ рд╕реИрдХрдбрд╝реЛрдВ рдХреЗ рддрд╣рдд рдЯреЗрдореНрдкрд▓реЗрдЯреНрд╕ рддреБрд░рдВрдд riveted рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ

- рдЯреЗрдореНрдкрд▓реЗрдЯ рд╕реЗ рдердХ рдЧрдП? рдмрджрд▓реА рд╣реБрдИ рд╢реИрд▓реАред рд╕реАрдПрдордПрд╕ рд╕реЗ рдердХ рдЧрдП? рдПрдХ рдФрд░ рдкреБрд░рд╛рдиреА рд╢реИрд▓реА рд░рдЦреЛред

- рдХреБрдЫ рдФрд░ред



рд╡рд┐рдкрдХреНрд╖:

- рдЕрддреНрдпрдзрд┐рдХ рд╕реАрдПрд╕рдПрд╕, рдЬреИрд╕рд╛ рдХрд┐ рд╕рднреА рд░реВрдкрд░реЗрдЦрд╛рдУрдВ рдореЗрдВ рд╣реИ;

- рдХреЛрдИ рдХреНрд░реЙрд╕-рдмреНрд░рд╛рдЙрдЬрд╝рд░ рд╕рдВрдЧрддрддрд╛ рдирд╣реАрдВ рд╣реЛрдЧреА, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдЗрд╕рдХреЗ рд▓рд┐рдП рдЧреНрд░реЗрд╕рдлреБрд▓ рдбрд┐рдЧреНрд░реЗрдбреЗрд╢рди рд╣реИ

- рдХреБрдЫ рдФрд░ред



рдмреЗрд╢рдХ, рдЖрдк рд╣рд░ рдХрд┐рд╕реА рдФрд░ рд╣рд░ рдХрд┐рд╕реА рдХреЛ рдЦреБрд╢ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдЙрдкрд▓рдмреНрдз рд╕рдорд╛рдзрд╛рди рд╣рд░ рдХрд┐рд╕реА рдХреЗ рдЕрдиреБрдХреВрд▓ рдирд╣реАрдВ рд╣реИред



рдЗрд╕ рддрд░рд╣ рдХреЗ рдЪрдорддреНрдХрд╛рд░ рдХреЛ рд╡рд┐рдХрд╕рд┐рдд рдХрд░рдиреЗ рдФрд░ рд╕рдорд░реНрдерди рдХрд░рдиреЗ рдХреЗ рд╕рдВрджрд░реНрдн рдореЗрдВ, рдХреБрдЫ рднреА рдирдпрд╛ рдирд╣реАрдВ рдЖрдпрд╛ред рд╕рднреА рд░реВрдкрд░реЗрдЦрд╛рдУрдВ рдХреЗ рд╕рд╛рде рд╕рдорд╛рди рд░реВрдкрд╛рдВрддрд░ рдФрд░ рд╕рдВрдХрд▓рдиред рдпрд╛рдиреА рдРрд╕рд╛ рдФрд░ рдРрд╕рд╛ рд╕рдВрдпреБрдХреНрддред рдХреЗрд╡рд▓, рдореИрдВ рдПрдХ HTML рдлреНрд░реЗрдорд╡рд░реНрдХ рдкрд░ рджреЛрд╣рд░рд╛рддрд╛ рд╣реВрдВред



PS рдореБрдЭреЗ рдпрдХреАрди рд╣реИ рдХрд┐ рдпрд╣ рд╡рд┐рдЪрд╛рд░ рдирдпрд╛ рдирд╣реАрдВ рд╣реИ рдФрд░ рдХрд┐рд╕реА рдиреЗ рдкрд╣рд▓реЗ рд╣реА рд╡реНрдпрдХреНрдд рдХрд░ рджрд┐рдпрд╛ рд╣реИред рдореИрдВ рдЦреБрдж рд▓рдВрдмреЗ рд╕рдордп рд╕реЗ рдЗрд╕ рд╡рд┐рд╖рдп рдкрд░ рд╕реЛрдЪ рд░рд╣рд╛ рдерд╛, рд▓реЗрдХрд┐рди рдЕрднреА рддрдХ рдореИрдВрдиреЗ рдХреНрд╖рд┐рддрд┐рдЬ рдкрд░ рд╕рдорд╛рди рд╡рд┐рдЪрд╛рд░рдзрд╛рд░рд╛ рд╡рд╛рд▓реЗ рдореВрд░реНрдЦреЛрдВ рдХреЛ рдирд╣реАрдВ рджреЗрдЦрд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП, рдореИрдВ рдЗрд╕ рд╡рд┐рд╖рдп рдкрд░ рдХрд┐рд╕реА рднреА рд╕рд╛рдордЧреНрд░реА рдХреЗ рд▓рд┐рдП рдЖрднрд╛рд░реА рд░рд╣реВрдВрдЧрд╛ред



PSS рдЪрд▓реЛ рд╡рд╣рд╛рдБ рдПрдХ holivar рд╣реЛ: "рдЖрдк рдЬрд▓ рд░рд╣реЗ рд╣реИрдВ рдФрд░ рдлреНрд░реЗрдо рдФрд░ рдореЗрд░реЗ рдкрд╕рдВрджреАрджрд╛ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдореЗрдВ рд╕реЙрд╕реЗрдЬ рд╕реНрдХреНрд░реИрдк рдореЗрдВ рдХреБрдЫ рднреА рд╕рдордЭ рдореЗрдВ рдирд╣реАрдВ рдЖрддрд╛ рд╣реИред"



рдЕрджреНрдпрддрди



рдореИрдВ рдЗрд╕реЗ рдлрд┐рд░ рд╕реЗ рдХрд╣рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░реВрдВрдЧрд╛, рдЕрдиреНрдпрдерд╛ рдмрд╣реБрдд рд╕реЗ рд▓реЛрдЧ рд╡рд┐рдкрд░реАрдд рджрд┐рд╢рд╛ рдореЗрдВ рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдореЗрдВ рджрд┐рдЦрддреЗ рд╣реИрдВ



рдореИрдВ рдпрд╣ рд╕реЛрдЪрдиреЗ рдХрд╛ рд╕реБрдЭрд╛рд╡ рджреЗрддрд╛ рд╣реВрдВ рдХрд┐ рдПрдХ рд╕рд╛рд░реНрд╡рднреМрдорд┐рдХ рдореЙрдбреНрдпреВрд▓рд░ HTML рдлреНрд░реЗрдорд╡рд░реНрдХ рдХреНрдпреЛрдВ рди рдмрдирд╛рдпрд╛ рдЬрд╛рдП рдЬрд┐рд╕рдХреЗ рд▓рд┐рдП рд╢реБрджреНрдз рд╕реАрдПрд╕рдПрд╕ рдореЗрдВ рдЕрдкрдиреЗ рдХрдИ рдЯреЗрдореНрдкрд▓реЗрдЯ рд▓рд┐рдЦреЗрдВред



рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рдХрд┐рд╕реА рднреА CMS рдХреЛ рд▓реЗрдВред рдПрдХ рд╕рд╛рд░реНрд╡рднреМрдорд┐рдХ рд╡рд┐рд╖рдп UniTheme (рд▓реЗрдЖрдЙрдЯ) рдмрдирд╛рдПрдВред

рдФрд░ рдлрд┐рд░ рдЙрд╕рдХреЗ рд▓рд┐рдП, рд▓реЗрдЖрдЙрдЯ рдбрд┐рдЬрд╛рдЗрдирд░ рд╕рд┐рд░реНрдл рдЕрдкрдиреЗ рд╕реАрдПрд╕рдПрд╕ рдХрд░рддреЗ рд╣реИрдВред рдмреЗрд╢рдХ, рдПрдХ рдЖрдзрд╛рд░ рдХреЗ рд░реВрдк рдореЗрдВ рдХреНрдпрд╛ рдмреНрд░реЗрдбрдмреЛрд░реНрдб рдЧреНрд░рд┐рдб рдЙрддреНрдкрдиреНрди рд╣реБрдЖред

рдпрджрд┐ рд╡реНрдпрд╡рд╕реНрдерд╛рдкрдХ рдкреИрдирд▓ рдореЗрдВ, рдЖрдЗрдП рд╕рд╛рдЗрдбрдмрд╛рд░ / рд╡рд┐рдЬреЗрдЯреНрд╕ рдХреЛ рдЪрд╛рд▓реВ рдпрд╛ рдмрдВрдж рдХрд░реЗрдВ - рдпрд╣ рдХрд┐рд╕реА рднреА рддрд░рд╣ рд╕реЗ рд▓реЗрдЖрдЙрдЯ рдХреЛ рдкреНрд░рднрд╛рд╡рд┐рдд рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рдмреЗрд╢рдХ, рдЕрдЧрд░ рдХреЛрдИ рддрддреНрд╡ рдЙрд╕ рдкреГрд╖реНрда рдкрд░ рджрд┐рдЦрд╛рдИ рджреЗрддрд╛ рд╣реИ рдЬрд┐рд╕рдХреЗ рд▓рд┐рдП рдХреЛрдИ рд╢реИрд▓реА рдирд╣реАрдВ рд╣реИ, рддреЛ рдЖрдкрдХреЛ рдЕрдкрдиреЗ рд╣рд╛рдереЛрдВ рд╕реЗ рдХрд╛рдо рдХрд░рдирд╛ рд╣реЛрдЧрд╛, рдЬреИрд╕рд╛ рдХрд┐ рд╕рд╛рдорд╛рдиреНрдп рд░реВрдк рд╕реЗ рдФрд░ рдХрд┐рд╕реА рднреА рдврд╛рдВрдЪреЗ рдореЗрдВред



рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдкреНрд░реЗрдореА рдХреБрдЫ рд╢реИрд▓реА рдореЗрдВ рддреИрдпрд╛рд░ рдпреВрдЖрдИ рддрддреНрд╡ рднреА рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

рд▓реЗрдХрд┐рди рдлрд┐рд░ рд╕реЗ - рд╡реЗ рд▓реЗрдЖрдЙрдЯ рдореЗрдВ рд╣рд╕реНрддрдХреНрд╖реЗрдк рдХреЗ рдмрд┐рдирд╛ рдЙрдкрдпреЛрдЧ рдХреЗ рд▓рд┐рдП рддреИрдпрд╛рд░ рд╣реЛрдВрдЧреЗред



рдФрд░ рдореИрдВ рджреЛрд╣рд░рд╛рддрд╛ рд╣реВрдВ - рдмреЗрд╢рдХ, рдореИрдВ рдХрдХреНрд╖рд╛рдУрдВ рдХреА рдкреВрд░реА рдЕрд╕реНрд╡реАрдХреГрддрд┐ рдХрд╛ рдкреНрд░рд╕реНрддрд╛рд╡ рдирд╣реАрдВ рдХрд░рддрд╛, рд▓реЗрдХрд┐рди рдореИрдВ рдЙрдирдХреЗ рдЙрдкрдпреЛрдЧ рдХреЛ рдХрдо рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рд╕реНрддрд╛рд╡ рдХрд░рддрд╛ рд╣реВрдВред



рдЕрджреНрдпрддрди реи



рдзрдиреНрдпрд╡рд╛рдж рдореИрдВ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рд▓рд╛рдЧреВ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рд▓рд┐рдВрдХ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рдЬреЛ рдореИрдВрдиреЗ рд▓реЗрдЦ рдореЗрдВ рд╕реЛрдЪрд╛ рдерд╛: рд╕реАрдПрд╕рдПрд╕ рдЬрд╝реЗрди рдЧрд╛рд░реНрдбрди рдФрд░ рдПрдХ рдбреЗрдореЛ



All Articles