IFrames veb-sayt dizayni qanday ishlashini tushunish
Agar siz HTML-ga element biriktirganingizda, unga CSS uslubini kiritish uchun ikkita imkoniyat bor:
- IFRAME-ni o'zingiz tarbiyalashingiz mumkin.
- IFRAME ichidagi sahifani (ma'lum shartlar ostida) tarashingiz mumkin.
IFRAME elementini CSS uslubida ishlatish
Sizning iframeingizni bezashda e'tiborga olish kerak bo'lgan birinchi narsa IFRAME o'zi. Ko'pgina brauzerlar qo'shimcha uslublarsiz iframelarni o'z ichiga olgan bo'lsa-da, ularni izchil saqlash uchun ba'zi bir uslublarni qo'shish yaxshi fikr.
Men doimo o'z iframeğimde bo'lgan ba'zi CSS uslublari:
- margin: 0;
- padding: 0;
- chegara: yo'q;
- kenglik: qiymat ;
- height: qiymat ;
Kenglik va balandligim hujjatimga mos keladigan hajmga o'rnatiladi. Bu erda hech qanday uslubi bo'lmagan va faqatgina uslublar bilan ishlangan bir ramka namunalari keltirilgan. Ko'rib turganingizdek, ushbu uslublar asosan iframe atrofidagi chegarani olib tashlaydi, lekin ular ham barcha brauzerlar bir xil chekkalari, to'ldirishlari va o'lchamlari bilan iframe ko'rsatilishini ta'minlaydi.
HTML5 o'tish joylarini olib tashlash uchun ortiqcha xususiyatidan foydalanishingizni tavsiya qiladi, ammo bu ishonchli emas. Shunday qilib, agar siz siljitish panellarini olib tashlash yoki o'zgartirishni xohlasangiz, sizning iframe'ingizda o'tish xususiyatidan foydalaning. O'tkazish funktsiyasidan foydalanish uchun uni boshqa barcha xususiyatlar kabi qo'shing va keyin uchta qiymatdan birini tanlang: ha, yo'q yoki avtomatik. Ha, brauzerda har doim kerakli bo'lmasa o'tish paneli qo'shishni bildiradi. kerakli yoki yo'qligini barcha kaydirish satrlarini olib tashlamaydi.
Avtomatik sukut esa, kerak bo'lganda o'tish joylarini o'z ichiga oladi va ular yo'q bo'lganda ularni olib tashlaydi.
O'tkazish xususiyati bilan o'tishni qanday o'chirish kerak:
scrolling = "yo'q" >
Bu iframe.
HTML5-da skanerlashni o'chirish uchun ortiqcha xususiyatini ishlatishingiz kerak. Biroq, ushbu misollarda ko'rib turganingizdek, barcha brauzerlarda ishonchli ishlamaydi.
Tez-tez yuz beradigan xususiyatlar bilan har doim aylanishni qanday qilib yoqishingiz mumkin:
style = "overflow: scroll;" >
Bu iframe.
To'liq toshqin xususiyati bilan o'tishni to'liq o'chirish uchun hech qanday usul yo'q .
Ko'plab dizaynerlar o'zlarining iframe'lari sahifadagi fon bilan aralashishlarini istashadi, shuning uchun o'quvchilar hatto iframalar ham borligini bilishmaydi. Lekin siz ularni turlicha qilish uchun jihozlarni qo'shishingiz mumkin. Iframe yanada qulay ko'rinish uchun chegaralarni sozlash oson. Chegara uslubini ishlatish uchun (yoki uning chegara yuqori, chegara-o'ng, chegara-chap va chegara pastki xususiyatlari) chegara uslubini ishlatishingiz mumkin:
iframe {
chegara yuqori: # c00 1px nuqta;
border-o'ng: # c00 2px nuqta;
chegara-chap: # c00 2px nuqta;
pastki taglik: # c00 4px nuqta;
}
Lekin uslublaringiz uchun aylanish va chegara bilan to'xtamaslik kerak. Sizning iframeingizga boshqa ko'pgina CSS uslublarini qo'llashingiz mumkin. Ushbu misol iframeni soya, burchakli yumaloq burchaklar bilan ta'minlash va 20 daraja qaytarish uchun CSS3 uslubini ishlatadi.
iframe {
margin-to'p: 20px;
margin-bottom: 30px;
-moz-chegara radiusi: 12px;
-webkit-border-radius: 12px;
chegara radiusi: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
quti-shadow: 4px 4px 14px # 000;
-moz-konvertatsiya: aylantirish (20deg);
-webkit-transform: aylantirish (20deg);
-o-konvertatsiya: aylantirish (20deg);
-ms-transform: aylantirish (20deg);
filtri: prodid: DXImageTransform.Microsoft.BasicImage (rotation = .2);
}
Iframe tarkibini shakllantirish
Agar iframe mazmunini shakllantirish boshqa veb-sahifalarni yaratish kabi. Lekin siz sahifani tahrir qilishingiz kerak . Agar siz sahifani tahrir qila olmasangiz (masalan, boshqa saytga tegishli bo'lsa).
Agar sahifani tahrirlashingiz mumkin bo'lsa, tashqi uslublar jadvalini yoki uslubingizni to'g'ridan-to'g'ri hujjatingizga saytingizdagi boshqa veb-sahifalarni tarashingiz kabi qo'shishingiz mumkin.