CSS განლაგება მოითხოვს, რომ ფიქრობთ თქვენი საიტის განლაგება მთლიანად და შემდეგ წაიღეთ ცალი და ერთად. შეიტყვეთ, თუ როგორ უნდა ავაშენოთ მარტივი 3-სვეტი განლაგება CSS- ით.
01 09
ჩამოიყვანე შენი განლაგება
თქვენ შეგიძლიათ შეადგინოთ განლაგება ქაღალდზე ან გრაფიკული პროგრამით . თუ თქვენ უკვე გაქვთ მავთულის ჩარჩო ან უფრო ფართო დიზაინის გათვალისწინება, გაამარტივეთ ის ძირითადი ყუთები, რომლებიც ქმნიან საიტზე. ეს დიზაინი, რომელიც ახლავს ამ სტატიას, აქვს სამი სვეტი ძირითადი შინაარსის ტერიტორიაზე, ასევე სათაურისა და ძირი. თუ ყურადღებით დავაკვირდებით, ხედავთ, რომ სამი სვეტი სიგანეში არ არის თანაბარი.
მას შემდეგ, რაც თქვენ გაქვთ განლაგება, შეგიძლიათ დაიწყოთ აზროვნების ზომები. ამ მაგალითის დიზაინი აპირებს შემდეგ ძირითად ზომებს:
- არაუმეტეს 900 პიქსელი ფართო
- 20 px gutter მარცხენა
- 10 px სვეტებისა და რიგების შორის
- სვეტები, რომლებიც 250px, 300px და 300px ფართოა
- ზედა მწკრივი 150px სიმაღლეა
- ქვედა რიგი არის 100px სიმაღლე
09 09
დაწერეთ ძირითადი HTML / CSS და შექმნა კონტეინერი ელემენტი
მას შემდეგ, რაც ეს გვერდი იქნება სწორი HTML დოკუმენტი, დაიწყე ცარიელი HTML კონტეინერი
"text / html; charset = utf-8" />დაამატეთ ძირითადი CSS სტილის ნულიდან გვერდზე მინდვრები, საზღვრები და paddings . მიუხედავად იმისა, რომ არსებობს სხვა სტანდარტული CSS სტილის ახალი დოკუმენტები, ამ სტილის არის მინიმალური თქვენ უნდა მიიღოს სუფთა განლაგებას. დაამატეთ ისინი თქვენი დოკუმენტის ხელმძღვანელს: