ΠΊΠΎΠ΄ шапки сайта html css

Π¨Π°ΠΏΠΊΠ° страницы

Основная ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ с Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ это ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ…, ΠΎΡ‚ высокого Π΄ΠΎ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° 760 пиксСлами, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² шапкС стоит Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±ΠΎΠ»Π΅Π΅ ваТная Ρ‡Π°ΡΡ‚ΡŒ изобраТСния Π²ΠΏΠΈΡΡ‹Π²Π°Π»Π°ΡΡŒ Π² этот Ρ€Π°Π·ΠΌΠ΅Ρ€. На рис. 6.3 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. Π’Ρ‘ΠΌΠ½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π° Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 760px, Π±ΡƒΠΊΠ²ΠΎΠΉ А ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Ρ‹ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹.

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Рис. 6.3. Π¨ΠΈΡ€ΠΈΠ½Π° шапки

Π’ ΠΈΠ΄Π΅Π°Π»Π΅ рисунок Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΡ‚ 2000 пиксСлов, Ρ‚ΠΎΠ³Π΄Π° практичСски ΠΏΡ€ΠΈ любом Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° рисунок Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ, обрСзая всё, Ρ‡Ρ‚ΠΎ Π½Π΅ помСщаСтся Π² ΠΎΠΊΠ½ΠΎ. Но Π±Π΅Π΄Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π΅ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΡˆΠΈΡ€ΠΎΠΊΠ°Ρ, Π° Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ бСсконСчно тянущиСся ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ Ρ‡Ρ‘Ρ€Π½Ρ‹Π΅ полоски Π½Π΅ хочСтся. Один ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ это Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. Π’Π΅, Ρƒ ΠΊΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ 1280 пиксСлов ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈ мСньшС, увидят Π΅Π΄ΠΈΠ½ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Π° Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Ρ‹ ΡˆΠΈΡ€ΠΎΠΊΠΈΡ… ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠ² смогут ΠΏΠΎΠ»ΡŽΠ±ΠΎΠ²Π°Ρ‚ΡŒΡΡ сразу нСсколькими ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹ΠΌΠΈ ΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ заходящими солнцами. Π—Π΄Π΅ΡΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ΄Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ рисунок Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π±Π΅Π· стыков совмСщался сам с собой ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (рис. 6.4). Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ для наглядности спрятан.

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Рис. 6.4. Π‘ΠΎΠ²ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ изобраТСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

На Π΄Π°Π½Π½ΠΎΠΌ рисункС мСсто стыка ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΎ стрСлкой ΠΈ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ стык ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ. Если ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΡƒΡŽ ΠΈ Π»Π΅Π²ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Ρ‚ΠΎ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π±Π΅Π· Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… стыков, ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½ сплошной рисунок. ΠžΡΡ‚Π°Ρ‘Ρ‚ΡΡ слСгка ΠΏΠΎΠ΄ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ, Π·Π°ΠΌΠ΅Π½ΠΈΠ² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ no-repeat (Π±Π΅Π· повторСния) Π½Π° repeat-x (ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ).

На этом ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок Π² шапкС Π³ΠΎΡ‚ΠΎΠ² (рис. 6.5).

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Рис. 6.5. Ѐоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° для шапки

Π’ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG-24 Ρ„Π°ΠΉΠ» с Ρ„ΠΎΠ½ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 1325Ρ…405 пиксСлов Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΎΠΊΠΎΠ»ΠΎ 32 Кб, Π° Π² PNG-8 с 256-Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€ΠΎΠΉ, Π³Π΄Π΅ качСство Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° нСсколько Ρ…ΡƒΠΆΠ΅ β€” ΠΎΠΊΠΎΠ»ΠΎ 15 Кб. МоТно Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Π½Π° Π΄Π²Π΅ составныС части β€” Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² своём Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ привСсти ΠΊ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡŽ качСства отобраТСния Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. Π’ΠΏΡ€ΠΎΡ‡Π΅ΠΌ, 32 Кб для ΡΡ‚ΠΎΠ»ΡŒ большого изобраТСния это Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ посчитаСт «экономиСй Π½Π° спичках». Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ созданию шапки сайта ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ окаТСтся ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ, Π° ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΅Π³ΠΎ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ шапки

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π² шапкС повторяСтся ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. На рис. 6.6 ΠΏΠΎΠΊΠ°Π·Π°Π½ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ высотой 405 пиксСлов, ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ для этой Ρ†Π΅Π»ΠΈ. Π€ΠΎΡ€ΠΌΠ°Ρ‚ PNG-24 Π½Π΅ вносит искаТСния Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сТимаСт (ΠΈΡ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ объСм 402 Π±Π°ΠΉΡ‚Π°), Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π² этом случаС ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΅Π³ΠΎ. Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ рисунка Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° для наглядности.

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Рис. 6.6. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ рисунок (header-gradient.png)

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с силуэтными ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹ΠΌΠΈ дСлаСтся Π½Π° ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅ ΠΈ высотой 198 пиксСлов, Π½Π΅Ρ‚ смысла Π΄Π΅Π»Π°Ρ‚ΡŒ Π΅Ρ‘ Π½Π° всю высоту шапки, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ лишь Ρ‡Π°ΡΡ‚ΡŒ. Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ изобраТСния ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 6.7. Π¨Π°Ρ…ΠΌΠ°Ρ‚Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ.

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Рис. 6.7. Ѐоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ (header-animal.png)

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ сохранСниС этой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ΄Π΅Ρ‚ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG-8, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ прозрачности, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ 256 ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° PNG-24, Π²Π°ΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ Ρ„ΠΎΠ½. Для этого ΠΏΡ€ΠΈ сохранСнии Π² Photoshop-Π΅ Π½Π°Π΄ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΡ€Π°Ρ‘Π² (Matte) Π±Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊ срСднСй части Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, Π³Π΄Π΅ ΠΈΠ΄Ρ‘Ρ‚ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ силуэта. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ это Ρ†Π²Π΅Ρ‚ #9de1f0. Π’ этом случаС Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ грязных ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ² Π²ΠΎΠΊΡ€ΡƒΠ³ Π΄Π΅Ρ€Π΅Π²ΡŒΠ΅Π² ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹Ρ…, Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠ΅ Ρ†Π΅Π»ΠΎΠ΅.

Π”Π²Π° рисунка для Ρ„ΠΎΠ½Π° шапки ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Ρ‹, пишСм ΠΊΠΎΠ΄ HTML.

Π’ ΠΈΡ‚ΠΎΠ³Π΅ объСм Ρ„Π°ΠΉΠ»ΠΎΠ² оказался 12,5 Кб, Ρ‡Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ мСньшС ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ.

НазваниС сайта

НазваниС написано Π½Π° ΠΎΠ±Π»Π°ΠΊΠ΅ с Ρ€Π°ΡΡ‚ΡƒΡˆΡ‘Π²Π°Π½Π½Ρ‹ΠΌΠΈ краями, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ трудности ΠΏΡ€ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Π•ΡΡ‚ΡŒ Π΄Π²Π° способа, ΠΊΠ°ΠΊ ΠΈΡ… ΠΎΠ±ΠΎΠΉΡ‚ΠΈ.

ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ способ ΠΈΠΌΠ΅Π΅Ρ‚ ряд нСдостатков β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ нСльзя ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Π΄Π°ΠΆΠ΅ Π½Π° ΠΏΠ°Ρ€Ρƒ пиксСлов, ΠΎΠ½ΠΎ привязано ΠΊ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρƒ, ΠΈ Ссли Π΅Π³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, придётся ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ сохраняСм Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG-24. Код HTML останСтся ΠΏΡ€Π΅ΠΆΠ½ΠΈΠΌ, Π° стили Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡΡ.

На Π³Π»Π°Π²Π½ΠΎΠΉ страницС сайта ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ выводится ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, Π½Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… страницах ΠΎΠ½Π° слуТит ссылкой Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу. Для этого достаточно слСгка ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ / Ρƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° href ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π²Π΅Π±-сСрвСрС, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ локально.

ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ для шапки ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 6.14.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π¨Π°ΠΏΠΊΠ° сайта ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

September 07, 2013

ΠŸΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Π» видСокурс ΠΏΠΎ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткС сайта ΠΎΡ‚ АндрСй ΠœΠΎΡ€ΠΊΠΎΠ²ΠΈΠ½Π°.

Автор Π·Π°Ρ‡Π΅ΠΌ-Ρ‚ΠΎ Π²Ρ‹Ρ€Π΅Π·Π°Π» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π°ΡΡ‚ΡŒ Ρ„ΠΎΠ½Π° с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ, вставлял ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° Π² html-каркас ΠΈ ΠΎΠ±Π΅Ρ€Ρ‚Ρ‹Π²Π°Π» Π΅Π³ΠΎ ссылкой, пытался ΡƒΠ³Π°Π΄Π°Ρ‚ΡŒ мСстополоТСниС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ позиционирования. Π― Ρ€Π΅ΡˆΠΈΠ» сам ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ каТСтся Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ.

Π’ основу создания шапки я ΠΏΠΎΠ»ΠΎΠΆΠΈΠ» свойство Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… слоСв Π½Π° div β€˜Π°Ρ…. ΠšΡΡ‚Π°Ρ‚ΠΈ, с этим ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ я Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅Π΄Π°Π²Π½ΠΎ познакомился Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠ΅ ΠΎΡ‚ Дмитрия Π‘Π΅ΠΌΠ΅Π½ΠΎΠ²Π°. Π”Π°Π»Π΅Π΅, прСдполагаСтся, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ всСх Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ извСстны (Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ Ρ‚Π°ΠΊ ΠΈ происходит, ΠΏΡ€ΠΈ Π²Ρ‹Ρ€Π΅Π·Π°Π½ΠΈΠΈ ΠΈΡ… ΠΈΠ· psd-ΠΌΠ°ΠΊΠ΅Ρ‚Π°).

Рисунок ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ Π½Π΅ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ шапки, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π΅Π΅ ΠΏΡ€Π°Π²ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π· Ρ€ΠΎΠ²Π½ΠΎ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² сСбя Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ список. CSS-ΠΊΠΎΠ΄ для этого слоя прСдставлСн Π½ΠΈΠΆΠ΅:

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ρ„ΠΎΠ½ слоя div Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ частично, лишь Π΅Π³ΠΎ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡ€Π°Π΅ΡˆΠ΅ΠΊ, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΈ отводится Ρ€ΠΎΠ»ΡŒ Ρ„ΠΎΠ½Π° Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Для слоя div явно задаю Π΅Π³ΠΎ высоту. Код со свойствами ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅:

Ну Π²ΠΎΡ‚, Π·Π°Π΄Π°Ρ‡Π° практичСски ΠΈ Ρ€Π΅ΡˆΠ΅Π½Π°. ΠŸΡ€ΠΈ этом Π½Π΅ Π±Ρ‹Π»ΠΎ использовано Π½ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ, Π½ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ позиционирования. Ρ‚ΠΎΠ»ΡŒΠΊΠΎ смСщСниС Ρ„ΠΎΠ½Π° слоя. ΠžΡΡ‚Π°Π»ΠΎΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ послСдний слой, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° сайта. Π Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽ Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅Ρ€Ρ… всСх ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… слоСв ΠΈ дСлаю ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π½Π° всС Π΅Π³ΠΎ пространство.

ΠŸΡ€ΠΈ этом снова Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Π»ΠΎΠΆΡƒ Π²Π½ΡƒΡ‚Ρ€ΡŒ этого слоя. Никаких img Π² html-ΠΊΠΎΠ΄Π΅! ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ Π½Π°Π΄ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ ΠΏΠΎ-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ располоТится Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ Π±Π»ΠΎΠΊΠ° (ΠΊΠ°ΠΊ мною Π·Π°Π΄ΡƒΠΌΠ°Π½ΠΎ для простоты экспСримСнта). Волько явно Π·Π°Π΄Π°ΠΌ этому слою высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ρ€Π°Π²Π½ΡƒΡŽ высотС ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ рисунка:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ достаточно ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ список Π²ΠΏΡ€Π°Π²ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ float: right ΠΈ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ для Π½Π΅Π³ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ свойства, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ:

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ html-каркаса ΠΈ CSS-ΠΊΠΎΠ΄Π°.

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π—Π΄Π΅ΡΡŒ я ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡŽ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Π½Π½ΡƒΡŽ мною схСму располоТСния всСх Π±Π»ΠΎΠΊΠΎΠ² Π² шапкС сайта:

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта: простой способ

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Π΄Ρ€ΡƒΠ·ΡŒΡ! БСгодня я Ρ…ΠΎΡ‡Ρƒ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта. Она являСт собой Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт, ΠΏΡ€ΠΈΠ΄Π°ΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. ΠŸΡ€ΠΈΠ΄Π°Π΅Ρ‚ рСсурс ΡƒΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡ‚ΡŒ ΠΈ свой ΡΡ‚ΠΈΠ»ΡŒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π΅, Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ особыС, спСциализированныС знания, Π½Π°Π²Ρ‹ΠΊΠΈ ΠΈ умСния программирования. БущСствуСт Π΄Π²Π° способа, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ Ρ†Π΅Π»ΠΈ. И ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… простой.

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта: вводная информация

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

НачнСм с ΠΎΠ±Ρ‰Π΅ΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π΄Π°Π½Π½ΠΎΠΌ графичСском ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ элСмСнтС. Он ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ нСсколькими нСоспоримыми прСимущСствами:

ΠšΡΡ‚Π°Ρ‚ΠΈ! Π£ сайта Π΅Ρ‰Π΅ Π½Π΅Ρ‚ собствСнного Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°? Π•Π³ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ всСго Π·Π° 5 ΠΌΠΈΠ½ΡƒΡ‚. Π’ этом Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ наш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

Π§Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½/ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π±Π»ΠΎΠΊ любой ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠΈ:

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π² Π½Π΅ΠΌ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ всС ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ элСмСнты. Главная Π·Π°Π΄Π°Ρ‡Π° – Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π¨Π°ΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° максимально Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ‡Π½ΠΎ ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒΡΡ с основным ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ сайта.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта: Π΄Π²Π° способа достиТСния Ρ†Π΅Π»ΠΈ

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π― ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Ρƒ ΡƒΠ³Π»ΡƒΠ±Π»ΡΡ‚ΡŒΡΡ Π² вопросы Β«ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта htmlΒ» ΠΈΠ»ΠΈ Β«ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта cssΒ». Π‘Π½Π°Ρ‡Π°Π»Π° ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ для Π½Π΅Π΅ «рисунок».

1. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта ΠΎΠ½Π»Π°ΠΉΠ½

НаиболСС простой ΠΌΠ΅Ρ‚ΠΎΠ΄. НС Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π½Π°Π²Ρ‹ΠΊΠΎΠ², ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΡƒΠΌΠ΅Π½ΠΈΠΉ. Π•ΡΡ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΉ ряд ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΎΠΊ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ шапки для сайтов. Π’ Π½ΠΈΡ… – Π½Π°Π±ΠΎΡ€Ρ‹ шаблонов. НСкоторыС сСрвисы ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния Π² ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹. Π”Ρ€ΡƒΠ³ΠΈΠ΅ – Π½Π΅Ρ‚. Π‘Ρ€Π΅Π΄ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π΅ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ бСсплатныС, Ρ‚Π°ΠΊ ΠΈ ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅.

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта ΠΎΠ½Π»Π°ΠΉΠ½ ΠΎΡ‡Π΅Π½ΡŒ просто. Волько Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ удаСтся Π½Π΅ всСгда. Π’Π΅Π΄ΡŒ Ρ€Π°Π±ΠΎΡ‚Π° ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ использованиС шаблонов.

2. Adobe Photoshop

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹ΠΉ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. Π£ Π½Π΅Π³ΠΎ Π±Π΅Π·Π³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Π΅ возмоТности. Работая Π² Π½Π΅ΠΌ, Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΎΠ±Π»ΠΎΠΆΠΊΡƒ, Ρ‚ΠΎΡ‡Π½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅ вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°:

Photoshop являСт собой Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт для создания шапок ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов.

ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΈΡ‚ΠΎΠ³

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ графичСский элСмСнт – ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π΄Π΅Π»Π°. НСобходимо Π΅Ρ‰Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° страницах сайта. Π‘Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² ΠΏΠ°ΠΏΠΊΡƒ IMAGES. Она находится Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ административной ΠΏΠ°Π½Π΅Π»ΠΈ. ПослС Ρ‡Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΡŽ изобраТСния Π½Π° страницах.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта CSS: ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° сайт

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°ΡŽ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта CSS. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² #header ΠΈ Ρ‚Π°ΠΌ вмСсто установлСнных ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² высоты ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π³Π°Π±Π°Ρ€ΠΈΡ‚Ρ‹ созданной ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ – высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния.

width: 1420px; β€” ΡˆΠΈΡ€ΠΈΠ½Π°

height: 300px; β€” высота

background-color: #25B33f; β€” Ρ„ΠΎΠ½

margin-bottom: 30px; β€” отступ снизу

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π—Π΄Π΅ΡΡŒ ΠΈ Π΄Π°Π»Π΅Π΅ слова Β«Π¨ΠΈΡ€ΠΈΠ½Π°Β», «Высота», Β«Π€ΠΎΠ½Β» ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ ΠΊ ΠΊΠΎΠ΄Ρƒ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ. Они лишь ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚ Ρ‚Π° ΠΈΠ»ΠΈ иная строка.

ПослС этого остаСтся Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ саму ΡˆΠ°ΠΏΠΊΡƒ:

background-image: url(images/i8.png) β€” ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта html

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

ΠΠ°Ρ‡ΠΈΠ½Π°ΡŽ Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ описаниС сайта ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. Для этого Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ body Π±Π»ΠΎΠΊ div с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΈ Π² Π½Ρ‘ΠΌ Π΄Π²Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° h1 ΠΈ h3. Π’ Π½ΠΈΡ… ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ описаниС.

Мой сайт

Π’Π΅ΠΏΠ΅Ρ€ΡŒ я знаю, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта

Если Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ самого Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ тСкста описания, ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ ΠΈΡ…, потрСбуСтся использованиС Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:

color: #2980b9; β€” Ρ†Π²Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°

font: 50px Times New Roman; β€” ΡˆΡ€ΠΈΡ„Ρ‚

margin-left: 500px; β€” отступ слСва

width: 400px; β€” ΡˆΠΈΡ€ΠΈΠ½Π°

color: #9b59b6; β€” Ρ†Π²Π΅Ρ‚

font-style: italic; β€” курсив

margin: 90px 0 0 40px; β€” располоТСниС

И Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

РасскаТу ΠΏΡ€ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ способ. Π‘ΡƒΡ‚ΡŒ Π΅Π³ΠΎ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ адрСс, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ находится подготовлСнная шапка, Π² Π±Π»ΠΎΠΊ

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π’ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ адрСс ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ: ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css.

ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ Β«Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠΈ событий» Π½ΡƒΠΆΠ½ΠΎ Π² #header ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ строку background-image: ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ position: relative. А Ρ€Π°Π·Π΄Π΅Π»Π°Ρ… h1 ΠΈ h3 ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ position: absolute;. Однако Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ отступы Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ². Π§Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π² ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ.

font: 50px Times New Roman;

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π² px ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°. НС Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΈΡ… Π·Π° истину! Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π½Π° своСм сайтС устанавливайтС ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ!

Π¨Π°ΠΏΠΊΠ° сайта для WordPress

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

И Π·Π°Π²Π΅Ρ€ΡˆΠ°ΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ рассказом ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта для CMS WordPress. Π₯отя ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ установку ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΉ Ρ‚Π΅ΠΌΡ‹, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ шапка создана ΠΈ установлСна ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ данная информация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½Π° Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ Π·Π°Ρ…ΠΎΡ‚Π΅Π» ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ ΠΈ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свою, ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ.

Для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ ΠΏΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΠΏΡƒΡ‚ΠΈ:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! НуТно Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ шапки Π½Π° страницС? Для этого Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² ΠΊΠΎΠ΄ ΠΈ Π² Ρ‚Π΅Π³ img, внСситС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style со свойством margin. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ: style=Β»margin:0 0 0 0;Β»

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта: Π»ΠΈΡ‡Π½Ρ‹ΠΉ совСт

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта, Π½ΠΎ ΠΈ ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π΅ Π½Π° свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. Как ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ ΠΈΠ· всСго описанного Π²Ρ‹ΡˆΠ΅, Π½ΠΈΠΊΠ°ΠΊΠΈΡ… слоТностСй Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ.

Если вас ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‚ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ сСкрСты, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠΎΠΉ WordPress, Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΌΠΎΠΉ Π±Π»ΠΎΠ³. Π’ Π½Π΅ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ³ΠΎ ΠΏΠΎ этой Ρ‚Π΅ΠΌΠ΅.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π“Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ шапки сайта

Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ Π²Ρ€ΠΎΠ΄Π΅ Π±Ρ‹ простыС Π·Π°Π΄Π°Ρ‡ΠΈ вСрстки Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ слоТной структуры HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ использования CSS-Ρ‚Ρ€ΡŽΠΊΠΎΠ². Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов ΠΈΠ»ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΡ‚ΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Одна ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… Π·Π°Π΄Π°Ρ‡ β€” это Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ элСмСнтов Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части сайта Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π±Ρ‹Π» слСва, Π° ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню β€” справа. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ float ΠΈ position:absolute, Π° для выравнивания ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ β€” Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ margin ΠΈ padding Ρ€Π°Π·Π½Ρ‹ΠΌ элСмСнтам. Π’Ρ€ΠΎΠ΄Π΅ Π±Ρ‹ Π½ΠΈΡ‡Π΅Π³ΠΎ слоТного. Но Ссли сайт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

НиТС описан Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½Ρ‹ΠΉ способ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹.

HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° максимально проста:

Высота шапки фиксированная, добавляСм text-align: justify, для Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов:

ДобавляСм display: inline-block для всСх элСмСнтов nav, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΡ… Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ:

Π§Ρ‚ΠΎΠ±Ρ‹ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ text-align: justify Ρ€Π°Π±ΠΎΡ‚Π°Π», ΠΊΠ°ΠΊ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСбольшой Ρ‚Ρ€ΡŽΠΊ с псвСдоэлСмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» Π½Π°ΠΉΠ΄Π΅Π½ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Perfectly justified CSS grid technique using inline-block, Π°Π²Ρ‚ΠΎΡ€ Jelmer de Maat:

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π’ ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π±Π΅Π· использования float ΠΈ position:absolute. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ элСмСнтов ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. ΠŸΡ€ΠΈ использовании vertical-align для элСмСнтов nav Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ ΠΎΡ‚ высоты Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° β€” шапки. А это Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования vertical-align: top ΠΈ vertical-align: middle Π½Π° jsbin. НиТС прСдставлСн Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ способ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ выравнивания.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ снова псСвдоэлСмСнты. ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠ· ΡΡ‚Π°Ρ‚ΡŒΠΈ Centering in the Unknown, упомянутый MichaΕ‚ Czernow:

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получаСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ:

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

ΠžΡΡ‚Π°Π»ΠΎΡΡŒ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Π΄Π²Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ: ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ большом количСствС тСкста Π² шапкС ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ. Если Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ сайта Π±ΡƒΠ΄Π΅Ρ‚ слишком Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ, вСрстка Π½Π°Ρ‡Π½Π΅Ρ‚ ΡΡŠΠ΅Π·ΠΆΠ°Ρ‚ΡŒ:

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚Ρ€ΡŽΠΊ с псСвдоэлСмСнтом Π½Π° header:

Выглядит Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅:

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ адаптивности. Π•ΡΡ‚ΡŒ нСсколько способов Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой Π·Π°Π΄Π°Ρ‡ΠΈ, ΠΌΠΎΠΆΠ½ΠΎ просто Π½Π΅ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ высоту шапкС, ΠΈ всС Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ высотС. ΠŸΡ€ΠΈ этом Π½Π΅ потрСбуСтся Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ‚Ρ€ΡŽΠΊ с псСвдоэлСмСнтами, ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° jsbin.

Если ΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ высоту шапки, Ρ‚ΠΎ придСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ‚Ρ€ΡŽΠΊ с псСвдоэлСмСнтами, ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ media query для экранов Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ²:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π΅Π½ ΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах выглядит Ρ‚Π°ΠΊ:

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ 820px для наглядности, Π½Π° ΠΆΠΈΠ²ΠΎΠΌ сайтС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, Π² соотвСтствии с трСбованиями. Для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Internet Explorer 8 Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ вмСсто β€œ::” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ β€œ:” для псСвдоэлСмСнтов.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

ВСрстка шапки β€” header, классы, сСлСкторы ΠΈ свойства Π² CSS

Листинги ΠΊΠΎΠ΄Π° ΡƒΡ€ΠΎΠΊΠ°

Листинг ΠΊΠΎΠ΄Π° β€” это просто ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ пСрСнСсти Π² Π’Π°Ρˆ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. НиТС Π±ΡƒΠ΄ΡƒΡ‚ прСдставлСны листинги ΠΊΠΎΠ΄Π° Ρ„Π°ΠΉΠ»ΠΎΠ² index.html ΠΈ style.css.

index.html:

style.css:

Начало ΡƒΡ€ΠΎΠΊΠ°. Π Π°Π·Π±ΠΎΡ€ Ρ„Π°ΠΉΠ»Π° index.html

Π’ index.html ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌ ΡƒΡ€ΠΎΠΊΠΎΠΌ измСнилось Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ. Π― Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ» послС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

На вашСм сайтС Π² Π±ΡƒΠ΄Π΅Ρ‚ вся красная Π²Π΅Ρ€Ρ…ΡƒΡˆΠΊΠ°, ΠΊΠ°ΠΊ Π½Π° imdiz.ru/store/:

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° для header я Π·Π°Π΄Π°Π» свойством background Π² style.css. Если Π’Ρ‹ Π΅Ρ‰Π΅ Π½Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π»ΠΈ Ρ„Π°ΠΉΠ» style.css Π² SublimeText, Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅.

БСйчас Ρƒ Вас Π² SublimeText ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎ 2 Ρ„Π°ΠΉΠ»Π°: index.html ΠΈ style.css. Для удобства сдСлайтС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅: Π²Π²Π΅Ρ€Ρ…Ρƒ SublimeText Π½Π°ΠΆΠΌΠΈΡ‚Π΅ View, Π² Π²Ρ‹ΠΏΠ°Π²ΡˆΠ΅ΠΌ ΠΎΠΊΠ½Π΅ Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ Π½Π° Layout, ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚Π°ΠΌ Columns: 2. Π’Π°Ρˆ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ раздСлится Π½Π° 2 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Ρ€Π°Π·Π½Ρ‹Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ…. Π’Π°ΠΊ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ сразу ΠΎΠ±Π° Ρ„Π°ΠΉΠ»Π°. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π²ΠΈΠ΄Π΅ΠΎ:

Π Π°Π·Π±ΠΎΡ€ Ρ„Π°ΠΉΠ»Π° style.css

Π Π°Π·Π±Π΅Ρ€Π΅ΠΌ Ρ„Π°ΠΉΠ» style.css ΠΈ Π·Π°ΠΎΠ΄Π½ΠΎ познакомимся с CSS.

Π‘ΠΏΠ΅Ρ€Π²Π° пропустим Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ участку:

Говоря ΠΏΠΎ-русски, благодаря этому ΠΊΠΎΠ΄Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π² index.html Ρ‚Π΅Π³ с классом header ΠΈ задаст этому Ρ‚Π΅Π³Ρƒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° #cb2d41 ΠΈ высоту 100px.

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎ-ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½ΠΈΠΆΠ΅, Π½Π° Π½Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π° структура стилСй Π² CSS:

ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠΎΠ΄ шапки сайта html css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΠ΄ шапки сайта html css. Π€ΠΎΡ‚ΠΎ ΠΊΠΎΠ΄ шапки сайта html css

#cb2d41 β€” Ρ‚Π°ΠΊΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ задания Ρ†Π²Π΅Ρ‚Π° называСтся HEX. Π­Ρ‚ΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ частый Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π² вСрсткС сайтов. Π¦Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ просто английским словом, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, background: red. Но Ρ‡Π°Ρ‰Π΅ (Π° Ρ‚ΠΎΡ‡Π½Π΅Π΅, практичСски всСгда) примСняСтся ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ HEX.

Π’ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ вСрсткС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСлСктор класса это ΠΏΠΎΡ‡Ρ‚ΠΈ стандарт, ΠΈ Π½ΡƒΠΆΠ½ΠΎ всСгда ΡΡ‚Π°Ρ€Π°Ρ‚ΡŒΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ сСлСктор класса.

ΠŸΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ стилСй Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π² Π’Π°ΡˆΠ΅ΠΌ style.css Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ ΠΊ участку ΠΊΠΎΠ΄Π°:

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС CSS-стили Π² Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобках Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΈ для Ρ‚Π΅Π³Π° html, ΠΈ для Ρ‚Π΅Π³Π° body.

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Ρ€Π°Π²Π½ΠΎΠ·Π½Π°Ρ‡Π΅Π½ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ:

И Π΅Ρ‰Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ здСсь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ сСлСктор Ρ‚Π΅Π³Π°, Π° Π½Π΅ класса. Π’ΠΎΡ‡ΠΊΠ° ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ сСлСктора Π½Π΅ стоит.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *