გამოიყენეთ CSS კოდი HTML-ში ბურთულებიანი სიების გასასწორებლად.
ვებ დიზაინერები იყენებენ პუნქტების სიებს უფრო მეტს, ვიდრე უბრალოდ ტყვიებისა და ტექსტის დასამატებლად. HTML ტეგი, რომელიც გამოიყენება პუნქტების სიების შესაქმნელად, მოსახერხებელია მენიუების შესაქმნელად ან სურათების ორგანიზებისთვის JavaScript-ისთვის სლაიდშოუში ჩასატვირთად. კასკადური სტილის ფურცლის კოდის გამოყენების სწავლა პუნქტების სიებთან ერთად - რომელსაც HTML ჟარგონში უწოდებენ "არამოწესრიგებულ სიებს" - გახსნის რამდენიმე საინტერესო ვებ დიზაინის შესაძლებლობას.
Ნაბიჯი 1
გახსენით თქვენი HTML ფაილი, რომელიც შეიცავს ბურთულების სიას და შეხედეთ ტეგებს შორის კოდის ზედა ნაწილში. დაამატეთ ტეგები, თუ ისინი უკვე არ არის. თუ თქვენი კოდი შეიცავს ა მონიშნეთ სადღაც ტეგის შემდეგ და ეს შეიცავს მითითებას CSS ფაილზე, შემდეგ გახსენით ეს ფაილი. თქვენი CSS კოდი მიდის ტეგებს შორის ან თქვენი CSS ფაილის ახალ ხაზზე.
დღის ვიდეო
ნაბიჯი 2
გაასწორეთ ტექსტი ყველა პუნქტში თქვენი "ტექსტის გასწორების" დაყენებით
- ტეგი. The
- და ტეგები, რათა განისაზღვროს ისინი, როგორც ერთი სიის ნაწილი. როცა ტექსტს ასწორებთ
- ტეგი ეხვევა გარშემო
- ტეგზე, გასწორება გავლენას ახდენს ტექსტზე ყველა პუნქტში, მაგრამ არ ასწორებს სიას გვერდის მარცხნივ ან მარჯვნივ. აქ არის CSS კოდის მაგალითი "ტექსტის გასწორება" დასაყენებლად:
ul {text-align: right;}
გაითვალისწინეთ, რომ ტყვიები არ მოძრაობს ტექსტთან. ტყვიები ამ შემთხვევაში მარცხნივ რჩება.
ნაბიჯი 3
გაასწორეთ მთელი სია გვერდის მარცხნივ ან მარჯვნივ დაყენებით "float" თქვენთვის
- ტეგი. როდესაც "float" დაყენებულია მარცხნივ ან მარჯვნივ a
- ტეგით, ის გადააქვს მთელ პუნქტიან სიას გვერდის მარცხნივ ან მარჯვნივ. დააყენეთ float ასე:
ul {float: მარჯვნივ;}
თქვენ შეგიძლიათ დააყენოთ "float" მარცხნივ ან მარჯვნივ, მაგრამ არა ცენტრში.
ნაბიჯი 4
შეფუთეთ თქვენი
- ტეგები შევიდა
და
ტეგები შექმნათ შეფუთვა, რომელიც თქვენს გვერდზე მოათავსებს ბურთულების სიას. თქვენი შედეგად მიღებული კოდი ასე გამოიყურება:- სიის ელემენტი
- სიის ელემენტი
The
ტეგი თავისთავად არაფერს აკონცენტრირებს; თქვენ უნდა გამოიყენოთ CSS ყველაფრის ცენტრისთვის. დაამატეთ შემდეგი კოდი თქვენს შორის
