Շերտերի անունը վերնագրի ստորագիր է: DIY ստորագիր մեխված է ներքևում
Այս թեգը, ինչպես նախորդ թեգերը, կարող է օգտագործվել էջի վրա մի քանի անգամ: Դուք հավանաբար արդեն անունից կռահեցիք, որ դա էջի ստորագիրն է։ Այն կարող է պարունակել հաշվիչներ, կայքի հեղինակային իրավունքի մասին տեքստ, կոնտակտային տվյալներ և այլն: Հնարավոր է նաև նավիգացիոն տող () տեղադրել էջի ստորոտում: Ոչ ոք չի արգելում տեղադրել նոր տարրեր, ինչպիսիք են մի կողմը և հատվածը, բայց ես դեռ չէի անի, եթե ես քո փոխարեն:
Եվ
Կայքի վերնագիր
Գրառում թիվ 1
Այստեղ կգրենք առաջին գրառման տեքստը։
Գրառում #2
Այստեղ կգրենք երկրորդ գրառման տեքստը։
տարի և այլն: Պատճենելն արգելվում է))
Արդյունքը պետք է լինի հետևյալը.
անկախ փաստաթղթի էջի վերնագրից և ստորոտից: Հենց նման դեպքերում է, որ այդ տարրերը կարող են օգտագործվել մի քանի անգամ։ Թեև ես վստահ եմ, որ դրանք կարող են օգտագործվել նաև կողային կողային գոտում:
Դե, հիմա դուք ծանոթացաք HTML5-ի հիմնական կառուցվածքային տարրերին, և հաջորդ դասերում մենք կանդրադառնանք էլ ավելի նոր տարրերի, տարբեր ձևերի, որոնք չկան HTML-ի այլ բնութագրերում:
Ողջույն, բլոգի կայքի հարգելի ընթերցողներ: Շարունակում ենք բլոկների դասավորության թեման, որը սկսվել և շարունակվել է նախորդ երեք հոդվածներում։ Սկզբունքորեն մենք արդեն հասցրել ենք ստեղծել կայքի և՛ երկսյունանի, և՛ եռասյունանի դասավորություն, և նույնիսկ կարողացել ենք դիտարկել հեղուկ դասավորության ստեղծման նրբությունները։
Բացի այդ, վեբ կայքի դասավորության առաջին հոդվածներում () քննարկվել են վեբ վարպետության որոշ հիմնական հասկացություններ, առանց հասկանալու, որոնց նրբությունները հասկանալը բավականին դժվար կլիներ։
Ի՞նչ խնդիրներ ունեինք մեր կայքի դասավորության հետ կապված:
Այսօր մենք կփորձենք լուծել մեկ փոքր խնդիր, որը կարող է առաջանալ ավելի վաղ մեր ստեղծած դասավորության հետ: Ամենից հաճախ այս իրավիճակն առաջանում է այն մեծ մոնիտորների վրա (բարձր լուծաչափով) դիտելիս և փոքր քանակությամբ տեղեկատվություն ունեցող էջ ցուցադրելիս:
Այնուամենայնիվ, իմ կարծիքով, անհրաժեշտ է սեղմել էջատակը կայքի դասավորության ամենաներքևում, և դա հատկապես ճիշտ կլինի այն դեպքում, երբ էջի բարձրությունը պակաս է օգտագործողի էկրանի բարձրությունից: Սա սխեմատիկորեն կարելի է ներկայացնել այսպես.
Նրանք. Էջի փոքր քանակությամբ տեղեկատվության և օգտագործողի մեծ էկրանի դեպքում ստորագրի ճիշտ վարքագիծը կլինի հետևյալը.
Դա իրականացնելու համար մենք պետք է մի շարք մանիպուլյացիաներ կատարենք մեր դասավորության կոդով: Ավելին, մենք փոփոխություններ կկատարենք ոչ միայն 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 կանոնից, որպեսզի եզրագծի հաստությունը չխանգարի մեր ամբողջ դասավորությունը, ներառյալ էջատակը, էկրանի բարձրության վրա տեղադրվելուց):
Ինչպես տեսնում եք, այժմ ոլորման սանդղակը չի երևում բրաուզերում, և մեր ամբողջ եռասյունանի բլոկների վրա հիմնված կայքի դասավորությունը տեղավորվում է մեկ էկրանի վրա (եթե էջի վրա քիչ տեղեկատվություն կա) և ունի ստորագիր, որը գտնվում է հենց ներքևում: . Ինչը հենց այն է, ինչ մենք պետք է անեինք:
Մենք տեղադրում ենք spacer-ը և պայքարում Internet Explorer-ի հետ
Բայց խնդիր է առաջանում, որը կհայտնվի միայն այն ժամանակ, երբ դասավորության էջում ավելի շատ տեղեկություններ կան, և կարող է առաջանալ հետևյալ իրավիճակը.
Պարզվում է, որ կարող է իրավիճակ առաջանալ, երբ դասավորության սյունակներից մեկի տեղեկատվությունը համընկնում է ստորագրի հետ, ինչը գեղեցիկ տեսք չի ունենա։ Դա տեղի է ունենում տխրահռչակ բացասական լիցքի պատճառով, որը մենք դրել ենք դրա համար, և որն օգնեց բարձրացնել մեր նկուղը հիմնական դասավորության կոնտեյների դեմ:
Նրանք. Պարզվում է, որ էկրանի ներքևի մասում նկուղային տարածքում երկու բլոկներ են, որոնք համընկնում են միմյանց:
Այս խնդրի լուծումը նոր դատարկ Div կոնտեյներ ավելացնելն է (այսպես կոչված spacers) մեր դասավորության հիմնական կոնտեյների մեջ (մաքեթ), այն տեղում, որտեղ նախկինում գտնվում էր էջատակով բլոկը:
Այս նոր բեռնարկղը դնելով ստորագրի բարձրությանը հավասար բարձրության վրա՝ մենք կարող ենք խուսափել հիմնական կոնտեյների տեղեկատվության բախումից էջատակի հետ բլոկի հետ: Եկեք վերագրենք 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% հատկությունը, որը մենք օգտագործել ենք հիմնական բլոկի նվազագույն բարձրությունը հավասար էկրանի բարձրությանը սահմանելու համար։
Հետևաբար, այս խնդիրը լուծելու համար մենք ստիպված կլինենք օգտագործել այսպես կոչված հաքեր, որը թույլ է տալիս մեզ բացատրել (մեր մատների վրա) հին բրաուզերներին, թե ինչ անել: Մինչև maket-ի CSS հատկությունների ցանկը, ձեզ հարկավոր է տեղադրել հետևյալ համակցությունը.
* html #maket (բարձրությունը՝ 100%; )
Այս կանոնը կկիրառվի միայն Internet 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-ում
Եթե կոշիկները ցանկացած հանդերձանքի վերջնական բաղադրիչն են, ապա էլեկտրոնային առևտրի կայքի էջատակը դրա վաճառքի դիզայնի վերջնական տարրն է: Կենտրոնանալով ներքևի տարրի՝ ստորագրի վրա՝ ժամանակակից կայքերը պատրաստ են ամեն կերպ ցուցադրել իրենց անհատականությունը: Էլեկտրոնային առևտրի մրցակցային միջավայրում կան բավականաչափ օրիգինալ գաղափարներ, կրեատիվ և դիզայնի միտումներ: Նախքան էլեկտրոնային առևտրի կայքի էջատակը դիվերսիֆիկացնելը, արժե հաշվի առնել կարևոր կետերը: Ի՞նչ տեղադրել առաջինը և որն է դա անելու լավագույն միջոցը: Ստորագրի ոգեշնչող ձևավորումների մեր ամփոփումն ունի մի քանի հետաքրքիր տարբերակներ:
Կարդացեք նաև. Էլեկտրոնային առևտրի շուկայավարման 13 միտումներ 2019 թ
Հետաքրքիր վիճակագրություն Chartbeat-ից։ 25 միլիոն օգտատերերի վարքագծի ուսումնասիրությունը ցույց է տվել, թե որքան խորն են նրանք թերթում էջերը։ Պարզվում է, որ օգտատիրոջ ուշադրությունը գրավում է ծալման գծի տակ գտնվող տարածությունը։ Ստանալով գործնականում ավելի օգտակար տեղեկատվություն՝ այցելուներն ամենաերկարը մնում են էջի վերևից 1200px տարածքում (բրաուզերում միջին 700px ուղղահայաց էկրանով) կամ երկրորդ էկրանի հետևում:
Դիտման ժամանակը (վրկ.) / Էջի վերևից հեռավորությունը (պիքսելներ)
Մեծ բաց կա առաջին և երկրորդ էկրանների դիտման տևողության մեջ։ TOP-ը 4 վայրկյան է, տեւողությունը հասնում է առավելագույնի (16 վայրկյան) 1200 պիքսել վերևից և, հետագա պտտվելով, դանդաղորեն նվազում է:
Այցելուների մասնաբաժինը (%) / Հեռավորությունը էջի վերևից (պիքսելներ)
Այցելուների մի զգալի մասը (ավելի քան 25%) չի էլ սպասում, որ բովանդակությունը բեռնվի և սկսի շրջել էջը։ Սա նշանակում է, որ միայն 75%-ն է առաջինը տեսնելու ամենաբարձր հորիզոնականները: Էջի ամենաշատ դիտվող տարածքը 550px է (հենց ծալովի գծից վեր):
Հետազոտությունը ցրում է այն առասպելը, որ օգտատերերը չեն պտտվում էջի ներքևի հատված և դիտում ամբողջ բովանդակությունը: Ստորատակը նույնպես կարևոր է ժամանակակից էլեկտրոնային առևտրի կայքի համար և նույնիսկ ունի իր առավելությունները:
Գաղափարներ, թե ինչպես նախագծել «նկուղ» (ստորատակ), նմուշներ վաճառելու օրինակներ
Այս 10 խորհուրդները ձեզ կպատմեն, թե ինչպես կարելի է գեղեցիկ ձևավորել էջատակը՝ վեբ ձևավորման և առաջնահերթ խնդիրների լուծման կանոնների համաձայն: Կիրառեք ամենահարմար մարտավարությունը՝ բարելավելու օգտագործելիությունը, UX-ը (օգտագործողի փորձը) և նույնիսկ ավելացնել վաճառքը:
1. Պահանջվող տեղեկատվություն
Ավանդաբար, պահանջվող կազմակերպչական և իրավական խնդիրները լուսաբանվում են կայքի ստորոտում: Ծանուցումները նախագծված են ավելի քիչ ակնառու տեքստով, որն ազատում է էջերի այլ հատվածները՝ ավելի իմաստալից տարրերի համար: Ահա մի նմուշ ցուցակ, որը պետք է հաշվի առնել.
- Հեղինակային իրավունքի ծանուցումներ
- Իրավական հերքումներ
- Վճարային տեղեկատվություն
- Cookie Ծանուցում
Ապրանքը վաճառող կայքը պետք է համապատասխանի իրավական պահանջներին և տեղեկատվություն տրամադրի ընթացակարգի և վերադարձի ժամկետների մասին: Ստորագրում նրա գտնվելու վայրը հարմար է ինչպես վաճառվող ռեսուրսի, այնպես էլ այցելուների համար:
Ստորին օրինակ՝ Իվ Ռոշեր
Yves Rocher ապրանքանիշի առցանց խանութ՝ լիաէկրան ստորագիր՝ փոփոխական շերտերի հաճելի դիզայնով: Տեղեկացնում է ընկերության, վաճառող կայքի ենթակառուցվածքի մասին՝ պատվերի հետևումից մինչև անձնական տվյալների քաղաքականություն: Կան նաև ապրանքի օգտագործման խորհուրդներ, բոնուսներ, առաջխաղացումներ
Օրինակ էջատակ՝ Lumity
Սննդային հավելումների դիլերները ենթակա են ավելի մեծ օրենսդրական պահանջների: պատասխանատվություն։ Կան բավականին շատ բաներ, որոնք նրանք պետք է / չպետք է ասեն իրենց վաճառքի կայքում: Իրավական տեղեկատվության հղումները ընդգծված են թավով ավելի լավ տեսանելիության համար:
Գեղեցիկ ֆոնային պատկերով ստորագիր շատ օրգանապես տեղավորվում է կայքի ընդհանուր ձևավորման մեջ: Չկա հստակ սահման, ավելի շուտ բովանդակությունն ինքնին ծառայում է որպես տարանջատող
Օրինակ ստորագիր՝ Saddleback Leather Co
Գեղեցիկ ռետրո վերնագրի և էջատակի ձևավորում ունեցող վաճառվող կայք: 100 տարվա երաշխիք նյութի և հարդարման թերությունների դեմ: Վերադարձի պայմանները ուղեկցվում են հետաքրքիր պատմություններ... ամեն ինչ այնքան էլ տխուր չէ էլեկտրոնային առևտրի անհրաժեշտ տեղեկատվության հետ, պարզվում է
2. Բացասական տարածություն – բավարար տեսողական հեռավորություն
Ստորագրի հղումների քանակը սահմանափակելիս մի խնայեք բացասական տարածությունը. սա ցնցող ազդեցություն կունենա տեսողական ընկալման վրա և կբարելավի ընթեռնելիությունը: Ընդհանուր կանոնՊահպանելով տեսողական հիերարխիան՝ կենտրոնական տարրերն ավելի արագ են նկատվում (կարելի է օգտագործել ձեր օգտին):
Ստորին օրինակ՝ QUAY AUSTRALIA
Մինիմալիստական ոճով և ֆիքսված բացվող մենյուով առցանց խանութը կարող է իրեն թույլ տալ ընդարձակ ստորագիր
Ստորին օրինակ՝ Incase
ՄԱՍԻՆ մեծ քանակությամբմիկրո-բացասական տարածությունը (փոքր տարրերի միջև) կարելի է ասել այսպես. քանի դեռ առկա է ողջ անհրաժեշտ տեղեկատվությունը, այն ընթեռնելի է և արագ ընկալվում, ամեն ինչ լավ է:
Օրինակ ստորագիր՝ Stumptown Coffee Roasters
Սուրճի վայրի ընդարձակ էջատակը մաքուր դիզայնի կոմպոզիցիայի հիանալի լրացումն է, որում կա շատ մակրոբացասական տարածություն («օդ» բաժինների/հատվածների միջև)
3. Գործողության վերջնական կոչ
Կարդացեք նաև. 30+ օրինակներ և գաղափարներ թիրախային գործողությունների կոճակներ նախագծելու համար
Ստորագրի ոճային դիզայնը շատ բան է խոսում ռեսուրսի մասին: Կարևոր է նշել. գնորդն այստեղ մի փոքր ավելի երկար է մնում, քան էջի մյուս մասերում: Գործողության ևս մեկ վերջնական կոչի հարմար հնարավորություն։ Հաճախ սա բաժանորդագրություն/տեղեկագիր է, բայց կարող եք նաև կապել CTA զանգը հաշվի գրանցմանը:
Ստորին օրինակ՝ Greetabl
Greetabl-ն ունի իր էջերի համեստ ձևավորված հատակը, որը ներառում է բաժանորդագրվելու զանգ: Նվազագույն տարրերով զանգը դառնում է նկատելի, և փիրուզագույն ֆոնի հետ ներդաշնակ այն վերածվում է կայքի զարդարանքի:
Ստորին օրինակ՝ Ecwid
Գեղեցիկ ձևավորում՝ էջերի ներքևում գործողության կոչերով: Վաճառող կայքի ստեղծողի կառուցվածքը ունիվերսալ է: Այն թարգմանվել է 35 լեզուներով իր միլիոնավոր հաճախորդների համար:
4. Լողացող սայլ – վաճառքի ֆունկցիոնալության հասանելիության բարձրացում
Կայքի ներքևից գնումների զամբյուղ մուտք գործելը հիանալի միջոց է կայքի օգտագործման և վաճառքի որակները բարելավելու համար:
Ստորին օրինակ՝ Լիմոնադելա
Հասարակական սննդի ընկերության վաճառող կայքը հաճելի է դիտելու և հարմար գնորդի համար
5. Ստորին նավարկություն
Կայքի ներքևի հատվածը իդեալական է այն տեղեկատվության համար, որը հաճախ չի դիտվում՝ ընկերության, ծառայության պայմանների և գաղտնիության քաղաքականության մասին: Այս դեպքում ստորագրի գործառույթը բոլորին փրկելն է։ Էլեկտրոնային առևտրի միջավայրում կորած զգալով՝ ինչ-որ մեկը հետաքրքրվում է ենթակառուցվածքով էլեկտրոնային խանութ, բնազդաբար ոլորելով հետագա...
Բացասական տարածությունը էական է բովանդակության ընթեռնելիության համար: Ընդհանուր առմամբ, «ստորատակը» նավիգացիոն նպատակների համար չէ, ի տարբերություն մենյուի կամ կայքի քարտեզի: Միայն հազվադեպ դեպքերում, էլեկտրոնային առևտրի կայքերը տեղադրում են առանձին ապրանքների կատեգորիաներ էջատակի մեջ (
Հիշում եմ, որ այն պահին, երբ ես սկսեցի աղյուսակներից անցնել 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 հատկության համար:
