Сутунҳои ҷолиби ҷустуҷӯ дар саҳифаҳои веб бо нишони HR
Агар шумо бояд ба вебсайти шумо вогузор кардани уфуқӣ, сутунҳои рангинатонро дошта бошед, шумо якчанд имконот доред. Шумо метавонед файлҳои воқеии тасвироти ин хатҳоро ба саҳифаи худ илова кунед, аммо он бояд браузери шумо нусхабардорӣ ва боркунии ин файлҳоро, ки метавонад ба фаъолияти сомона таъсири манфӣ расонад, талаб кунад.
Шумо метавонед амволи CSS-ро барои илова кардани сарҳадоте истифода кунед, ки ҳамчун сатрҳо дар болои болоӣ ё поёни унсури амал мекунанд, самарабахшии хати ҷудосозии худро эҷод кунед.
Ниҳоят, шумо метавонед элементҳои HTML-ро барои қоидаҳои уфуқӣ истифода баред
Умумаи қоидаҳои уфуқӣ
Агар шумо ягон унсури веб дар саҳифа гузошта бошед, эҳтимол пайдо кардед, ки тарзи пешфарзе, ки ин рангҳо нишон медиҳанд, беҳбуд намебошанд. Ин маънои онро дорад, ки шумо бояд CSS-ро барои танзим кардани намуди визуалӣ ин унсурҳо бо мақсади он, ки чӣ гуна мехоҳед, ки сайтатонро ба назар гиред.
Тафсилоти асосии HR нишон медиҳад, ки браузер хоҳиш дорад, ки онро нишон диҳад. Браузерҳои замонавӣ маъмулан бо номҳои HR-и номаҳдуд бо паҳнои 100%, баландии 2px ва як марзи 3D дар сиёҳ сохтани хати он нишон медиҳанд.
Дар ин ҷо намунаи унсурҳои стандартии HR ё шумо метавонед дар ин акс пайдо кунед, ки чӣ тавр HR-и номаҳдуд ба браузерҳои муосир назар мекунад.
Тиреза ва баландӣ дар ҳама браузерҳо мебошанд
Нишондиҳандаҳои ягонае, ки дар саросари браузерҳо муттасил ҳастанд, васеъ ва тарҳҳо мебошанд. Инҳо муайян мекунанд, ки чӣ қадар калон аст. Агар шумо васеъ ва баландии муайян надошта бошед, варақаи овозӣ 100% ва баландии стандартики 2px аст.
Дар ин намунаи васеъ 50% унсури волидайнро қайд кунед (ин мисолҳо дар поён оварда мешаванд, ки дар ҳама шаклҳои ноутбук ҷойгиранд. Дар ҳостияти истеҳсол, ин сабтҳо дар саҳифаи берунӣ барои осонии идоракунӣ дар тамоми саҳифаҳои худ навишта мешаванд:
style = "width: 50%;">
Ва дар ин намунаи баландтарин 2ем:
style = "height: 2em;">
Тағйир додани сарҳадҳо метавонанд мушкилоти ҷиддӣ дошта бошанд
Дар браузерҳои муосир, браузер хатогиро бо роҳи танзимкунии сарҳад ташкил мекунад. Пас, агар шумо сарҳадро бо моликияти сабки дур кунед, хат дар саҳифа мемонад. Тавре ки шумо мебинед (хуб, шумо ҳеҷ чизро намебинед, ба монанди хатогиҳо намебинанд) дар ин мисол:
style = "border: none;">
Танзими андоза, ранги ранг ва таркиби он ба хати дигар назар мекунад ва дар ҳамаи браузерҳои муосир таъсири мусбат дорад. Масалан, дар ин намоиш сарҳад бо сурх, сурх ва 1px васеъ мебошад:
style = "border: 1px хомӯш # 000;">
Аммо агар шумо сарҳад ва баландии дигаргуниҳоро тағйир диҳед, нусхаҳо дар браузерҳои хеле зиѐд назар ба онҳо дар браузерҳои муосир фарқ мекунанд. Тавре ки шумо метавонед дар ин намоиш мебинед, агар шумо онро дар IE7 ва дар поён мебинед (як браузери номбурда, ки ҳоло ҳам нест шудааст ва аз ҷониби Microsoft пуштибонӣ надорад) вуҷуд дорад, ки хати дохили веб, ки дар дигар браузерҳо намоиш дода мешавад (аз он ҷумла IE8 ва боло) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Онҳое, ки браузерҳои антикиҳо дар ҳақиқат дар бораи тарҳрезии веб санатсия надоранд, азбаски онҳо аксаран бо имконоти муосир иваз карда шудаанд.
Сурати аҷоибе,
Ба ҷои ранги, шумо метавонед тасвири заминаро барои HR-и худ муайян кунед, то ки он назар ба шумо мехоҳед онро ба назар гиред, лекин дар як ҳолат дар аломати худ намоиш дода мешавад.
Дар ин мисол мо тасвиреро истифода бурдем, ки аз се хатҳои зада. Бо тасвири он ҳамчун тасвири заминавӣ бо такрор такрор нашавед, он мундариҷаеро, ки қариб ки шумо дар китобҳо мебинед, меорад:
style = "height": 20px; background: #fff url (aa010307.gif) ягон маркази пайравӣ; сарҳад: none; ">
Тағир додани ашёи ХР
Бо CSS3, шумо низ метавонед хатҳои худро бештар шавқовар кунед. Элементҳои HR одатан як уфуқи уфуқӣ , вале бо тағйирёбии CSS, шумо метавонед онҳоро тағйир диҳед. Трансформатсияи дӯстдоштаи интернетии HR ин тағйиротро тағйир медиҳад.
Шумо метавонед унсури HR-ро тағир диҳед, то ки он диапазони каме бошад:
{оким {
-Моз-трансформатор: rotate (10deg);
-вебкит-табдил: rotate (10deg);
-o-табдил: rotate (10deg);
-сомона-табдил: rotate (10deg);
табдил: тағирёбанда (10deg);
}}
Ё шумо метавонед онро тағир диҳед, то ки он тамоман бесамар аст:
{оким {
-мози-трансформатор: rotate (90deg);
-вебкит-табдил: rotate (90deg);
-o-табдил: rotate (90deg);
-сомона-табдил: rotate (90deg);
тағирёбанда: гардиш (90deg);
}}
Дар хотир доред, ки ин HR-ро дар асоси макони ҷорӣ дар ҳуҷҷат бармегардонад. Барои ҳамин, ба шумо лозим аст, ки ҷойгиркунии онро ба куҷо бардоред. Ин тавсия намедиҳад, ки ин хаторо ба тарҳрезии амудӣ илова кунед, аммо он роҳи ба даст овардани ҷолиби ҷолиб аст.
Дигар роҳи ба даст овардани саҳифаҳои шумо
Як чизест, ки баъзе одамон ба ҷои истифодаи элементҳои HR ба кор бурдани сарҳадҳои унсурҳои дигар такя мекунанд. Аммо баъзан як HR хеле осон ва осон аст, ки аз кӯшиши сохтани сарҳадҳо истифода баранд. Масъалаҳои қуттии намунавии якчанд браузерҳо метавонанд сарҳадро ҳатто душвор созанд.