Veb-sahifadagi elementlarni qanday hizalamak va qanday yuvish mumkin

Veb-sahifadagi narsalarni joylashtirish uning umumiy dizayni uchun juda muhimdir. Jadvallardan foydalanish (masalan, tavsiya qilmaymiz ) kabi tartibga ta'sir qilishning boshqa usullari mavjud bo'lsa-da, eng yaxshi CSS-dan foydalanish .

Quyida tasvirlarni, jadvallarni, paragraflarni va boshqalarni uyg'unlashtirish uchun sodda CSS uslubidagi on-line xususiyatidan qanday foydalanishni ko'rib chiqamiz.

Eslatma: Bu usullar tashqi uslublar jadvallarida ham ishlatilishi mumkin, ammo bular birma-bir narsalar uchun qo'llanilishi va ehtimol bu tarzda qolishlari kerakligi sababli, quyida aytilganidek, in-layn uslubda foydalanish yaxshidir.

Matnning paragraflarini tekislang

Paragraf yorlig'i, veb-sahifangizni joylashtirishni boshlash uchun birinchi o'rin. Teglarni ochish va yopish quyidagicha:

Paragrafdagi matnning asl nusxasi sahifaning chap tomonida bo'lsa-da, paragraflarni o'ngga va markazga moslashtirishingiz mumkin.

Float xususiyatidan foydalanib, paragraflarni yuqori elementning o'ng yoki chap qismiga moslashtirishga imkon beradi. Ushbu yuqori element ichidagi boshqa elementlar suzilgan element atrofida oqadi.

Paragraf bilan eng yaxshi effekt olish uchun, konteyner (ota-ona) elementidan kichikroq bo'lgan xatboshilardagi kenglikni belgilash yaxshidir.

Matn ichidagi paragraflarni tekislang

Ehtimol, paragraf matnlari uchun eng qiziqarli hizalama, "brauzer" ga asosan, derazaning o'ng va chap tomonlariga mos keladigan matnni ko'rsatishi kerak bo'lgan "oqlanish" dir.

Matnni xatboshini oqlash uchun siz matnni aylantirish xususiyatidan foydalanasiz.

Matnni align xususiyatidan foydalanib, xatning ichidagi barcha matnlarni o'ngga yoki chapga (asl qiymati) ham moslashtirishingiz mumkin.

Matn hizalamak xususiyati matnni element ichidagi hizalamaydi. Texnik jihatdan, paragraf yoki boshqa elementda mavjud bo'lgan tasvirlarni moslashtirishga hojat yo'q, lekin ko'pchilik brauzerlar ushbu xususiyat uchun ichki ko'rinish sifatida tasvirlarni ko'rib chiqishadi.

Rasmlarni hizalamak

Rasm yorlig'i ustida float xususiyatidan foydalanib, sahifadagi rasmlarning joylashishini va matn atrofida qanday qilib o'ralishini belgilashingiz mumkin.

Yuqoridagi xatboshilarga o'xshab, tasvir yorlig'idagi float uslubi xususiyati rasmingizni sahifaga joylashtiradi va brauzerda matnni va shu rasm atrofidagi boshqa elementlarni qanday oqimlashini bildiradi.

Yuqoridagi rasm yorlig'ini ta'qib qilgan matn, tasvir ekranning chap qismida ko'rsatilgandek, o'ng tomonga oqadi.

Agar matn matn atrofida o'ralganlikni to'xtatishni xohlasam, aniq xususiyatdan foydalanaman:


style = "white": chapga "

Paragraflardan ham ko'proq hizalanish

Biroq, faqat xat yoki rasmdan ko'ra ko'proq moslashishni istasangiz nima bo'ladi? Siz faqatgina har bir xatboshida uslubiy xususiyatni qo'yishingiz mumkin, lekin siz undan foydalanishingiz mumkin bo'lgan teg yanada samarali bo'ladi:

Matn va tasvirlarni ( HTML teglar, shu jumladan) teglar va uslublar xususiyati (float yoki text-align) bilan to'ldirishingiz va bu bo'linmada mavjud bo'lgan barcha narsalar sizning xohishingizga moslashadi.

Bo'limdagi paragraflarga yoki tasvirlarga qo'shib qo'yiladigan hizalanmalar yorliqni bekor qilishni unutmaslik kerakligini yodda tuting.