2.3. Veb sahifani CSS qismini tayyorlash
Veb sahifamizning asosiy ko’rinishini ta’minlab beruvchi css qismiga ham yetib keldik. Css orqali biz sahifamizning dizayn qilish orqali foydalanuvchi uchun qulay holatga keltiramiz.
Birinchi bo’lib header uchun css qismini yozib chiqamiz. Headerimizning ichidagi elementlarini bir qatorga joylashtirishimiz uchun display flex berib, o’rtaga joylashtirish uchun esa align-itemas ga center berib, navbar qismidagi list dagi nuqtalarni yoqotish uchun list-style ga none qiymatini berib olamiz.
Header qismimizning tepa va pastdan joy ochib olishimiz kerak buning uchun padding buyrug’idan foydalanamiz (2.15-rasm).
2.15-rasm. Header sectionga css orqali stillar berish
Intro qismiga css berish jarayonida intro qismidagi rasmni joylashtirish uchun background-image buyrugidan foydalanamiz. Ya’ni rasmni fon sifatida joylashtirib olamiz va rasm joyini o’zgartirishimiz uchun position absolute buyrugini berib olib, uning right va top qiymatlarini o’zgartirish orqali rasmni o’zimizga kerakli joyga joylashtirib olamiz.
Textlarimizdan chiqadigan tabiiy margin ni yoqotish uchun marginga 0 qiymatni berib olamiz (2.16-rasm).
2.16-rasm. Intro sectionga css orqali stillar berish
Services qismida ro’yxat berib olgan edik birinchi navbat ro’yxatimizdagi nuqtalarni olib tashlaymiz. Va textimiz ostidagi hr orqali chizib olgan chizig’imizni ham kichraytirib olamiz. Buning uchun uning vidth ni o’zgartiramiz. Textlarimizni o’rtaga olib kelish uchun text-align ga center buyrug’ini beramiz (2.17-rasm).
2.17-rasm. Our-services sectionga css orqali stillar berish
Providers sectionni qilish davomida yangi buyruqdan foydalanamiz bu birinchi bo’limda rasm o’ng tarafda turibdi pastda esa chap tarafda turibdi keyingi elementni o’zgartirish uchun display flex ichidan chiqadigan flex-direction ga rov-reverse buyrug’ini beramiz.
2.18-rasm. Providers sectionga css orqali stillar berish
Customer sectionimizda birinchi navbatda orqa fondagi gradient rang berib olamiz. Buning uchun background-image ning linear-gradient buyrug’i orqali rang berib olamiz. Keyingi navbatda esa divimizga o’lchamini berib olamiz (2.18-rasm).
2.19-rasm. Customer sectionga css orqali stillar berish
Article sectionimizga ham ro’yxatlarimiz tabiiy chiqadigan qiymatlarini olib tashlaymiz va kerakli stillarni beramiz (2.20-rasm)
2.20-rasm. Article sectionga css orqali stillar berish
Footer qismimizda ham orqa fonda gradient borligi sabab, birinchi o’rinda orqa fonga gradient berib olamiz. Va elementlarni yonma-yon qilish uchun display flex berib kerakli stillar orqali joylashtirib olamiz (2.21-rasm).
2.21-rasm. Footer sectionga css orqali stillar berish
XULOSA
Loyiha ishining birinchi bobida HTML CSS haqida va VS Code dasturining nazariy asoslari va uning tahlili atroflicha o‘rganildi. Amaliy qismida esa VS Code dasturdan samarali foydalangan holda “Trafalgar” maketini verstka qilib, unga hover orqali stillar berildi.
Verstka qilish jarayonida yo‘l qo‘yilgan xatolardan tegishli xulosa chiqarildi. Veb saytlar va ularga dizaynini tayyorlash jarayoni nechog‘lik mashaqqatli va sermehnat ekanligi haqida xulosa qilindi. Mazkur loyiha ishini tayyorlash davomida veb sahifa va figma haqida bilim va amaliy ko‘nikmalar hosil qilindi. Umid qilamanki ushbu loyiha ishi kelajakda shu singari veb sahifalarni yaratishda yordam beradi.
| 