Էջի դասավորության ներքևից առավելագույն հորիզոնական բլոկը հաճախ անվանում են «տողատակ»: Դրանում, ինչպես էջի մյուս բլոկներում, տեղադրվում են դիզայնի տարրեր, բայց ի տարբերություն մյուսների, հատուկ խնդիրներ հաճախ առաջանում են հենց այս կոնկրետ բլոկի տեղակայման հետ կապված: Դրանք կապված են այն բանի հետ, որ տարբեր զննարկիչներ տարբեր կերպ են հասկանում CSS լեզվի ստանդարտները, և կարող է բավականին դժվար լինել ստանդարտը զննարկիչի պատուհանի ներքևի եզրին գտնելը: Ստորև բերված է այս խնդրի լուծումներից մեկի ծածկագիրը:
Անհրաժեշտ է
CSS- ի և HTML- ի հիմնական գիտելիքներ
Հրահանգներ
Քայլ 1
Էջի սկզբնաղբյուրի հենց առաջին տողում հղում տեղադրեք XHTML 1.0 Անցումային բնութագրին.
Քայլ 2
Տեղադրեք էջի կառուցվածքի հիմնական բլոկները փաստաթղթի մարմնի ներսում (և պիտակների արանքում): Բլոկը, որի մեջ կտեղադրվի հիմնական բովանդակությունը, պետք է բաղկացած լինի երկու տեղադրված շերտերից: Օրինակ ՝ թող արտաքինն ունենա OuterDiv նույնացուցիչ, իսկ ներքինը ՝ InnerDiv:
Հենց այստեղ է լինելու էջի հիմնական բովանդակությունը:
Նրանց ետևում տեղադրեք ստորոտի բլոկ նույնացուցիչով, օրինակ ՝ FooterDiv:
Էջի էջատակ
Քայլ 3
HTML կոդի գլխավոր մասում (և պիտակների միջև) տեղադրեք արտաքին ֆայլի հղում ՝ css ոճերի նկարագրությամբ.
@import "footerStyle.css";
Քայլ 4
Հիմնական էջի կոդը պահեք html ընդլայնմամբ ֆայլում: Դա կարող է թվալ այսպես.
Սեղմված տողատակ
@import "footerStyle.css";
Հենց այստեղ է լինելու էջի հիմնական բովանդակությունը:
Էջի էջատակ
Քայլ 5
Ստեղծեք ոճաթերթի ֆայլ - պարզ տեքստային ֆայլ, որը պետք է պահպանվի css ընդլայնմամբ և HTML կոդում ձեր կողմից նշված անունով (footerStyle.css): Այս ֆայլին գրեք հետևյալ ոճի նկարագրությունները էջում օգտագործվող բլոկների համար.
* {margin: 0; լիցքավորում ՝ 0}
html, մարմին {բարձրությունը ՝ 100%;}
մարմին {
դիրքը ՝ հարաբերական;
գույնը `# 222222;
}
#OuterDiv {
լուսանցք ՝ 0;
min- բարձրությունը `100%;
ֆոն ՝ # աաաաաա;
գույնը `# 222222;
}
* html #OuterDiv {բարձրությունը ՝ 100%;}
#FooterDiv {
դիրքը ՝ հարաբերական;
պարզ: երկուսն էլ;
margin-top: -60px;
բարձրությունը `60px;
լայնությունը `100%;
ֆոնային գույն ՝ DarkBlue;
տեքստի հավասարեցում. կենտրոն;
գույնը ՝ #eeeeff;
}
. InnerDiv {
լայնությունը `100%;
բոց `ձախ;
}
