Եկեք նայենք կայքի ցանցի ձևավորմանը և բաժանենք առանձին բաղադրիչները: Եկեք ուսումնասիրենք, թե ինչու է բոցն այդքան օգտակար, ինչպես նաև երեք հոսքերից և կայքի տողատակից առաջին վեբ ցանցը կառուցելու հանրաճանաչ տեխնիկան:
Կայքի ցանցային կառուցվածքն ուսումնասիրելու համար հարկավոր է հասկանալ, թե ինչ է իրենից ներկայացնում «հոսքը»: Հոսքը կայքի տարրերն են, որոնք տեղակայված են մեկը մյուսի հետեւից: Օրինակ, դրանք կարող են լինել div տարրեր, որոնք լռելյայն գնում են մեկը մյուսի հետեւից: Բայց հոսքը կարող է վերադասավորվել, և բլոկի տարրերի դիրքը կարող է փոխվել:
Հոսքը վերահսկելու համար մենք օգտագործում ենք բոց հատկությունը, որը կարող է բլոկը տեղադրել ձախ կամ աջ կողմում: Բավական է CSS ֆայլում գրել.
«դաս կամ բլոկի անուն» {float: աջ / ձախ; }
Բոցի միակ թերությունը մեկ բլոկի մյուսի վրա «համընկնելու» հնարավորությունն է:
Վազելուց խուսափելու համար մենք օգտագործում ենք պարզ. Երկուսն էլ. Այս հատկությունը կարգավորում է հոսքը բլոկի շուրջ: Մենք սահմանում ենք լայնությունը և բարձրությունը, որպես առավելագույն և նվազագույն, այնպես, որ արժեքը կազմվի ըստ բովանդակության (տեքստի, պատկերների) չափի: Մարժա - արժեքը դնել ավտոմատի վրա, որպեսզի արտաքին լուսանցքները ինքնաբերաբար ձեւավորվեն ՝ կախված բլոկի գտնվելու վայրից:
Քանի որ բոցը կարող է բլոկներ տեղադրել երկու ուղղությամբ, ընդունված է կայքը բաժանել հոսքերի ՝ ձախ և աջ: Եթե ծրագրավորողին անհրաժեշտ է ընդամենը երկու հոսք, ապա նա թողնում է ձախ և աջ բոցերը, բայց եթե դրանք ավելի քան երկու են, ապա նա կարգավորում է մարժան ՝ օգտագործելով մարժա: Ինչպե՞ս է դա տեղի ունենում.
.ասյուն 1 {բոց ՝ ձախ; լայնությունը `65px; min- բարձրությունը `50px; լուսանցք-աջ ՝ 9px; // 9 հատ կենտրոն տուփից}
2 հոսք:
.ասյուն 2 {բոց ՝ ձախ; // դեպի ձախ բլոկ, բայց առանց «համընկնելու», քանի որ մենք կիրառեցինք լուսանցքի լայնությունը ՝ 80px; min- բարձրությունը `50px; }
3 հոսք:
.ասյուն 3 {բոց: աջ; լայնությունը `65px; min- բարձրությունը `50px; }
Theբաղվել ստորագիրով (.footer):
.footer {պարզ: երկուսն էլ; // փաթաթել երկու կողմերին էլ}
Ահա թե ինչպես մենք ցանցի համար ցանց ստեղծեցինք `օգտագործելով float, որը բաղկացած է երեք հոսքից:
