Շերտերի անունը վերնագրի ստորագիր է: Օգտագործելով ստորագիր պիտակը էջի վրա ստորագիր ստեղծելու համար

Ողջույն, բլոգի կայքի հարգելի ընթերցողներ: Շարունակում ենք բլոկների դասավորության թեման, որը սկսվել և շարունակվել է նախորդ երեք հոդվածներում։ Սկզբունքորեն մենք արդեն հասցրել ենք ստեղծել կայքի և՛ երկսյունանի, և՛ եռասյունանի դասավորություն, և նույնիսկ կարողացել ենք դիտարկել հեղուկ դասավորության ստեղծման նրբությունները։

Բացի այդ, վեբ կայքի դասավորության առաջին հոդվածներում () քննարկվել են վեբ վարպետության որոշ հիմնական հասկացություններ, առանց հասկանալու, որոնց նրբությունները հասկանալը բավականին դժվար կլիներ։

Այսօր մենք կփորձենք լուծել մեկ փոքր խնդիր, որը կարող է առաջանալ ավելի վաղ մեր ստեղծած դասավորության հետ: Ամենից հաճախ այս իրավիճակն առաջանում է այն մեծ մոնիտորների վրա (բարձր լուծաչափով) դիտելիս և փոքր քանակությամբ տեղեկատվություն ունեցող էջ ցուցադրելիս:

Այս դեպքում կարող է պարզվել, որ ստորագիրն էլ չի սեղմվի էկրանի ներքևի մասում, այլ կտեղակայվի գրեթե իր միջին բարձրության վրա, ինչը շատ դեպքերում տգեղ տեսք կունենա և ոչ էսթետիկորեն հաճելի:

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

Նրանք. Էջի փոքր քանակությամբ տեղեկատվության և օգտագործողի մեծ էկրանի դեպքում ստորագրի ճիշտ վարքագիծը կլինի հետևյալը.

Դա իրականացնելու համար մենք պետք է մի շարք մանիպուլյացիաներ կատարենք մեր դասավորության կոդով: Ավելին, մենք փոփոխություններ կկատարենք ոչ միայն CSS ոճի Style.css ֆայլում, այլ նաև Index.html-ում, որը պարունակում է Html կոդը և կազմում է Div բլոկները։ Բայց առաջին հերթին առաջինը:

Որպես օրինակ՝ մենք կօգտագործենք նախկինում ստեղծած վեբկայքի եռասյունակ դասավորությունը: Այս դեպքում Index.html-ը կունենա հետևյալ տեսքը.

Վերնագիր Վերնագիր Էջի բովանդակություն Էջի բովանդակություն Էջի բովանդակություն Էջի բովանդակություն Ստորագիր

Եվ հետևյալ CSS հատկությունները գրվել են Style.css ֆայլում.

Body, html ( margin:0px; padding:0px; ) #maket (լայնությունը:800px; margin:0 auto; ) #header(back-color:#C0C000;) #left(back-color:#00C0C0; լայնությունը:200px float:ձախ; (ֆոնի գույնը՝ #FFC0FF; պարզ՝ երկուսն էլ; )

Դե, դասավորությունն ինքնին այսպիսի տեսք ուներ.

Ինչպես տեսնում եք, էջատակը սեղմված չէ ներքևում և, հետևաբար, չի համապատասխանում մեր պահանջներին (այն միշտ գտնվում է ամենացածր սյունակի տակ), ուստի մենք ստիպված կլինենք ճշգրտումներ կատարել կոդի մեջ: Նույնը կարելի է անել երկու սյունակի դասավորության և ռետինե դասավորության դեպքում: Մեթոդը ունիվերսալ է.

Այսպիսով, մենք պետք է տեղափոխենք Div կոնտեյները ստորագրի հետ էկրանի ներքևի մասում: Դա անելու համար նախ պետք է ամբողջ էջի բարձրությունը սահմանել հարյուր տոկոսով (այն կզբաղեցնի ողջ էկրանը): Դա անհրաժեշտ կլինի, որպեսզի այնուհետև փոխվի հիմնական բլոկի չափը դասավորությամբ մինչև 100%:

Կայքի էջի ամբողջ բովանդակությունը տեղադրվում է բացվող և փակվող Body պիտակներում, և, հետևաբար, մենք պետք է Style.css-ում ավելացնենք մեկ այլ CSS հատկություն Body թեգի համար՝ սահմանելով բարձրությունը 100%:

Body, html ( լուսանցք՝ 0px; ներդիր՝ 0px; բարձրություն՝ 100%; )

Միացված է տեսքըՍա դեռ որևէ ազդեցություն չի ունենա, բայց այժմ հիմնական բլոգը կարող է ձգվել մինչև էկրանի ամբողջ բարձրությունը: Նրանք. դա մի տեսակ նախապատրաստական ​​փուլ էր։

Հիմնական CSS հատկությունները, ցանկության դեպքում, կարող եք նայել. Այժմ եկեք սահմանենք կոնտեյների Div-ը, որը պարունակում է մեր ամբողջ դասավորությունը 100% նվազագույն բարձրության վրա:

Ուզում եմ նաև ընդգծել այն (div with id="maket"): Դա անելու համար ես դրան շրջանակ կտամ՝ օգտագործելով համապատասխան Border() հատկությունը.

Եզրագիծը. պինդ 3px սև հատկությունը թույլ է տալիս այս կոնտեյների համար սահմանել պինդ եզր (պինդ) 3 պիքսել սև գույնով: Սա թույլ կտա ձեզ հստակ տեսնել, որ դասավորությամբ բեռնարկղը ձգվել է էկրանի ամբողջ բարձրության վրա, նույնիսկ էջի փոքր քանակությամբ տեղեկատվության դեպքում.

Այժմ մենք պետք է հանենք ստորագրի բլոկը ընդհանուր տարայից և տեղադրենք այն ներքևում՝ ընդհանուրից անմիջապես հետո: Ի՞նչ կտա սա։ Եվ այն, որ, վերջապես, դասավորության ստորագիրն իջնի ներքև և, ինչպես նախկինում, չի սեղմվի դրա ամենաերկար սյունին: Այս դեպքում Index.html-ը կունենա հետևյալ տեսքը.

Վերնագիր Վերնագիր Ձախ սյունակ Մենյու Մենյու Մենյու Մենյու Աջ սյունակ Մենյու Մենյու Մենյու Մենյու Մենյու Էջի բովանդակություն Էջի բովանդակություն Բովանդակություն Ստորատակ

Խնդրում ենք նկատի ունենալ, որ ստորագիր ունեցող բլոկն այլևս տեղակայված չէ ընդհանուր կոնտեյների (maket) ներսում, հետևաբար դրա լայնությունն այլևս չի կարգավորվում Style.css ֆայլում maket-ի համար նախատեսված CSS հատկություններով: Ստորագրի լայնությունը կձգվի ամբողջ էկրանով, բայց այն դեռ կտեղակայվի էկրանի ներքևի մասում, անմիջապես հիմնական բլոկի տակ.

Բայց նորից խնդիր է առաջանում, քանի որ ստորագիր տեսնելու համար այժմ պետք է բրաուզերում ոլորել էկրանը (տե՛ս ոլորման սանդղակը վերևի նկարում)։

Դա տեղի է ունենում այն ​​պատճառով, որ հիմնական կոնտեյները (մաքեթը) զբաղեցնում է էկրանի ողջ բարձրությունը (սա որոշվում է min-height հատկությամբ՝ 100%), իսկ էջատակը գտնվում է անմիջապես դրա հետևում, և այն դիտելու համար պետք է ոլորել, որը շատ հարմար և ֆունկցիոնալ չէ:

Դուք կարող եք լուծել այս խնդիրը՝ ստորագրի հետ Div կոնտեյների համար բացասական լիցք դնելով, որպեսզի այն շարժվի դեպի վեր իր բարձրությանը հավասար հեռավորությամբ: Այս դեպքում ստորագրի կոնտեյները կհամընկնի հիմնականի հետ և կտեղավորվի բրաուզերի էկրանի բարձրության մեջ (այսինքն՝ այն դիտելու համար ձեզ հարկավոր չէ ոլորել):

Բայց վերևից բացասական փոխհատուցում սահմանելու համար դուք պետք է իմանաք ստորագրի հենց այս բարձրությունը, բայց մենք դա դեռ չգիտենք:

Հետևաբար, նախ մենք կսահմանենք ստորագիր պարունակող կոնտեյների բարձրությունը՝ Style.css-ում համապատասխան հատկությունը սահմանելով.

#footer (ֆոնի գույնը՝ #FFC0FF; պարզ՝ երկուսն էլ; բարձրությունը՝ 50px; )

Եվ այնուհետև մենք դրա համար վերևում սահմանում ենք բացասական լուսանցք՝ իր բարձրությանը հավասար բարձրության վրա.

Սա թույլ կտա ստորոտին ճիշտ բարձրանալ մինչև իր բարձրությունը և դրանով իսկ տեղավորվել դիտարկիչի էկրանին (այժմ մենք կարող ենք հեռացնել CSS հատկության եզրագիծը. պինդ 3px սև՝ maket կանոնից, որպեսզի եզրագծի հաստությունը չխանգարի մեր ամբողջ դասավորությունը, ներառյալ էջատակը, էկրանի բարձրության վրա տեղադրվելուց):

Ինչպես տեսնում եք, այժմ ոլորման սանդղակը չի երևում բրաուզերում, և մեր ամբողջ եռասյունանի բլոկների վրա հիմնված կայքի դասավորությունը տեղավորվում է մեկ էկրանի վրա (եթե էջի վրա քիչ տեղեկատվություն կա) և ունի ստորագիր, որը գտնվում է հենց ներքևում: . Ինչը հենց այն է, ինչ մենք պետք է անեինք:

Բայց խնդիր է առաջանում, որը կհայտնվի միայն այն ժամանակ, երբ դասավորության էջում ավելի շատ տեղեկատվություն կա, և կարող է առաջանալ հետևյալ իրավիճակը.

Պարզվում է, որ կարող է իրավիճակ առաջանալ, երբ դասավորության սյունակներից մեկի տեղեկատվությունը համընկնում է ստորագրի հետ, ինչը գեղեցիկ տեսք չի ունենա։ Դա տեղի է ունենում տխրահռչակ բացասական լիցքի պատճառով, որը մենք դրել ենք դրա համար, և որն օգնեց բարձրացնել մեր նկուղը հիմնական դասավորության կոնտեյների դեմ:

Նրանք. Պարզվում է, որ էկրանի ներքևի մասում նկուղային տարածքում երկու բլոկներ են, որոնք համընկնում են միմյանց:

Այս խնդրի լուծումը նոր դատարկ Div կոնտեյներ (այսպես կոչված, spacer) ավելացնելն է մեր դասավորության (maket) հիմնական կոնտեյների մեջ, այն տեղում, որտեղ նախկինում գտնվում էր ստորագիր ունեցող բլոկը։

Այս նոր բեռնարկղը դնելով ստորագրի բարձրությանը հավասար բարձրության վրա՝ մենք կարող ենք խուսափել հիմնական կոնտեյների տեղեկատվության բախումից էջատակի հետ բլոկի հետ: Եկեք վերագրենք ID () այս բեռնարկղին, որը կոչվում է Rasporka, և արդյունքում մեր երեք սյունակ դասավորության Index.html-ը կունենա հետևյալ տեսքը.

Վերնագիր Վերնագիր Ձախ սյունակ Մենյու Մենյու Մենյու Աջ սյունակ Մենյու Մենյու Մենյու Մենյու Էջի բովանդակություն Էջի բովանդակություն Էջերի բովանդակություն Էջեր Էջեր Էջեր Էջեր Էջեր

Իսկ Style.css-ում մենք կգրենք դրա համար ( , որը սահմանում է այս spacer կոնտեյների բարձրությունը հավասար նկուղի բարձրությանը.

#rasporka (բարձրությունը՝ 50px; )

Արդյունքում էջատակը ներքևից կսեղմվի ոչ թե հիմնական կոնտեյների մեջ պարունակվող տեղեկատվությանը (օրինակ՝ ամենաբարձր սյունակում գտնվող տեքստին), այլ այն տարածքի վրա, որը հավասար է էջատակի բարձրությանը, առանց որևէ տեղեկություն պարունակող միջադիր կոնտեյների։ .

Այս կերպ մենք խուսափում ենք մեր եռասյուն դասավորության բախումներից և աղավաղումներից: Ամեն ինչ պարզ և գեղեցիկ կլինի (նուրբ և վեհ).

Ինչպես վերևում նշեցի, ստորագրի լայնությունը այժմ պետք է առանձին դրվի, քանի որ... այս տարան այլևս հիմնականի մաս չէ: Դա անելու համար դուք պետք է ավելացնեք Footer-ի լրացուցիչ հատկությունները CSS ֆայլում, ինչը թույլ կտա սահմանել դրա լայնությունը և այն հորիզոնական հարթեցնել էկրանի մեջտեղում:

Իմաստ ունի լայնությունը հավասարեցնել ամբողջ դասավորության լայնությանը, օգտագործելով Width հատկությունը, և հորիզոնական հավասարեցումը կարող է կատարվել այնպես, ինչպես մենք արեցինք ամբողջ դասավորության համար բլոկի դասավորության վրա:

Այսպիսով, մենք պետք է ավելացնենք լրացուցիչ հատկություններ ID Footer-ի համար.

#footer (ֆոնի գույնը՝ #FFC0FF; պարզ՝ երկուսն էլ; բարձրությունը՝ 20px; լուսանցք՝ վերև՝ -20px; լայնությունը՝ 800px; լուսանցք-ձախ՝ ավտոմատ; լուսանցք-աջ՝ ավտոմատ; )

Օգտագործելով width:800px հատկությունը, լայնությունը սահմանվում է 800 պիքսել, իսկ օգտագործելով երկու հատկություն լուսանցք-ձախ՝ auto և margin-right: auto, ներքևի ձախ և աջ հատվածում ներքևի կարգավորումը ինքնաբերաբար սահմանվում է. որոնց այս հատվածները հավասար կլինեն, և մեր հերոսը կհավասարեցվի միջինին.

Դե, թվում է, թե ոչինչ չի մնացել բարելավելու, բայց դա այդպես չէր: Ինչպես միշտ, մեր սիրելի զննարկիչ Internet Explorer 6-ը ինչ-որ բան չի հասկանում մեր օգտագործած CSS հատկություններից: Այս զննարկիչում (և, հնարավոր է, նաև մի քանի այլ հին զննարկիչներում), չնայած մեր բոլոր ջանքերին, էջատակը չի սեղմվի դեպի ներքև, բայց դեռևս կմնա կայքի դասավորության ամենաբարձր սյունակում։

Այս ամենը տեղի է ունենում, քանի որ ( չի հասկանում min-height: 100% հատկությունը, որը մենք օգտագործել ենք հիմնական բլոկի նվազագույն բարձրությունը հավասար էկրանի բարձրությանը սահմանելու համար։

Հետևաբար, այս խնդիրը լուծելու համար մենք ստիպված կլինենք օգտագործել այսպես կոչված հաքեր, որը թույլ է տալիս մեզ բացատրել (մեր մատների վրա) հին բրաուզերներին, թե ինչ անել: Նախկինում ցուցակ CSS maket-ի հատկությունները ձեզ հարկավոր է տեղադրել հետևյալ համակցությունը.

* html #maket (բարձրությունը՝ 100%; )

Այս կանոնը կկիրառվի միայն Ինտերնետ բրաուզեր Explorer 6, մնացածը դա հաշվի չի առնի ու կիրականացնի։

Այսպիսով, Style.css-ի վերջնական տեսքը էկրանի ներքևի մասում սեղմված էջատակով կլինի հետևյալը.

Body, html ( լուսանցք: 0px; լիցք: 0px; բարձրություն՝ 100%; ) * html #maket (բարձրությունը՝ 100%; ) #maket ( լայնությունը՝ 800px; լուսանցք՝ 0 ավտոմատ; min-բարձրությունը՝ 100%; ) # վերնագիր (ֆոնի գույնը:#C0C000; ) #left(ֆոնի գույնը:#00C0C0; լայնությունը:200px; float:ձախ; ) #աջ(լայնությունը:200px; ֆոնի գույնը:#FFFF00; float:աջ;) #բովանդակություն (ֆոնի գույնը՝#8080FF; լուսանցք-ձախ՝ 202px; լուսանցք-աջ՝202px; ) #footer(ֆոնի գույնը՝#FFC0FF; պարզ՝ երկուսն էլ; բարձրությունը՝ 50px; լուսանցք-վերևում՝-50px; լայնությունը՝800px; լուսանցք-ձախ: auto margin-աջ: auto) #rasporka (բարձրությունը՝ 50px;)

Դե, Index.html-ի վերջնական ձևը տրվել է հենց վերևում: Ահա և վերջ, հոդվածների այս շարքը, որը նվիրված է 2 և 3 սյունակների ֆիքսված և հեղուկ կայքէջերի դասավորության արգելափակմանը, կարելի է համարել ամբողջական:

Կարող եք նաև դիտել «Աշխատանք Html div պիտակի հետ» տեսանյութը.

Հաջողություն ձեզ: Կհանդիպենք շուտով բլոգի կայքի էջերում

Ձեզ կարող է հետաքրքրել

Բլոկի դասավորություն - Կայքի համար մենք ստեղծում ենք երկսյունակ, եռասյուն և հեղուկ դասավորություններ
DiV դասավորություն - Ստեղծեք բլոկներ HTML-ում երկու սյունակ դասավորության համար, որոշեք դրանց չափերը և սահմանեք դիրքավորումը CSS-ում

Հիշում եմ, որ այն պահին, երբ ես սկսեցի աղյուսակներից անցնել div դասավորության, դժվարություններից մեկը, որին հանդիպեցի, հետևյալն էր. ինչպես սեղմել կայքի էջատակը բրաուզերի պատուհանի հենց ներքևում, որպեսզի էջը ձգված թվա: ամբողջ բարձրությունը՝ անկախ տեքստի ծավալից, և եթե էջի բարձրությունը ավելի մեծ է, քան զննարկիչի պատուհանի բարձրությունը (երբ հայտնվում է ոլորում), էջատակը կմնա իր ճիշտ տեղում։

Եթե ​​աղյուսակների օգնությամբ այս խնդիրը լուծվում է միայն սեղանի և/կամ դրանում տեղադրված բջիջի բարձրությունը նշելով, ապա երբ. օգտագործելով CSSբլոկի դասավորությունը բոլորովին այլ մոտեցում է օգտագործում:

Պրակտիկայի ընթացքում ես հայտնաբերեցի 5 եղանակ՝ ստորագիրն ուղղելու դեպի բրաուզերի պատուհանի ներքևի մասը՝ օգտագործելով CSS:

Բոլոր ներկայացված մեթոդների HTML կոդը ունի հետևյալ կառուցվածքը (տարբերությունը միայն CSS կոդը է).

Ստորև բերված CSS կոդը ներառում է միայն այն հատկությունները, որոնք նվազագույն անհրաժեշտ են համապատասխան մեթոդի իրականացման համար: Նրանցից յուրաքանչյուրի համար կարող եք տեսնել կենդանի օրինակ:

Footer-ը սեղմվում է ներքև՝ բացարձակապես տեղադրելով այն և ձգելով մայր բլոկների բարձրությունը (html, մարմին և .wrapper) մինչև 100%: Այս դեպքում, բովանդակության block.content-ը պետք է նշի ներքևի լուսանցք, որը հավասար է կամ ավելի մեծ, քան ստորագրի բարձրությունը, հակառակ դեպքում էջատակը ծածկելու է բովանդակության մի մասը:

* ( լուսանցք՝ 0; լիցք՝ 0; ) html, կորպուս ( բարձրություն՝ 100%; ) .փաթաթում ( դիրքը՝ հարաբերական; րոպե բարձրություն՝ 100%; ) .բովանդակություն ( padding-ներքև՝ 90 px; ) .footer ( դիրքը բացարձակ՝ 0;

Էջատակը սեղմվում է ներքև՝ քաշելով բովանդակության բլոկը և դրա «ծնողներին» մինչև զննարկիչի պատուհանի ամբողջ բարձրությունը և վերև բարձրացնելով էջատակը բացասական լուսանցքի միջով (լուսանցք-վերևում)՝ ազատվելու հայտնվող ուղղահայաց ոլորումից: IN այս դեպքումԱնհրաժեշտ է նշել նկուղի բարձրությունը, և այն պետք է հավասար լինի ներքևի չափին։

* ( լուսանցք՝ 0; լիցք՝ 0; ) html, կորպուս, .փաթաթան (բարձրությունը՝ 100%; ) .բովանդակություն ( տուփի չափսը՝ եզրագծային տուփ; min-բարձրությունը՝ 100%; ներքևի մաս՝ 90px; ) . ստորագիր (բարձրությունը՝ 80px; լուսանցքի վերևը՝ -80px; )

«Box-sizing: border-box» հատկության շնորհիվ մենք թույլ չենք տալիս, որ .content դասի տուփը գերազանցի 100% բարձրությունը: Այսինքն, այս դեպքում min-height: 100% + padding-bottom: 90px հավասար է բրաուզերի պատուհանի բարձրության 100%-ին:

Դա լավ է, քանի որ, ի տարբերություն այլ մեթոդների (բացառությամբ 5-րդի), ստորագրի բարձրությունը նշանակություն չունի։

* ( լուսանցք՝ 0; լիցք՝ 0; ) html, կորպուս (բարձրություն՝ 100%; ) .փաթաթա (ցուցադրում՝ աղյուսակ; բարձրություն՝ 100%; ) .բովանդակություն (ցուցադրում՝ աղյուսակ-տող; բարձրություն՝ 100%; )

Այստեղ մենք ընդօրինակում ենք աղյուսակի վարքագիծը՝ .wrapper բլոկը վերածելով աղյուսակի, իսկ .content բլոկը՝ սեղանի տողի (ցուցադրում՝ համապատասխանաբար՝ աղյուսակ և ցուցադրում՝ աղյուսակի տողի հատկություններ): Դրա շնորհիվ, և այն փաստը, որ .content բլոկը և նրա բոլոր հիմնական կոնտեյներները սահմանված են 100% բարձրության վրա, բովանդակությունը ձգվում է մինչև իր ամբողջ բարձրությունը՝ հանած ստորագրի բարձրությունը, որը որոշվում է ավտոմատ կերպով. սեղանի էմուլյացիան թույլ չի տալիս էջատակի երկարացումը: բրաուզերի պատուհանի բարձրությունից այն կողմ:

Արդյունքում ստորոտը սեղմվում է դեպի ներքև:

Այս մեթոդը նման չէ նախորդներից որևէ մեկին, և դրա յուրահատկությունը CSS ֆունկցիայի calc() և vh չափման միավորի օգտագործումն է, որոնք աջակցվում են միայն ժամանակակից բրաուզերների կողմից։ Այստեղ դուք պետք է իմանաք նկուղի ճշգրիտ բարձրությունը:

* ( լուսանցք՝ 0; լիցքավորում՝ 0; ) .բովանդակություն ( min-բարձրություն՝ հաշվարկ (100vh - 80px); )

100vh-ը դիտարկիչի պատուհանի բարձրությունն է, իսկ 80px-ը՝ ստորագրի բարձրությունը: Եվ օգտագործելով calc() ֆունկցիան, մենք առաջինից հանում ենք երկրորդ արժեքը՝ դրանով իսկ սեղմելով էջատակը դեպի ներքև։

Դուք կարող եք պարզել, թե որ բրաուզերներն են աջակցում calc()-ին և vh-ին caniuse.com-ում՝ օգտագործելով հետևյալ հղումները՝ calc() ֆունկցիայի աջակցություն, vh միավորի աջակցություն:

Սա լավագույն միջոցըբոլոր ներկայացվածներից, սակայն այն աշխատում է միայն ժամանակակից բրաուզերներ. Ինչպես երրորդ մեթոդում, ստորագրի բարձրությունը նշանակություն չունի։

* ( լուսանցք՝ 0; լիցք՝ 0; ) html, կորպուս (բարձրություն՝ 100%; ) .փաթաթան (ցուցադրում՝ ճկուն, ճկուն ուղղություն՝ սյունակ, նվազագույն բարձրություն՝ 100%; ) .բովանդակություն ( ճկունություն՝ 1 0 ավտոմատ ;) .footer ( flex: 0 0 auto; )

Դուք կարող եք իմանալ բրաուզերի աջակցության մասին flex հատկության համար:

Սա ինչ-որ մղձավանջ է: Ինչու՞ է ձեր կայքի էջատակը նորից «բացվում» և փոխում դիզայնը: Իսկապե՞ս անհնար է ինչ-որ բանով էջատակը ճիշտ սեղմել էջի ներքևի մասում: Բովանդակություն կամ աղյուսներ առնվազն: Աղյուսը չի՞ տեղավորվի մոնիտորի մեջ:

Տեսնում եմ, հետո նստիր ու ոչինչ չանես, քանի դեռ չես կարդում մեր հոդվածը մինչև վերջ։

Կայքերի շատ սեփականատերեր բախվում են այս խնդրին, երբ էջի ստորագիրն ուղղակի լողում է դեպի վերև: Եվ հետո պարզ չէ, թե ինչ անել: Ամենից հաճախ վեբ կայքերի ձևավորումները, որոնք հավաքվում են շտապում, ինքնուրույն (շրջեք «խելագար ձեռքերը») կամ սկսնակ վեբ վարպետների կողմից, տուժում են այս թերությունից:

Միևնույն ժամանակ, ոչ մի սարսափելի բան տեղի չի ունենում կայքի կյանքի առաջին փուլերում: Եվ այս իդիլիան շարունակվում է այնքան ժամանակ, քանի դեռ բովանդակությունը «իր կշիռը» դնում է նկուղի վրա՝ թույլ չտալով վեր բարձրանալ։ Բայց արժե էջի վրա ավելի փոքր ծավալի նյութեր տեղադրել, և վերջերս «հանգիստ» ստորագիրն անմիջապես բարձրանում է վերև՝ բերելով կայքի ամբողջ դիզայնը ոչ պատշաճ տեսքի:

Նախագծված կաղապարի այս «թերությունը» վերացնելու համար հարկավոր չէ գումար ծախսել վեբ վարպետի ծառայությունների վրա։ Ամենից հաճախ կայքի էջատակը կարող է տեղադրվել ինքներդ: Եկեք ամեն ինչ դիտարկենք հնարավոր տարբերակներըԱյս խնդիրը լուծելու համար.

Էջի ներքևի մասում ստորագիր ամրացնելու առաջին ձևը հիմնված է CSS-ի վրա: Սկսենք օրինակի կոդից, այնուհետև ավելի մանրամասն նայենք դրա իրականացմանը.

html ( բարձրություն՝ 100%; ) վերնագիր, նավարկություն, բաժին, հոդված, մի կողմ, էջատակ ( ցուցադրում՝ բլոկ; ) մարմին ( բարձրություն՝ 100%; ) #փաթաթան ( լայնություն՝ 1000 px; լուսանցք՝ 0 ավտոմատ, րոպե բարձրություն՝ 100 %; բարձրություն՝ ավտոմատ !կարևոր է; բարձրություն՝ 100% );

Ստորագիրն էջի ներքևի մասում ամրացնելու համար պիտակը տեղափոխեցինք տարայից դուրս (շերտի փաթաթան): Մենք ամբողջ էջը և «մարմնի» պարունակությունը ձգում ենք էկրանի եզրերին: Դա անելու համար CSS կոդում մենք սահմանել ենք պիտակների բարձրությունը 100%:

html (բարձրությունը՝ 100%; ) մարմինը (բարձրությունը՝ 100%; )

Մենք նաև սահմանել ենք տարայի շերտի նվազագույն բարձրությունը 100%: Այն դեպքում, երբ բովանդակության լայնությունը մեծ է բեռնարկղի բարձրությունից, հատկությունը սահմանեք auto ։ Դրա շնորհիվ փաթաթանն ինքնաբերաբար կհարմարվի էջում տեղադրված բովանդակության լայնությանը.

#փաթաթան (min-բարձրությունը՝ 100%, բարձրությունը՝ ավտոմատ !կարևոր է, բարձրությունը՝ 100%; )

Կոդի «բարձրություն. 100%» տողը նախատեսված է IE-ի հին տարբերակների համար, որոնք չեն ընդունում min-height հատկությունը:

Էջի ձևավորման մեջ ստորագրի համար տարածություն առանձնացնելու համար մենք պիտակի համար սահմանել ենք 100 պիքսել:

#բովանդակություն (լիցք՝ 100px; )

Այս փուլում մենք ունենք ամբողջ էկրանով լայնածավալ վեբ էջ և ունի լրացուցիչ 100 պիքսել, որոնք «չեզոքացվում» են էջատակի համար լուսանցքի բացասական արժեքով (լուսանցք՝ -100px), երբ դրա դիրքը սահմանվում է հարաբերական (դիրք. հարաբերական): Այսպիսով, օգտագործելով բացասական լիցքավորման արժեք, մենք «քաշում» ենք ստորոտը տարայի տարածք, որի բարձրությունը սահմանված է 100%:

Այս օրինակում վեբ փաստաթղթի նշումը նշվում է համեմատաբար նորի միջոցով HTML պիտակներ 5, որը կարող է սխալ մեկնաբանվել հին բրաուզերների կողմից: Դրա պատճառով էջի ամբողջ դիզայնը կարող է ճիշտ չցուցադրվել: Դրանից խուսափելու համար հարկավոր է հիպերտեքստի լեզվի 5-րդ տարբերակի զինանոցից նոր պիտակները փոխարինել սովորականներով.

վերնագրի բովանդակության ստորագիր

Վերևում քննարկված մեթոդը, թե ինչպես կարելի է էջի ներքևում գտնվող ստորագիրն «անսասան» դարձնել, բոլորի համար հարմար չէ: Եթե ​​ապագայում պատրաստվում եք փոփոխել և բարելավել ձեր կայքի դիզայնը՝ թռուցիկ պատուհանների միջոցով, ապա ավելի լավ է դադարեցնել նախկին ներդրումը։

Ամենից հաճախ թռուցիկ պատուհանների իրականացման ժամանակ սեփականությունն օգտագործվում է CSS z-ինդեքս. Օգտագործելով դրա արժեքները, դուք սահմանում եք շերտերը միմյանց վրա դրված կարգը:

Որքան բարձր լինի տարրի z-ի ցուցիչը, այնքան այն կհայտնվի ընդհանուր «շերտավորման» կույտում:

Բայց քանի որ նախորդ օրինակում մենք օգտագործել ենք ներդիրի բացասական արժեք, ելնող պատուհանի ներքևի մասը կհամընկնի վերևի էջատակի տարածքի վրա: Թեև այն կունենա ավելի բարձր z-ինդեքսի արժեք: Քանի որ ելնող պատուհանի մայրը (փաթաթան) դեռևս ավելի ցածր արժեք ունի այս հատկության համար:

Ահա ավելի առաջադեմ տարբերակ.

CSS - օրինակ կոդ.

html, մարմին ( բարձրություն՝ 100%; ) .վերնագիր ( բարձրություն՝ 120px; ֆոնի գույն՝ rgb(0,255,102); ) .հիմնական ( min-բարձրություն:100%; դիրքը՝ հարաբերական; ֆոնի գույնը՝ rgb(100,255,255); ) .footer (բարձրությունը՝ 150px; դիրքը՝ բացարձակ; ձախը՝ 0; ներքևում՝ 0; լայնությունը՝ 100%, ֆոնի գույնը՝ rgb(0,0,153); )

Ինչպես երևում է ծածկագրից, մենք տեղադրեցինք էջատակը որպես հիմնական տարրի մաս: Մենք սահմանել ենք կոնտեյների հարաբերական դիրքը, իսկ ստորագրի համար բացարձակ դիրքավորումը: Մենք ամրացրել ենք նկուղը տարայի հենց ներքևում, դրա դիրքը ձախ և վերևում դնելով 0-ի:

Նախորդ իրականացումները կարող են ապահովել, որ ստորագիր միշտ գտնվում է էջի ներքևում: Բայց միայն այն դեպքում, եթե ստորագիրն ունի ֆիքսված լայնություն: Բայց ինչ անել, եթե դրանում տեղադրված բովանդակության քանակը հնարավոր չէ կանխատեսել:

Սա կպահանջի ավելի առաջադեմ տարբերակ ոչ ֆիքսված նկուղի համար: Այն իր ցուցադրման հատկության համար ստորագիր է դնում աղյուսակի տողի վրա: Դրանով այն կհայտնվի որպես աղյուսակի տող:

Եթե ​​կոշիկները ցանկացած հանդերձանքի վերջնական բաղադրիչն են, ապա էլեկտրոնային առևտրի կայքի էջատակը դրա վաճառքի դիզայնի վերջնական տարրն է: Կենտրոնանալով ներքևի տարրի՝ ստորագրի վրա՝ ժամանակակից կայքերը պատրաստ են ամեն կերպ ցուցադրել իրենց անհատականությունը: Էլեկտրոնային առևտրի մրցակցային միջավայրում բավական է օրիգինալ գաղափարներ, ստեղծագործական և դիզայնի միտումներ: Նախքան էլեկտրոնային առևտրի կայքի էջատակը դիվերսիֆիկացնելը, արժե հաշվի առնել կարևոր կետերը: Ի՞նչ տեղադրել առաջինը և որն է դա անելու լավագույն միջոցը: Ստորագրի ոգեշնչող ձևավորումների մեր ամփոփումն ունի մի քանի հետաքրքիր տարբերակներ:

Կարդացեք նաև՝ 2019 թվականի էլեկտրոնային առևտրի շուկայավարման 13 միտումներ

Հետաքրքիր վիճակագրություն Chartbeat-ից։ 25 միլիոն օգտատերերի վարքագծի ուսումնասիրությունը ցույց է տվել, թե որքան խորն են նրանք թերթում էջերը։ Պարզվում է, որ օգտատիրոջ ուշադրությունը գրավում է ծալման գծի տակ գտնվող տարածությունը։ Ստանալ ավելի գործնական օգտակար տեղեկատվություն, այցելուներն ամենաերկարը մնում են էջի վերևից 1200px տարածքում (բրաուզերում միջին 700px ուղղահայաց էկրանով) կամ երկրորդ էկրանի հետևում:

Դիտման ժամանակը (վրկ.) / Էջի վերևից հեռավորությունը (պիքսելներ)

Մեծ բաց կա առաջին և երկրորդ էկրանների դիտման տևողության մեջ։ TOP-ը 4 վայրկյան է, տեւողությունը հասնում է առավելագույնի (16 վայրկյան) 1200 պիքսել վերևից և, հետագա պտտվելով, դանդաղորեն նվազում է:

Այցելուների մասնաբաժինը (%) / Հեռավորությունը էջի վերևից (պիքսելներ)

Այցելուների մի զգալի մասը (ավելի քան 25%) չի էլ սպասում, որ բովանդակությունը բեռնվի և սկսի շրջել էջը։ Սա նշանակում է, որ միայն 75%-ն է առաջինը տեսնելու ամենաբարձր հորիզոնականները: Էջի ամենաշատ դիտվող տարածքը 550px է (հենց ծալովի գծից վեր):

Հետազոտությունը ցրում է այն առասպելը, որ օգտատերերը չեն պտտվում էջի ներքևի հատված և դիտում ամբողջ բովանդակությունը: Ստորատակը նույնպես կարևոր է ժամանակակից էլեկտրոնային առևտրի կայքի համար և նույնիսկ ունի իր առավելությունները:

Այս 10 խորհուրդները ձեզ կպատմեն, թե ինչպես կարելի է գեղեցիկ ձևավորել էջատակը՝ վեբ ձևավորման և առաջնահերթ խնդիրների լուծման կանոնների համաձայն: Կիրառեք ամենահարմար մարտավարությունը՝ բարելավելու օգտագործելիությունը, UX-ը (օգտագործողի փորձը) և նույնիսկ ավելացնել վաճառքը:

Ավանդաբար, պահանջվող կազմակերպչական և իրավական խնդիրները լուսաբանվում են կայքի ստորոտում: Ծանուցումները նախագծված են ավելի քիչ ակնառու տեքստով, որն ազատում է էջերի այլ հատվածները՝ ավելի իմաստալից տարրերի համար: Ահա մի նմուշ ցուցակ, որը պետք է հաշվի առնել.

• Հեղինակային իրավունքի ծանուցումներ
• Իրավական հերքումներ
• Վճարային տեղեկատվություն
• Cookie Ծանուցում

Ապրանքը վաճառող կայքը պետք է համապատասխանի իրավական պահանջներին և տեղեկատվություն տրամադրի ընթացակարգի և վերադարձի ժամկետների մասին: Ստորագրում նրա գտնվելու վայրը հարմար է ինչպես վաճառվող ռեսուրսի, այնպես էլ այցելուների համար:

Yves Rocher ապրանքանիշի առցանց խանութ՝ լիաէկրան ստորագիր՝ փոփոխական շերտերի հաճելի դիզայնով: Տեղեկացնում է ընկերության, վաճառող կայքի ենթակառուցվածքի մասին՝ պատվերի հետևումից մինչև անձնական տվյալների քաղաքականություն: Կան նաև ապրանքի օգտագործման խորհուրդներ, բոնուսներ, առաջխաղացումներ

Սննդային հավելումների դիլերները ենթակա են ավելի մեծ օրենսդրական պահանջների: պատասխանատվություն։ Կան բավականին շատ բաներ, որոնք նրանք պետք է / չպետք է ասեն իրենց վաճառքի կայքում: Իրավական տեղեկատվության հղումները ընդգծված են թավով ավելի լավ տեսանելիության համար:

Գեղեցիկ ֆոնային պատկերով ստորագիր շատ օրգանապես տեղավորվում է կայքի ընդհանուր ձևավորման մեջ: Չկա հստակ սահման, ավելի շուտ բովանդակությունն ինքնին ծառայում է որպես տարանջատող

Գեղեցիկ ռետրո վերնագրի և էջատակի ձևավորում ունեցող վաճառվող կայք: 100 տարվա երաշխիք նյութի և հարդարման թերությունների դեմ: Վերադարձի պայմանները ուղեկցվում են հետաքրքիր պատմություններ... ամեն ինչ այնքան էլ տխուր չէ էլեկտրոնային առևտրի անհրաժեշտ տեղեկատվության հետ, պարզվում է

Ստորագրի հղումների քանակը սահմանափակելիս մի խնայեք բացասական տարածությունը. սա ցնցող ազդեցություն կունենա տեսողական ընկալման վրա և կբարելավի ընթեռնելիությունը: Ընդհանուր կանոնՊահպանելով տեսողական հիերարխիան՝ կենտրոնական տարրերն ավելի արագ են նկատվում (կարելի է օգտագործել ձեր օգտին):

Մինիմալիստական ​​ոճով և ֆիքսված բացվող մենյուով առցանց խանութը կարող է իրեն թույլ տալ ընդարձակ ստորագիր

ՄԱՍԻՆ մեծ քանակությամբմիկրո-բացասական տարածությունը (փոքր տարրերի միջև) կարելի է ասել այսպես. քանի դեռ առկա է ողջ անհրաժեշտ տեղեկատվությունը, այն ընթեռնելի է և արագ ընկալվում, ամեն ինչ լավ է:

Սուրճի վայրի ընդարձակ էջատակը մաքուր դիզայնի կոմպոզիցիայի հիանալի լրացումն է, որում կա շատ մակրոբացասական տարածություն («օդ» բաժինների/հատվածների միջև)

Կարդացեք նաև՝ 30+ օրինակներ և գաղափարներ թիրախային գործողության կոճակներ նախագծելու համար

Ստորագրի ոճային դիզայնը շատ բան է խոսում ռեսուրսի մասին: Կարևոր է նշել. գնորդն այստեղ մի փոքր ավելի երկար է մնում, քան էջի մյուս մասերում: Գործողության ևս մեկ վերջնական կոչի հարմար հնարավորություն։ Հաճախ սա բաժանորդագրություն/տեղեկագիր է, բայց կարող եք նաև կապել CTA զանգը հաշվի գրանցմանը:

Greetabl-ն ունի իր էջերի համեստ ձևավորված հատակը, որը ներառում է բաժանորդագրվելու զանգ: Նվազագույն տարրերով զանգը դառնում է նկատելի, և փիրուզագույն ֆոնի հետ ներդաշնակ այն վերածվում է կայքի զարդարանքի:

Գեղեցիկ ձևավորում՝ էջերի ներքևում գործողության կոչերով: Վաճառող կայքի ստեղծողի կառուցվածքը ունիվերսալ է: Այն թարգմանվել է 35 լեզուներով իր միլիոնավոր հաճախորդների համար:

Կայքի ներքևից գնումների զամբյուղ մուտք գործելը հիանալի միջոց է կայքի օգտագործման և վաճառքի որակները բարելավելու համար:

Հասարակական սննդի ընկերության վաճառող կայքը հաճելի է դիտելու և հարմար գնորդի համար

Կայքի ներքևի հատվածը իդեալական է այն տեղեկատվության համար, որը հաճախ չի դիտվում՝ ընկերության, ծառայության պայմանների և գաղտնիության քաղաքականության մասին: Այս դեպքում ստորագրի գործառույթը բոլորին փրկելն է։ Էլեկտրոնային առևտրի միջավայրում կորած զգալով՝ ինչ-որ մեկը հետաքրքրվում է ենթակառուցվածքով էլեկտրոնային խանութ, բնազդաբար ոլորելով հետագա...

Բացասական տարածությունը էական է բովանդակության ընթեռնելիության համար: Ընդհանուր առմամբ, «ստորատակը» նավիգացիոն նպատակների համար չէ, ի տարբերություն մենյուի կամ կայքի քարտեզի: Միայն հազվադեպ դեպքերում, էլեկտրոնային առևտրի կայքերը տեղադրում են առանձին ապրանքների կատեգորիաներ էջատակի մեջ (

HTML5-ում մի քանի նոր պիտակներ են ներդրվել կոդի կառուցվածքի համար՝ , , , , , որոնք որոշ դեպքերում փոխարինում են սովորականին։ Թեև թվում է, թե պիտակների միջև մեծ տարբերություն չկա, սակայն նրանց միջև հսկայական անջրպետ կա։ Պիտակներն ուղղված չեն այն մարդկանց, ովքեր ուսումնասիրելու պատճառ չունեն աղբյուր կոդըէջերը, բայց այն մեքենաներին, որոնք մեկնաբանում են կոդը: Մեքենաները կամ ռոբոտները չեն հասկանում, նրանց համար սա տիպիկ նշագրման պիտակ է. փոխարինեք այն և իմաստը չի փոխվի: Մեկ այլ բան այն է, որ ռոբոտը, հայտնաբերելով այս պիտակը, այն ընկալում է հենց որպես կայքի կամ բաժնի վերնագիր:

Ի՞նչ է սա տալիս ի վերջո։ Որոնման համակարգերՆրանք սկսում են ավելի լավ ինդեքսավորել կայքը, քանի որ հստակորեն առանձնացնում են էջի բովանդակությունը օժանդակ տարրերից։ Կույր մարդկանց համար նախատեսված խոսքի բրաուզերները բաց են թողնում վերնագիրը և ուղղակիորեն անցնում բովանդակությանը: Կայքերը կարող են ավտոմատ կերպով կիսվել բովանդակությամբ և այլ տեղեկություններով միմյանց հետ: Այս բոլոր հատկանիշները կոչվում են իմաստաբանություն և թույլ են տալիս տվյալները ներկայացնել ռոբոտների համար հարմար ձևով:

Եկեք նախ կազմենք կայքի վերնագիրը՝ օգտագործելով թեգ (օրինակ 6.2):

Օրինակ 6.2. Օգտագործումը

Ոճերում պիտակին ֆոն ավելացնելու փորձը ոչ մի բանի չի հանգեցրել որոշ բրաուզերներում: Բոլոր նոր թեգերը նախ պետք է բլոկ-մակարդակ դարձնել ցուցադրման հատկության միջոցով, այնուհետև դրանք կսկսեն ճիշտ ցուցադրվել (օրինակ 6.3):

Օրինակ 6.3. Կայքի վերնագիր

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

վերնագիր (ցուցադրում՝ արգելափակում; ֆոն՝ #00B0D8 url (images/header-gradient.png) կրկնում-x;)

Այս օրինակը կաշխատի բոլոր բրաուզերներում, բացառությամբ IE7-ի և IE8-ի: Internet Explorer-ը ոճ չի ավելացնում իր անհասկանալի տարրերին: Այս թյուրիմացությունը կարելի է ուղղել JavaScript-ի միջոցով կեղծ տարր ստեղծելով: Դա անելու համար մենք սա կներառենք կոդի մեջ։

document.createElement ("header");

Եթե ​​էջում կա մեկ պիտակ, ապա այս սկրիպտը բավականին հարմար է աշխատանքի համար։ Բայց մենք չենք ցանկանում կրկնել տողը տասը անգամ տասը տարբեր պիտակների համար, այնպես որ մենք ավտոմատացնում ենք այս գործընթացը օղակի միջոցով: Թեգերն իրենք նշված են ցուցակում՝ բաժանված ստորակետերով (օրինակ 6.4):

Օրինակ 6.4. Սցենար IE-ի համար

var e = («հոդված, մի կողմ, պատկերագիր, պատկեր, ստորագիր, վերնագիր, hgroup, nav, բաժին, ժամանակ»): split (»,»);< e.length; i++) { document.createElement(e[i]); }

համար (var i = 0; i

Սցենարն ինքնին կցվում է պայմանական մեկնաբանություններում, որպեսզի այն գործարկվի միայն IE 8.0 և ավելի ցածր տարբերակի համար: IE9-ն արդեն ներառում է նոր HTML5 թեգերի աջակցություն:

Պարտադիր չէ, որ վերը նշված օրինակը տեղադրեք ձեր կայքում, դուք կարող եք օգտագործել հանրությանը հասանելի սցենար, որը գրվել է Remy Sharp-ի կողմից և տարածվել MIT լիցենզիայի ներքո. Դա անելու համար պարզապես տրամադրեք դրա հղումը, ինչպես ցույց է տրված օրինակ 6.5-ում:

Օրինակ 6.5. Սցենար IE-ի համար

Բոլոր նշված սկրիպտները պետք է գտնվեն կոդում CSS-ից առաջ:

նոր պիտակների ոճերում սահմանեք ցուցադրում՝ բլոկ:

Այժմ եկեք ավելի մանրամասն նայենք որոշ HTML5 թեգերի՝ հասկանալու դրանց շրջանակը:

Օրինակ 6.6. Օգտագործելով պիտակ

HTML5 IE Cr Op Sa Fx

Հոդված Աննախադեպ կենդանիների հետքեր Պատմություն այն մասին, թե ինչպես վեց մատներով առեղծվածային վարդագույն հետքեր հայտնվեցին ճաշասենյակի մոտ, և ինչու դա տեղի ունեցավ։

Սահմանում է բլոկ, որը կապված չէ հիմնական բովանդակության հետ՝ կատեգորիաների, արխիվի հղումների, պիտակների և այլ տեղեկատվության տեղադրման համար (օրինակ 6.7): Նման բլոկը, եթե այն գտնվում է կողքի վրա, սովորաբար կոչվում է «կողային գոտի» կամ «կողային գոտի»:

Օրինակ 6.6. Օգտագործելով պիտակ

Օրինակ 6.7. Օգտագործումը

մի կողմ document.createElement ("մի կողմ");

document.createElement («հոդված»);

մի կողմ (ֆոն՝ #f0f0f0; /* Ֆոնի գույնը */ լիցքավորումը՝ 10px; /* Լուսանցքներ */ լայնությունը՝ 200px; /* Կողագոտի լայնությունը */ float՝ աջ; /* Փաթաթել ձախ */) հոդվածը (լուսանցք-աջ՝ 240px /* Աջ նահանջ */ ցուցադրում՝ բլոկ,

Լավ լեզու

Ում փայտն է ավելի մեծ

Օրինակ 6.6. Օգտագործելով պիտակ

գործիչ document.createElement("figur");

Սոֆիայի տաճար

Լեհական եկեղեցի

Պարունակում է պիտակի նկարագրություն: Պիտակը պետք է լինի խմբի առաջին կամ վերջին տարրը:

Օրինակ 6.6. Օգտագործելով պիտակ

Սահմանում է կայքի կամ բաժնի «ստորատակը», այն սովորաբար պարունակում է հեղինակի անունը, փաստաթղթի ամսաթիվը, կոնտակտային տվյալները և իրավական տվյալները (օրինակ 6.9).

Օրինակ 6.9. Օգտագործումը

Ուրախ եմ ողջունել ձեզ իմ կայքում:

Հեղինակային իրավունք Քրիստինա Վետրովա

Սահմանում է կայքի կամ բաժնի «վերնագիրը»:

Օրինակ 6.6. Օգտագործելով պիտակ

Օգտագործվում է վեբ էջի կամ հատվածի վերնագրերը խմբավորելու համար (Օրինակ 6.10):

Օրինակ 6.10. Օգտագործումը

hgroup Kristina Vetrova Անձնական կայք

Օրինակ 6.6. Օգտագործելով պիտակ

Սահմանում է կայքի նավիգացիան (օրինակ 6.11): Եթե ​​էջի վրա հղումների մի քանի բլոկ կա, ապա դրանցում սովորաբար տեղադրվում են առաջնահերթ հղումներ։ Ընդունելի է նաև փաստաթղթում մի քանի պիտակներ օգտագործելը: Ներս մի դրեք։

Օրինակ 6.11. Օգտագործումը

nav Cheburashka և կոկորդիլոսը Gena Cheburashka | Գեն |

Օրինակ 6.6. Օգտագործելով պիտակ

Շապոկլյակ | Lariska Բարի գալուստ:

Սահմանում է փաստաթղթի մի հատված, որը կարող է ներառել վերնագրեր, վերնագիր, ստորագիր և տեքստ (Օրինակ 6.12): Թույլատրվում է մեկ պիտակ տեղադրել մյուսի մեջ։

բաժին Նկարահանում Պոլիպրոպիլեն

Պատմությունն այն մասին է, թե ինչպես են նրանք ֆիլմ նկարահանել, որտեղ հերոսները հանգստանում էին ծովափին, հետո հակառակորդը եկավ, ծեծի ենթարկեց հերոսներին, նետեց լողավազանը և ինչ եղավ։

Լավ լեզու

Պատմությունն այն մասին է, թե ինչպես է ստեղծվել էսպերանտո լեզվի ուսումնասիրման ստուդիան, մինչդեռ դրա վերևում՝ պատշգամբում, կա կատակային ստուդիա, որտեղ կատակներ էին պատմում, և ինչ ստացվեց դրանից:

• Նշում է տեքստը պիտակի մեջ որպես ամսաթիվ, ժամ կամ երկուսն էլ ամսաթիվ և ժամ: Կարող է նշվել անմիջապես կոնտեյների ներսում կամ նշվել datetime հատկանիշի միջոցով (օրինակ 6.13):
• Ամսաթիվը և ժամը նշված են ISO 8601 միջազգային ձևաչափով: Ձևաչափման օրինակները տրված են աղյուսակում: 6.1.
• Յուրաքանչյուր միավոր ունի իր հատուկ ձևը և սահմանափակումները:
• Տարին նշված է չորս նիշով (1860 թ.):
• Րոպեները երկնիշ են 00-ից մինչև 59:
• Վայրկյանները երկնիշ են 00-ից մինչև 59:
• Ժամային գոտի - ժամերը և րոպեները նշված են գումարած կամ մինուս նշանով:

Ամսաթիվը և ժամը առանձնացված են մեծատառ լատիներեն T տառով: Ժամային գոտին, անհրաժեշտության դեպքում, գրվում է ժամից հետո՝ գումարած կամ մինուս նշանով: Օրինակ, Մոսկվայի համար ժամային գոտին կլինի +03:00:

Օրինակ 6.13. Օգտագործումը

Օրինակ 6.6. Օգտագործելով պիտակ

ժամանակ

1957-10-04 Գործարկվեց Երկրի առաջին արհեստական ​​արբանյակը:

1960-08-19 Շների առաջին թռիչքը տիեզերք:

1961-04-12 առաջին օդաչուավոր տիեզերական թռիչքը:

1963-06-16 կին տիեզերագնաց առաջին թռիչքը:

1969-07-21 մարդ վայրէջք է կատարում լուսնի վրա: