ვებ-გვერდზე განთავსებული ნივთების განთავსება აუცილებელია მისი საერთო დიზაინისთვის. მიუხედავად იმისა, რომ არსებობს სხვა გზები, რომლებიც გავლენას მოახდენენ განლაგებას, როგორიცაა ცხრილების გამოყენება ( რაც ჩვენ არ გირჩევთ ), საუკეთესოა CSS- ის გამოყენება .
ქვემოთ, ჩვენ შევხედავთ, თუ როგორ გამოიყენოთ მარტივი CSS სტილი in-line ქონების გასწორება სურათები, მაგიდები, პუნქტები და სხვა.
შენიშვნა: იგივე მეთოდები შეიძლება გამოყენებულ იქნას გარე სტილის ფურცლებზე, მაგრამ მას შემდეგ, რაც ეს ეხება ინდივიდუალურ ნივთებს და სავარაუდოდ უნდა დარჩეს ამ გზით, საუკეთესოა გამოიყენოთ ონლაინ სტილის გამოყენება, როგორიც არის ქვემოთ მოცემული.
ტექსტური პარაგრაფების გასწორება
პუნქტის tag არის პირველი ადგილი, რათა დაიწყოს ჩამოყალიბებაში თქვენი ვებ გვერდი. ეს გახსნის და დახურვის tags ასე გამოიყურება:
გვერდის მარცხენა მხარეს ტექსტის ნაგულისხმევი განლაგება არის გვერდი, მაგრამ თქვენ ასევე შეგიძლიათ გასწორება თქვენი პუნქტები მარჯვნივ და ცენტრში.
ფსოტის საკუთრების გამოყენება საშუალებას მოგცემთ ჩამოაყალიბოთ პუნქტები მშობლის ელემენტის მარჯვნივ ან მარცხნივ. ნებისმიერი სხვა ელემენტები შიგნით, რომ მშობელი ელემენტის შემოვა გარშემო მცურავი ელემენტს.
საუკეთესო შედეგის მისაღწევად პუნქტის, უმჯობესია შექმნას სიგანე პუნქტის რომ ნაკლებია, ვიდრე კონტეინერი (მშობელი) ელემენტს.
პარაგრაფების შიგნით ტექსტის გასწორება
სავარაუდოდ, ყველაზე საინტერესო ინტერესი პუნქტის ტექსტი არის "გამართლება", რომელიც ეუბნება ბრაუზერს ცარიელია ტექსტი შეესაბამება, არსებითად, ორივე მარჯვენა და მარცხენა მხარეს ფანჯარა.
ტექსტის გასამართლებლად პუნქტში, თქვენ გამოიყენებთ ტექსტის გასწორებას.
თქვენ ასევე შეგიძლიათ გასწორება ყველა ტექსტი პუნქტში შიგნით მარჯვენა მხარეს ან მარცხნივ (default), გამოყენებით ტექსტის გასწორება ქონება.
ტექსტის align ქონების align ტექსტი ტექსტის შიგნით. ტექნიკურად, ეს არ უნდა მოხდეს სურათების გასწორება პარაგრაფში ან სხვა ელემენტში, მაგრამ უმეტესი ბრაუზერი გამოსახულია, როგორც ამ ქონებისთვის.
სურათები გადანაწილება
გამოყენებით float ქონების გამოსახულება tag შეგიძლიათ განსაზღვრავს განთავსება სურათები გვერდზე და როგორ ტექსტი იქნება გადატანა მათ გარშემო.
ზემოთ მოყვანილი პარაგრაფების მსგავსად, სურათის ტეგების ფსოტის სტილის ქონება გვერდზე განათავსებს თქვენს სურათს და ეუბნება ბრაუზერი როგორ გადავიდეს ტექსტი და სხვა ელემენტები ამ სურათის გარშემო.
სურათის შემდგომი ტექსტის სახით გამოსახულია გამოსახულების ირგვლივ მარჯვენა სურათი, როგორც ეკრანის მარცხენა მხარეს.
თუ ტექსტი მინდა შევაჩერო სურათის გარშემო შესაფერის შეჩერებას, ვიყენებ წმინდა საკუთრებას:
უფრო მეტად პარაგრაფების დამატება
თუმცა, რა მოხდება, თუ გინდა უფრო მეტი, ვიდრე უბრალოდ პარაგრაფი ან იმიჯი? თქვენ უბრალოდ დააყენა სტილი ქონების ყველა პუნქტის, მაგრამ არსებობს tag შეგიძლიათ გამოიყენოთ ეს უფრო ეფექტურია:
მარტივად რომ ვთქვათ, ტექსტი და სურათები ( HTML ტეგების ჩათვლით ) ერთად tag და სტილის ქონება (float ან text-align) და ყველა ამ განყოფილებაში იქნება შეესაბამება თუ როგორ მინდა ეს.
გაითვალისწინეთ, რომ გაყოფის ფარგლებში პარაგრაფებზე ან გამოსახულებებში დამატებული დამატებები დაჯილდოვდება, დაამატეთ ნიშანი.