Чӣ тавр истифода бурдани CSS Ҷойгиркунии тарҳҳо бе ҷадвалҳо

Забонҳои бесамарро Frontier Design тарҳрезӣ кунед

Сабабҳои зиёд вуҷуд надоранд, ки барои ҷадвал истифода баранд . Яке аз сабабҳои муассиртарине, ки одамон барои истифода бурдани онҳо мефиристанд, сабаби он аст, ки таҳияи нақшавӣ бо CSS душвор аст. Гарчанде, ки CSS-и скрипт ба варақаи таълимӣ ниёз дорад, вақте ки шумо фаҳмед, ки чӣ гуна ба кор даровардани CSS, шумо шояд дарк кунед, ки чӣ қадар осон аст. Ва баъдан шумо мефаҳмед, ки сабаби асосии дуюми маъмулӣ ба одамоне, ки барои CSS-ро истифода намебаранд, маъқул медорад. "Онро зудтар нависед." Ин зудтар, чунки шумо ҷадвалҳоро медонед, аммо вақте ки шумо CSS -ро омӯхтаед, шумо метавонед зудтар бо он.

Дастгирии браузери пуштибонии CSS

Positioning CSS дар ҳама браузерҳои замонавӣ дастгирӣ карда мешавад . Агар шумо барои сайте барои Netscape 4 ё Internet Explorer 4 кор надоред, хонандагони шумо набояд ягон мушкилоти дидани веб-саҳифаҳои CSS-ро дошта бошанд.

Назари худро бинависед

Вақте ки шумо сайтро бо истифода аз ҷадвалҳо бунёд мекунед, шумо бояд дар шакли ҷадвал фикр кунед. Ба ибораи дигар, шумо ба мафҳуми ҳуҷайраҳо ва рутубатҳо ва сутунҳо фикр мекунед. Вебсайтҳои шумо ин равишро инъикос мекунанд. Вақте, ки шумо ба тарҳрезии танзимоти CSS кӯчидан мехоҳед, шумо саҳифаҳои худро дар асоси мундариҷа сар мекунед, зеро мундариҷа метавонад дар ҳар ҷое, ки шумо дар тарҳрезӣ мехоҳед, ҷойгир кунед, ҳатто дар болои дигар мундариҷаҳо ҷойгир кунед.

Сомонаҳои гуногун дорои сохторҳои гуногун мебошанд. Барои сохтани саҳифаҳои бомуваффақият, сохтори саҳифаҳои ягон саҳифа пеш аз он, ки мундариҷаро таъин кунед. Саҳифаи намуна метавонад панҷ фаслро дар бар гирад:

  1. Сарлавҳа . Home ба рекламаи баннерӣ, номи сайт, пайвандҳои пайванд, унвони мақола ва инчунин чандин чизҳои дигар.
  2. Сутуни рост . Ин тарафи рости саҳифа бо қуттии ҷустуҷӯ, рекламаи, қуттиҳои видеоро ва минтақаҳои тиҷоратӣ мебошад.
  3. Мундариҷа Матни мақолаҳо, пости блог ё сайти тиҷорӣ - гӯшт ва картошка аз саҳифа.
  4. Паёмҳои номатлуб . Ин реклама дар дохили мундариҷа.
  5. Пиёдагард . Навъи зеризаминӣ, маълумоти муаллиф, иттилооти ҳуқуқи муаллиф, рекламаи почтаи поёнӣ, ва алоқаҳои алоқаманд.

Ба ҷои он ки панҷ унсурҳоро дар як ҷадвал ҷойгир кунед, элементҳои HTML5 қисмҳоеро, ки қисмҳои гуногуни мундариҷаро муайян мекунанд, истифода баранд ва сипас ҷойгиркунии CSS-ро барои ҷойгиркунии унсурҳои муҳтаво дар саҳифа истифода баред.

Муайян кардани қисматҳои мундариҷа

Баъд аз он, ки шумо мавзӯъҳои мухталифи мундариҷаро муайян кардаед, шумо бояд ба HTML худро нависед. Дар ҳоле, ки шумо метавонед, одатан, қисмҳои худро дар ҳама гуна тартибот ҷойгир кунед, ин фикри хубест барои ҷойгир кардани қисмҳои муҳими саҳифаи аввал. Ин усул ба оптимизатсияи ҷустуҷӯи сӯзишворӣ мусоидат мекунад.

Барои нишон додани ҷойгиркунӣ як саҳифаро бо се сутун тасаввур кунед, вале сарлавҳаҳо ё пинҳон. Шумо метавонед мавқеи худро барои эҷоди ягон намуди тарҳро, ки шумо мехоҳед.

Барои таҳияи се сатри сутуни се қисм: сутуни чап, сутуни рост ва мундариҷа.

Ин қисмҳо бо истифода аз унсури ARTICLE барои мундариҷа ва ду элементҳои параграфӣ барои ду сутун тасвир карда мешаванд. Ҳама чиз низ дорои хусусияти муайянкунандаи он хоҳад буд. Вақте, ки шумо сим элементи худро истифода мебаред, шумо бояд барои ҳар як рамзи номи худ номбар кунед.

Мавқеи ҷойгиршавӣ

Истифодаи CSS, мавқеи IDsd-ро муайян мекунад. Маълумоти мавқеи худро дар як сабки зайл мисли чунин занг:

#content {

}}

Мундариҷа дар ин элементҳо то он даме, ки он метавонад, ба даст орад, яъне 100 фоизи паҳнои ҷойгиршавии ҷорӣ ё саҳифа. Барои таъсир ба маҳалли ҷойгиршавии қитъаи беиҷозат ба паҳнаи васеъ, иваз намудани қоғаз ва хусусиятҳои маржа.

Барои ин тарҳ, ду сутунро ба паҳншавӣ нигоҳ медоред ва сипас мавқеи худро мутлақ кунед, то ки онҳо дар куҷо дар HTML пайдо шаванд.

# сутуни чап {
мавқеъ: мутлақ;
left: 0;
width: 150px;
margin-left: 10px;
margin-top: 20px;
ранг: # 000000;
padding: 3px;
}}
# сутуни рост {
мавқеъ: мутлақ;
left: 80%;
top: 20px;
васеъ: 140px;
padding-left: 10px;
z-index: 3;
ранг: # 000000;
padding: 3px;
}}

Сипас, барои мундариҷаи мундариҷа, маржаҳоро дар тарафи рост ва чап гузоред, то мундариҷа ду сутунҳои берунаро дарбар гирад.

#content {
top: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
ранг: # 000000;
}}

Тафсили саҳифаҳои худро бо истифодаи CSS, ба ҷои сенсораи HTML, як талаффузи техникӣ каме талаб мекунад, аммо пардохти он аз услубҳои тағйирёбанда ва ҷавобгӯтар ва пас аз қабули тағйироти сохторӣ ба саҳифаи шумо баъдтар.