Animal Trading cards

24. Qutilar (Box)

1-savol

Qutining bu qismlarini ichkaridan tashqariga qarab joylashtiring.

Mashq: Ko‘k quti Quyidagi ish maydonida qutilar yaratishni mashq qiling! Qalin ko‘k chegarali va ichida bir oz matnli qutini yaratishingiz mumkinligini ko‘ring, mana bunga o‘xshab:

25. Amaliy mashg‘ulot — "CSS"da qutilar

Ikkinchi qutini qo‘shamiz. Lekin birinchi uni kichroq qilib, qizil rang beraylik. Keling, ikkala qutini bir biridan ajratib turish uchun atrofiga bir oz tashqi chegara(margin) beraylik.

26. Amaliy mashg‘ulot — Suzib yurivchi qutilar

Endi "CSS"ning "float" xossasini sinab ko‘raylik. Boshlash uchun blue_box klassiga float:right; xossasini qo‘shishga harakat qiling.



1-savol

Blue_box klassiga float:right; xossasini qo‘shganda nima o‘zgarish bo‘ldi?





2-savol

Endi esa red_box klassiga float:right; xossasini qo‘shishga harakat qiling.

Qanday o‘zgarish kuzatdingiz?

Keling, yana bir narsani sinab ko‘ramiz - ish maydoninig oxiriga matnli paragraf qo‘shamiz (ikkala qutidan keyin). Ushbu paragrafdan foydalanishingiz mumkin:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi sit amet mauris commodo. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Volutpat est velit egestas dui id ornare arcu. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Et malesuada fames ac turpis. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Sed risus ultricies tristique nulla. At auctor urna nunc id. Pharetra convallis posuere morbi leo. Quam quisque id diam vel quam elementum pulvinar etiam. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Amet risus nullam eget felis eget nunc lobortis.

Eslatma: Agar ushbu g‘alati matn nima ekanligiga qiziqayotgan bo‘lsangiz, bu lorem ipsum deb nomlanadi. Aslida, bu dizaynerlar tomonidan ko‘pincha veb-sahifani birlamchi ko‘rinishini yaratayotganda foydalanadigan hech qanday ma’noga ega bo‘lmagan matn. Bu haqda bu yerdan https://loremipsum.io/ ko‘proq ma’lumot olishingiz mumkin (va o‘zingizning "lorem ipsum" matningizni yaratishingiz mumkin).

3-savol

Matnli paragraf qo‘shganingizda nima bo‘ladi?

Izoh:

Bu holatni o‘ng tomonda suzib yuruvchi qutilar va ularning atrofida joylashgan matnli paragraf deb tushunishingiz mumkin.