Chuqur teglar bilan veb-sahifalarda qiziqarli yo'nalishlarni yaratish
Agar veb-saytlaringizga gorizontal, ajratuvchi uslublar kiritish kerak bo'lsa, sizda bir nechta variant mavjud. Ushbu satrlarni haqiqiy rasm fayllarini sahifangizga qo'shishingiz mumkin, ammo brauzeringiz ushbu fayllarni yuklab olish va yuklashni talab qiladi, bu sayt ishlashiga salbiy ta'sir ko'rsatishi mumkin.
Siz CSS chegarasi xususiyatidan foydalanib, elementlarning yuqori yoki pastki qismidagi satrlar sifatida ishlaydigan chegara qo'shishingiz va samarali ravishda ajratuvchi liniyangizni yaratishingiz mumkin.
Va nihoyat, gorizontal qoidalar uchun HTML elementidan foydalanishingiz mumkin
Landshaft qoida elementi
Biror elementni veb-sahifaga joylashtirgan bo'lsangiz, ehtimol ushbu satrlarni ko'rsatishning asl uslubi ideal emasligini aniqlagan bo'lasiz. Ya'ni, ushbu elementlarning ingl. Ko'rinishini sizning saytingiz qanday ko'rinishini xohlashingizga moslashtirish uchun CSS-ga murojaat qilishingiz kerak.
Brauzer uni ko'rsatishni xohlagan uslubda asosiy HR tegi ko'rsatiladi. Zamonaviy brauzerlar, odatda, chiziqni yaratish uchun 100% kengligi, 2px balandligi va qora rangda 3D chegarasi bilan unstyled HR teglarini aks ettiradi.
Bu erda standart HR elementining namunasi yoki siz bu tasvirni zamonaviy brauzerlarda qanday ko'rinishga ega bo'lmagan HR ko'rinishida ko'rishingiz mumkin.
Kenglik va balandlik Brauzerlar uchun izchildir
Veb-brauzerlar bo'ylab yagona uslublar kengligi va uslublari. Ular chiziq qanchalik katta bo'lishini belgilaydi. Kenglik va balandlikni aniqlamasangiz, standart kenglik 100% va standart balandligi 2px.
Ushbu misolda kenglik ota-elementning 50% ni tashkil qiladi (ushbu misollar quyida keltirilgan barcha inline uslublarini o'z ichiga oladi: ishlab chiqarish muhitida ushbu uslublar barcha sahifalarda boshqaruv qulayligi uchun tashqi stil sahifasida yoziladi):
style = "width: 50%;">
Va bu misolda balandlik 2em:
style = "height: 2em;">
Chegaralarni o'zgartirish qiyin bo'lishi mumkin
Zamonaviy brauzerlarda brauzer chiziqni chegara sozlash yo'li bilan quradi. Shunday qilib, chegarani uslub xususiyati bilan olib tashlasangiz, satr sahifada yo'qoladi. Ko'rib turganingizdek, (masalan, chiziqlar ko'rinmasligi uchun hech narsa ko'rmaysiz) bu misolda:
style = "border: none;">
Chegara kattaligini, rangini va uslubini sozlash chiziqning turlicha ko'rinishini ta'minlaydi va barcha zamonaviy brauzerlarda bir xil ta'sirga ega bo'ladi. Misol uchun, bu namoyishda chegara qizil, chizilgan va 1 piksel kenglikda:
style = "border: 1px dashed # 000;">
Ammo agar siz chegara va balandlikni o'zgartirsangiz, uslublar zamonaviy brauzerlarda juda qadimgi brauzerlarda juda oz farq qiladi. Ushbu misolda ko'rib turganingizdek, IE7 va undan keyingi versiyalarda (brauzer eskirib qolgan va Microsoft tomonidan qo'llab-quvvatlanmaydigan) brauzerda boshqa brauzerlarda (IE8 va yuqorida ko'rsatilgan) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Ushbu qadimgi brauzerlar bugungi kunda veb-dizaynda katta tashvish emas, chunki ular asosan zamonaviy variantlar bilan almashtirildi.
Orqa fon rasmlari bilan bezatilgan chiziqni yarating
Agar rang o'rniga, Sizning HR uchun fon tasvirini belgilashingiz mumkin, shunda u siz xohlaganingizga o'xshab ko'rinadi, ammo sizning belgilaringizda semantik tarzda ko'rsatiladi.
Ushbu misolda biz uchta to'lqinli chiziqdan bo'lgan tasvirni ishlatdik. Buni hech qanday takrorlanmas fon tasviri sifatida o'rnatish orqali, siz kitoblarda ko'rgan kabi ko'rinadigan kontentda tanaffus hosil qiladi:
style = "height: 20px; fon: #fff url (aa010307.gif) Yo'q, takroriy o'tish markazi; border: none;">
Chiqarilish elementlari
CSS3 bilan siz o'zingizning satrlarni yanada qiziqarli qilishingiz mumkin. HR elementi an'anaviy ravishda gorizontal chiziqdir, lekin CSS-ni o'zgartirgandan so'ng, ular qanday ko'rinishini o'zgartirishingiz mumkin. Chiqish elementidagi sevimli o'zgarish aylantirishni o'zgartirishdan iborat.
Siz HR elementini faqat biroz diagonali qilib aylantira olasiz:
soat {
-moz-konvertatsiya: aylantirish (10deg);
-webkit-transform: aylantirish (10deg);
-o-konvertatsiya: aylantirish (10deg);
-ms-transform: aylantirish (10deg);
aylantirish: aylantirish (10deg);
}
Yoki uni butunlay vertikal ravishda aylantira olasiz:
soat {
-moz-konvertatsiya: aylantirish (90deg);
-webkit-transform: aylantirish (90deg);
-o-konvertatsiya: aylantirish (90deg);
-ms-transform: aylantirish (90deg);
aylantirish: aylantirish (90deg);
}
Shuni esda tutingki, HRni hujjatdagi mavjud joylashuviga qarab qaytaradi, shuning uchun sizga kerakli joyni olish uchun joylashishni aniqlashni o'zgartirishingiz kerak bo'ladi. Buni dizaynga vertikal chiziqlar qo'shish uchun ishlatish tavsiya etilmaydi, biroq bu qiziqarli natijaga erishishning bir usuli hisoblanadi.
Sizning sahifalaringizda qatorlarni qabul qilishning yana bir usuli
Ba'zi odamlar HR elementini ishlatish o'rniga boshqa narsalarning chegaralariga tayanmoqdalar. Ammo ba'zida HRni chegaralarni o'rnatishdan ko'ra foydalanish ancha qulayroq va oson. Ba'zi brauzerlardagi qutilarga oid modellar muammolarni hatto chegara tuzish ham mumkin.