Ինչպես օգտագործել CSS- ի դիրքորոշումը `առանց աղյուսակների ստեղծելու Layouts- ը

Տախտակամած Layouts Բաց դիզայնի սահմանները

Սեղանները դասավորության համար չօգտագործելու շատ պատճառներ կան: Մարդիկ ամենատարածված պատճառներից մեկն այն է, որ նրանք շարունակելու են օգտագործել դրանք, քանի որ CSS- ի դասավորությունը դժվար է: Թեեւ CSS- ի սցենարները հանգեցնում են սովորելու կորի, երբ հասկանում եք, թե ինչպես կատարել CSS դասավորությունը, դուք կարող եք զարմանալ, թե որքան հեշտ է դա: Եվ երբ դուք սովորում եք, դուք կկատարեք երկրորդ ամենատարածված պատճառը, որ մարդիկ չեն տալիս CSS- ի օգտագործումը `« Ավելի արագ գրել սեղանները »: Դա ավելի արագ է, քանի որ դուք գիտեք սեղանները, բայց երբ դուք սովորում եք CSS- ն, դուք կարող եք լինել նույնքան արագ դրա հետ:

Browser աջակցությունը CSS դիրքավորումը

CSS դիրքավորումը լավ աջակցություն է ստանում բոլոր ժամանակակից բրաուզերում : Եթե ​​դուք չեք տեղադրել Netscape 4 կամ Internet Explorer 4-ի համար կայքը, ձեր ընթերցողները չպետք է ունենան որեւէ դժվարություն, դիտելով ձեր CSS- ի դիրքորոշված ​​վեբ էջերը:

Վերանայել, թե ինչպես եք ստեղծել մի էջ

Երբ կառուցեք սեղան օգտագործելով կայք, դուք պետք է մտածեք աղյուսակային ձեւաչափով: Այլ կերպ ասած, դու մտածում ես բջիջների, տողերի եւ սյունակների առումով: Ձեր վեբ էջերը արտացոլում են այս մոտեցումը: Երբ տեղափոխվում եք CSS դիրքորոշման նախագծում, դուք սկսում եք մտածել ձեր էջերի մասին բովանդակության տեսանկյունից, քանի որ բովանդակությունը կարող է տեղադրվել այնտեղ, որտեղ ցանկանում եք դասարանում, նույնիսկ ծածկված մյուս բովանդակության վերեւում:

Տարբեր կայքեր ունեն տարբեր կառույցներ: Օգտակար էջ կառուցելիս, նախքան տվյալ բովանդակությունը հանձնարարել տվյալ էջի կառուցվածքը գնահատել: Օրինակ էջը կարող է ընդգրկել հինգ հստակ բաժիններ.

1. Վերնագիր . Գլխավորը, բաններների գովազդը, կայքի անունը, նավիգացիոն հղումները, հոդվածի անվանումը, ինչպես նաեւ մի քանի այլ բաներ:
2. Աջ սյունակը : Սա էջի աջ կողմն է որոնման տուփով, գովազդներով, վիդեո տուփերով եւ առեւտրի տարածքներով:
3. Բովանդակություն : Հոդվածի տեքստը, բլոգային գրառումը կամ զամբյուղը, էջի մսի եւ կարտոֆիլը:
4. Inline գովազդները : Գովազդները ներկառուցված են բովանդակության մեջ:
5. Ստորագրություն : Ներքեւի նավիգացիան, հեղինակային տեղեկատվությունը, հեղինակային իրավունքի տեղեկատվությունը, ներքեւի դրոշի ազդերը եւ հարակից հղումները:

Այս հինգ տարրերը սեղանի մեջ դնելուց փոխարեն, օգտագործել HTML5 բաժնի տարրերը, սահմանելու բովանդակության տարբեր մասերը, ապա օգտագործեք CSS դիրքորոշումը բովանդակության տարրերը էջում տեղադրելու համար:

Ձեր բովանդակության բաժինների բացահայտում

Ձեր կայքի տարբեր բովանդակության տարածքները սահմանելուց հետո դուք պետք է գրեք դրանք ձեր HTML- ում: Թեեւ կարող եք, ընդհանուր առմամբ, ձեր բաժինները տեղադրել ցանկացած կարգի, լավ գաղափար է, որ ձեր էջի ամենակարեւոր մասերը տեղադրեք: Այս մոտեցումը կօգնի նաեւ որոնողական համակարգի օպտիմալացմանը:

Դիրքը ցուցադրելու համար նախատեսեք երեք սյունակ ունեցող էջ, սակայն առանց վերնագիր կամ ստորագիր: Կարող եք օգտագործել դիրքորոշումը, որը ցանկանում է ստեղծել ցանկացած տեսակի դասավորություն, որը Ձեզ դուր է գալիս:

Երեք սյունակաձեւ դասավորության համար սահմանեք երեք բաժին `ձախ սյունակ, աջ սյունակ եւ բովանդակություն:

Այս բաժինները կստեղծվեն, օգտագործելով ARTICLE տարրը բովանդակության եւ երկու սյունակների երկու հատվածի տարրերի համար: Ամեն ինչ կունենա նույնականացման հատկանիշ: Երբ օգտագործում եք id հատկությունը, դուք պետք է յուրաքանչյուր ID- ի համար յուրօրինակ անուն նշեք:

Բովանդակության տեղադրումը

Օգտագործելով CSS, սահմանեք դիրքը ձեր ID'd տարրերի համար: Պահպանեք ձեր դիրքորոշման տեղեկությունները այսպես կոչված ոճային զանգի մեջ:

#content {

}

Այս տարրերի բովանդակությունը կստանա այնքան տեղ, որքան հնարավոր է `ներկայիս գտնվելու կամ էջի լայնության 100 տոկոսը: Չափազանց ազդեցություն ունենալ հատվածի տեղակայման վրա `առանց ամրագրելով այն կայուն լայնությամբ, փոխեք լիցքավորումը կամ շերտային հատկությունները:

Այս դասավորության համար սահմանեք երկու սյունակները, որոնք ամրագրված են լայնություններով, եւ դրեք իրենց դիրքորոշումը բացարձակ, այնպես որ դրանք չեն ազդի այն տեղամասի վրա, որտեղ դրանք հայտնաբերված են HTML- ում:

# ձախ սյունակ {
պաշտոնը `բացարձակ;
ձախ `0;
լայնությունը `150px;
margin-left: 10px;
margin-top: 20px;
գույնը `# 000000;
padding: 3px;
}
# աջ սյունակ {
պաշտոնը `բացարձակ;
ձախ `80%;
վերեւ: 20px;
լայնությունը `140px;
padding-left: 10px;
z-index: 3;
գույնը `# 000000;
padding: 3px;
}

Այնուհետեւ բովանդակության տարածքի համար դրեք աջ ու ձախ կողմերը, որպեսզի բովանդակությունը չհամապատասխանի երկու դրսի սյունակներին:

#content {
վերեւ: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
գույնը `# 000000;
}

HTML- ի աղյուսակի փոխարեն CSS- ի օգտագործելով ձեր էջը որոշելը, պահանջում է մի քիչ ավելի տեխնիկական հմտություն, սակայն վճարումը հետեւում է ավելի ճկուն եւ պատասխանատու նախագծերից եւ ավելի հեշտ է ձեր էջին կառուցվածքային ճշգրտումներ կատարելուց հետո: