«Եզրագիր» -ը սովորաբար վեբ էջի դասավորության ամենացածր բլոկն է: Այս տողատակը տեղադրելու ամենատարածված դժվարությունն այն է, որ այն միշտ տեղադրվի պատուհանի ներքևում ՝ անկախ էջի լրիվությունից կամ զննարկչի տեսակից: Խնդրի լուծման մի քանի լուծումներ եղել են զանգվածային անցում կատարելու ժամանակաշրջանից, և դրանցից մեկը տրված է ստորև:
Դա անհրաժեշտ է
CSS- ի և HTML- ի հիմնական գիտելիքներ
Հրահանգներ
Քայլ 1
Եկեք հիմք ընդունենք էջերի դասավորության ամենատարածված սխեման `երեք բլոկներ, որոնք տեղադրված են մեկը մյուսի վրա: Վերին մասը (վերնագիրը) միշտ պետք է հավասարեցվի պատուհանի վերին սահմանին, ներքևում (ստորագիր) ՝ ներքևի եզրին, իսկ հիմնականը (մարմինը) միշտ պետք է լրացնի նրանց միջև եղած ամբողջ տարածքը: Աղբյուրի կոդը պետք է պարունակի XHTML 1.0 Անցումային ճշգրտման հղում, իսկ ոճերի նկարագրությունը պետք է տեղադրվի արտաքին CSS ֆայլում (Opera 9. XX- ի հետ կապված խնդիրներ չառաջանալու համար): Կառուցվածքի HTML նկարագիրը պետք է տեղադրվի հիմնական էջի մարմինը: Դա, իհարկե, կսկսվի վերին բլոկից, որի պիտակում պետք է տեղադրվի արժեք ունեցող նույնացուցիչ հատկանիշ, օրինակ ՝ divHead:
Վերնագրի բլոկ:
Հիմնական բլոկը պետք է բաղկացած լինի զույգ բնադրված բլոկներից: Արտաքինին կտրվի divOut նույնացուցիչը, իսկ ներքինինը ՝ divContent:
Հիմնական բովանդակություն.
Եզրագիրը դրված է divFoot- ի վրա.
Էջի էջատակ.
Քայլ 2
Էջի ամբողջական HTML կոդը պետք է ունենա այսպիսի տեսք.
Երեք բլոկ
@import "style.css";
Սա վերնագրի բլոկ է:
Հիմնական բովանդակություն.
Սա էջի էջատակն է:
Քայլ 3
Ոճի նկարագրությունը իրականացնում է դասավորության հետևյալ մեխանիզմը. Միջին բլոկը (divOut) դրված է 100% բարձրության վրա, վերին բլոկը (divHead) կունենա բացարձակ դիրքավորում, իսկ ներքևինը ՝ հարաբերական: Հիմնական բովանդակության բլոկում (divContent) վերևում պետք է լինի ազատ տարածք, որը հավասար է վերնագրի բլոկի բարձրությանը, որպեսզի այն չհամընկնի էջի հիմնական բովանդակության հետ: Իսկ ներքեւի բլոկը (տողատակ) վերևում պետք է ունենա բացասական մարժա, հավասար է այս բլոկի բարձրությանը: Սա այն կբարձրացնի զննարկչի պատուհանի ներքևի սահմանից վեր: Այս մեխանիզմը կարող է իրականացվել ՝ օգտագործելով հետևյալ բովանդակությամբ css ֆայլ ՝ * {margin: 0; լիցքավորում ՝ 0}
html, մարմին {բարձրություն ՝ 100%;} մարմին {
դիրքը ՝ հարաբերական;
գույնը `# 000;
}
#divOut {
լուսանցք ՝ 0;
min- բարձրությունը `100%;
ֆոն ՝ #FFF;
գույնը `# 000;
}
* html #divOut {բարձրությունը ՝ 100%;}
#divHead {
դիրքը ՝ բացարձակ;
ձախ: 0;
վերև ՝ 0;
լայնությունը `100%;
բարձրությունը `80px;
ֆոն `# 2F5000;
վարարում ՝ թաքնված;
տեքստի հավասարեցում. կենտրոն;
գույնը ՝ #FFF;
} #divFoot {
դիրքը ՝ հարաբերական;
պարզ: երկուսն էլ;
margin-top: -60px;
բարձրությունը `60px;
լայնությունը `100%;
ֆոնային գույն ՝ # 2F5000;
տեքստի հավասարեցում. կենտրոն;
գույնը ՝ #FFF;
}
.divContent {
լայնությունը `100%;
բոց `ձախ;
լցոնման գագաթ. 81px;
} HTML կոդում ոճաթերթի համար նշած անունն է style.css:
