Veb-sahifa Mizanpajining chap qismidagi rasmni hizalamoq uchun CSS-dan foydalanish
Bugungi kunda deyarli har qanday veb-saytga qarang va siz ushbu sahifalarning katta qismini tashkil etadigan matn va tasvirlarning kombinatsiyasini ko'rasiz. Matn va rasmlarni sahifaga qo'shish juda oson. Matnlar , paragraflar, ro'yxatlar va sarlavhalar kabi standart HTML teglar yordamida kodlanadi, vahiylar esa elementidan foydalanadi .
Ushbu matnni yaratish va ushbu rasmlarni birgalikda ishlash qobiliyati katta veb-dizaynerlarni ajratib turadi. Siz faqatgina matn va tasvirlarning bir-birining ortida paydo bo'lishini xohlamasligingiz kerak, bu blok-level elementlari sukut bo'yicha tartibga soladi. Yo'q, matn va tasvirlarning qanday oqibatlarga olib kelishi bilan bir qatorda sizning veb-saytingizning ingl. Dizayni bo'lishi bilan qanday nazorat qilishni xohlaysiz.
Sahifaning chap tomoniga mos keladigan tasvirga ega bo'lganda, o'sha sahifaning matni atrofida chop etilib, bosma dizayni va veb-sahifalar uchun umumiy dizayn usuli hisoblanadi. Internetda bu ta'sir tasvirni suzib yurish sifatida tanilgan . Ushbu uslub "float" uchun CSS xususiyatiga ega . Bu xususiyat chapga mos keladigan tasvirni o'ng tomoniga matnning oqishini ta'minlaydi. (Yoki o'ng tomonga o'ng tomonga burilgan tasvirni uning chap tomoniga). Keling, ushbu ingl. Effektga qanday erishish mumkinligini ko'rib chiqamiz.
HTML bilan boshlang
Sizga kerak bo'lgan birinchi narsa - HTML bilan ishlash uchun HTML bo'lishi kerak. Bizning misolimiz uchun matnning paragrafini yozamiz va paragraf boshida tasvirni qo'shamiz (matndan oldin, lekin ochilganidan so'ng
teg). HTML belgisi quyidagicha ko'rinadi:
Odatiy bo'lib, bizning veb-sahifamiz matn ustidagi rasm bilan ko'rsatiladi. Buning sababi, HTML-da tasvirlar blok darajadagi elementlardir. Bu degani, brauzer sukut bo'yicha tasvir elementidan oldin va keyin chiziqli uzatishni ko'rsatadi. CSS-ga o'girib, bu ko'rsatuv ko'rinishni o'zgartiramiz. Birinchidan, biz tasvir elementiga sinfni qo'shamiz. Ushbu klass bizning CSS-da keyinroq ishlatadigan "kanca" vazifasini bajaradi.
Bu "chap" sinf o'z-o'zidan hech narsa qilmasligini unutmang! Biz istagan uslubga erishishimiz uchun keyingi CSS- dan foydalanishimiz kerak.
CSS uslublari
Bizning HTML-da, "chap" sinf attributimiz, shu jumladan, endi biz CSS-ga murojaat qilishimiz mumkin. Biz rasmni suzib yuradigan va uning yonida biroz bo'shliqni qo'shadigan uslub sahifamizga qoida qo'shamizki, natijada tasvirni oxiriga surib qo'yadigan matn unga juda yaqin kelmaydi. Quyida siz yozishingiz mumkin CSS:
.left {float: chap; padding: 0 20px 20px 0; }Ushbu uslub shu tasvirni chapga aylantiradi va tasvirning o'ng va pastiga biroz katak (ba'zi CSS stenograflari yordamida) qo'shiladi.
Agar brauzerda ushbu HTMLni o'z ichiga olgan sahifani ko'rib chiqsangiz, tasvirni chap tomonga aylantiriladi va xatning matni ikkalasi orasidagi intervalda mos hajmda ko'rinadi. Eslatib o'tamiz, biz foydalanadigan "chap" ning sinf qiymati o'zboshimchalik. Biz buni "chapda" degan ibora o'zi hech narsa qilmaganligi sababli chaqirishimiz mumkin edi. Bu sizga kerakli ingl. O'zgarishlarni belgilaydigan haqiqiy CSS uslubi bilan ishlaydigan HTMLda sinfning xususiyatiga ega bo'lishi kerak.
Ushbu uslublarni amalga oshirishning muqobil usullari
Tasvir elementini sinf attributiga berish va keyinchalik elementni suzib yuradigan umumiy CSS uslubini ishlatishning bu yondashuvi, bu "chapga burilgan tasvir" ko'rinishini faqat bitta usul bilan amalga oshirishingiz mumkin. Bundan tashqari, tasvirni sinchkovlik bilan o'chirib tashlashingiz va CSS-ga uslubini yanada aniqroq tanlash orqali yozishingiz mumkin. Misol uchun, bu tasvirning "asosiy tarkib" ning sinf qiymati bo'lgan bo'linmada joylashganligi haqidagi misolni ko'rib chiqaylik.
Ushbu tasvirni tarbiyalash uchun siz ushbu CSS-ni yozishingiz mumkin:
.main-content img {float: chap; padding: 0 20px 20px 0; }Ushbu sceario bo'yicha bizning rasmimiz chapga, matemat avvalgi kabi aylanib chiqqanda, lekin formatlashimizga qo'shimcha qiymat kiritishga hojat yo'q edi. Ushbu o'lchamda bajarish, kichikroq HTML faylini yaratishga yordam beradi va u boshqarishni osonlashtiradi va ishlashni yaxshilashga yordam beradi.
Va nihoyat, HTML uslubiga to'g'ridan-to'g'ri jihozlarni qo'shishingiz mumkin:
Ushbu usul " inline uslublar " deb nomlanadi. Tavsiya etilmaydi, chunki u tarkibiy tuzilish bilan elementning uslubini aniq birlashtiradi. Internetning eng yaxshi amaliyoti sahifaning uslubi va tuzilishi alohida bo'lib qolishi kerakligini belgilaydi. Bu sizning sahifangiz o'z tartibini o'zgartirishi va turli xil ekran o'lchamlari va sezgir veb-saytlari mavjud bo'lgan qurilmalarni qidirish kerakligi ayniqsa foydali. HTML-ga bog'langan sahifaning uslubi bo'lishi saytingizning turli xil ekranlar uchun kerakli ko'rinishini moslashtiradigan ommaviy axborot so'rovlarini yozishni qiyinlashtiradi.
Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 4/3/17 sanasida tahrirlangan.