მოდით გავეცნოთ საიტის ქსელის დიზაინს და დავშალოთ ცალკეული კომპონენტები. მოდით გავეცნოთ რატომ არის float ასეთი სასარგებლო, ასევე პოპულარული ტექნიკა პირველი ქსელის შესაქმნელად სამი ნაკადიდან და საიტის ქვედა კოლონტიტულიდან.
საიტის ქსელის კონსტრუქციის შესასწავლად უნდა გესმოდეთ რა არის "ნაკადი". ნაკადი წარმოადგენს საიტის ელემენტებს, რომლებიც ერთმანეთის მიყოლებით მდებარეობს. მაგალითად, ეს შეიძლება იყოს div ელემენტები, რომლებიც სტანდარტულად მიდიან ერთმანეთის მიყოლებით. მაგრამ ნაკადი შეიძლება გადანაწილდეს და ბლოკის ელემენტების პოზიცია შეიცვალოს.
ნაკადის გასაკონტროლებლად ვიყენებთ float თვისებას, რომელსაც შეუძლია ბლოკის განთავსება მარცხენა ან მარჯვენა მხარეს. საკმარისია CSS ფაილში ჩაწერა:
"კლასი ან ბლოკის სახელი" {float: მარჯვნივ / მარცხნივ; }
ათწილადის ერთადერთი ნაკლი არის ერთი ბლოკის მეორის გადაფარვის შესაძლებლობა.
თავიდან აცილების მიზნით, ჩვენ ვიყენებთ გარკვევას: ორივე - ეს თვისება შექმნის ნაკადის გარშემო ბლოკს. ჩვენ ვაყენებთ სიგანეს და სიმაღლეს, მაქსიმალურად და მინიმუმს, ისე, რომ მნიშვნელობა ჩამოყალიბდეს შინაარსის (ტექსტის, სურათების) ზომის შესაბამისად. მინდორი - დააყენეთ მნიშვნელობა ავტოზე ისე, რომ გარე მინდვრები ავტომატურად ჩამოყალიბდეს ბლოკის ადგილმდებარეობის მიხედვით.
მას შემდეგ, რაც float- ს შეუძლია ბლოკების განთავსება ორი მიმართულებით, ჩვეულებრივია საიტის დაყოფა ნაკადებად - მარცხნივ და მარჯვნივ. თუ პროგრამისტს მხოლოდ ორი ნაკადი სჭირდება, მაშინ ის ტოვებს მარცხენა და მარჯვენა მცურავს, მაგრამ თუ ორზე მეტია, ის მინდორს არეგულირებს მარჟის გამოყენებით. როგორ ხდება ეს:
. სვეტი 1 {float: მარცხენა; სიგანე: 65px; წთ-ის სიმაღლე: 50 პიქსელი; ზღვარი მარჯვნივ: 9px; // 9px ცენტრალური ყუთიდან}
2 ნაკადი:
. სვეტი 2 {float: მარცხენა; // მარცხენა ბლოკთან, მაგრამ "გადაფარვის" გარეშე, რადგან ჩვენ მივმართეთ ზღვრის სიგანე: 80px; წთ-ის სიმაღლე: 50 პიქსელი; }
3 ნაკადი:
. სვეტი 3 {float: მარჯვნივ; სიგანე: 65px; წთ-ის სიმაღლე: 50 პიქსელი; }
ქვედა კოლონტიტულის (.footer) მოგვარება:
.ფუტერი {გასაგები: ორივე; // ორივე მხარეს შემოხვევა}
ასე შევქმენით საიტის ქსელი float– ის გამოყენებით, რომელიც შედგება სამი ნაკადისგან.
