Ang "header", o ang tuktok ng web page, ay natatangi sa iyong site, pinapayagan itong mag-iba sa iba at ipakita ang mga detalye ng iyong proyekto sa Internet. Sa tulong ng isang orihinal at mahusay na pag-header, maaari mong palamutihan at pinuhin ang anumang web page, at upang gawin ang header sa iyong sarili, kailangan mong malaman kung paano i-layout ang elementong ito ng web.
Panuto
Hakbang 1
Kung nais mo ang iyong site na magkaroon ng mga static, pare-pareho na sukat, kailangan mong lumikha ng isang static na header na hindi nagbabago depende sa pagbabago sa lapad ng screen. Tukuyin ang lapad at taas ng header (halimbawa, 996x230) at ipasok ang isang imahe sa background sa tuktok na bloke gamit ang sumusunod na CSS code, kung saan ang header-1.jpg
background: # a6b7d3 url (img / header-1.jpg) walang ulit;
lapad: 996px;
taas: 230px;
} Ang HTML code para sa isang header ng ganitong uri ay magiging ganito:
Hakbang 2
Kung ang site ay itinayo sa isang paraan na ang mga sukat nito ay nababagay sa lapad ng screen, ang header ay dapat na maging typeet na isinasaalang-alang ang lahat ng mga pangunahing resolusyon ng monitor. Ang maximum na lapad ng naturang isang header ay dapat na 1920 pixel. Upang ipasok ang ganoong header, gamitin ang CSS code: #header {background: # a6b7d3 url (img / header-2..jpg) no-repeate center; taas: 250px;} Ang HTML code sa kasong ito ay pareho sa naunang isa. Ang CSS code ay binago sa ilang mga parameter - ngayon mayroon itong isang katangian para sa pagsentro ng imahe ng header, na pinapayagan itong magkasya sa background sa anumang lapad ng screen.
Hakbang 3
Maaari ka ring lumikha ng isang mas kumplikadong header, gupitin sa maraming mga bloke ng background, na magbabago ng kanilang posisyon depende sa laki ng viewport. Ang CSS para sa naturang header ay mas kumplikado at malawak, at nagsasangkot ng paulit-ulit na maraming mga elemento ng background alinsunod sa mga lumulutang na sukat ng window ng browser kung saan maaaring matingnan ang iyong site.
