MUSTAQIL ISH: RAXMATXANOVA SHODIYA GRID-VIEW NIMA? Ko’pgina veb-sahifalar panjara ko’rinishiga asoslangan, ya’ni sahifa ustunlarga bo’lingan RESPONSIVE WEB DESIGN? Ko’pgina veb-sahifalar panjara ko’rinishiga asoslangan, ya’ni sahifa ustunlarga bo’lingan: Ta’sirchan panjara ko’rinishi odatda 12 ta ustundan iborat bo’lib, umumiy kengligi 100% ni tashkil qiladi va brauzer oynasining o’lchamini o’zgartirganda kichrayadi va kengayadi. RESPONSIVE GRID-VIEW YARATISH. Keling, sezgir panjara ko’rinishini yaratishni boshlaylik. Birinchidan, barcha HTML elementlarida box-sizing xususiyati chegara qutisiga o’rnatilganligiga ishonch hosil qiling. Bu plomba va chegara elementlarning umumiy kengligi va balandligiga kiritilganligiga ishonch hosil qiladi. CSS-ga quyidagi kodni qo’shing: Quyidagi misolda ikkita ustunli oddiy javob beruvchi veb-sahifa ko’rsatilgan: RESPONSIVE GRID-VIEW YARATISH. Biroq, biz veb-sahifani ko’proq nazorat qilish uchun 12 ta ustunli sezgir panjara ko’rinishidan foydalanmoqchimiz. Avval bitta ustun uchun foizni hisoblashimiz kerak: 100% / 12 ustun = 8,33%. Keyin biz 12 ta ustunning har biri uchun bitta sinf yaratamiz, class=«col-» va bo’lim qancha ustun bo’lishi kerakligini belgilaydigan raqam: RESPONSIVE GRID-VIEW YARATISH
CSS
RESPONSIVE GRID-VIEW YARATISH Ushbu ustunlarning barchasi chapga suzib, 15px hajmga ega bo’lishi kerak RESPONSIVE GRID-VIEW YARATISH Har bir qator o’ralgan bo’lishi kerak . Qator ichidagi ustunlar soni har doim 12 tagacha qo’shilishi kerak RESPONSIVE GRID-VIEW YARATISH Qator ichidagi ustunlar hammasi chapga suzadi va shuning uchun sahifa oqimidan chiqariladi va boshqa elementlar ustunlar mavjud bo’lmagandek joylashtiriladi. Buning oldini olish uchun biz oqimni tozalaydigan uslubni qo’shamiz: . - Bundan tashqari, biz uni yanada yaxshiroq qilish uchun ba’zi uslublar va ranglarni qo’shmoqchimiz:
Misol uchun:
html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; }
menu li { padding: 8px; margin-bottom: 7px; background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; }
Do'stlaringiz bilan baham: |