Kuptimi se si IFrames punon në dizajnimin e faqes
Kur futni një element në HTML , ju keni dy mundësi për të shtuar stilet CSS në të:
- Ju mund të stilit vetë IFRAME.
- Ju mund të stilizoni faqen brenda IFRAME (nën kushte të caktuara).
Përdorimi i CSS në Stilin e Elementit IFRAME
Gjëja e parë që duhet marrë në konsideratë kur dizajnoni iframet tuaj është vetë IFRAME. Ndërsa shumica e shfletuesve përfshijnë iframes pa shumë stile shtesë, është ende një ide e mirë për të shtuar disa stile për t'i mbajtur ato në përputhje.
Këtu janë disa stile CSS që unë gjithmonë përfshij në iframet e mia:
- margjina: 0;
- mbushje: 0;
- kufiri: asnjë;
- gjerësia: vlera ;
- lartësia: vlera ;
Me gjerësinë dhe lartësinë e vendosur në madhësinë që përshtatet në dokumentin tim. Këtu janë shembuj të një kornize pa stilet dhe një me vetëm bazat e vetëquajtur. Siç mund ta shikoni, këto stile kryesisht vetëm heqin kufirin rreth iframe, por gjithashtu sigurojnë që të gjithë shfletuesit të shfaqin iframe me të njëjtat kufij, mbushje dhe dimensione.
HTML5 rekomandon që të përdorni pronën e mbingarkesës për të hequr shiritë e lëvizjes, por kjo nuk është e besueshme. Pra, nëse doni të hiqni ose ndryshoni shiritat e rrotullimit, duhet gjithashtu të përdorni atributin scrolling në iframe tuaj. Për të përdorur atributin scrolling, shtoni atë si çdo atribut tjetër dhe pastaj zgjidhni një nga tre vlerat: po, jo, ose auto. po i tregon shfletuesit të përfshijë gjithmonë bare lëvizëse edhe nëse nuk janë të nevojshme. nuk thotë për të hequr të gjitha shufrat e rrotullimit nëse është e nevojshme apo jo.
auto është parazgjedhja dhe përfshin shiritë e lëvizjes kur ato janë të nevojshme dhe i heq ato kur ato nuk janë.
Këtu është se si ta fikni scrolling me atributin scrolling:
scrolling = "no"
Ky është një iframe.
Për të fikur scrolling në HTML5 ju duhet të përdorni pronën e tejmbushjes. Por, siç mund ta shihni në këta shembuj , nuk funksionon ende në të gjitha shfletuesit.
Ja se si do të aktivizonit me kalimin e gjithë kohës me pronën e tejmbushjes:
style = "overflow: scroll;"
Ky është një iframe.
Nuk ka asnjë mënyrë për ta fikur plotësisht scrolling me pronën e mbingarkesës.
Shumë designers duan iframet e tyre të përzier me sfondin e faqes ku ata janë në mënyrë që lexuesit nuk e dinë se iframes janë atje. Por ju gjithashtu mund të shtoni stilet për t'i bërë ato të dalin jashtë. Rregullimi i kufijve në mënyrë që iframe të shfaqet më lehtë është e lehtë. Përdorni vetëm pronën e stilit të kufijve (ose lidhet me kufirin e sipërm, kufirin e djathtë, kufirin e majtë dhe kufirin) për të stiluar kufijtë:
iframe {
kufiri i sipërm: # c00 1px pikëzuar;
kufiri i djathtë: # c00 2px pikëzuar;
kufiri i majtë: # c00 2px pikëzuar;
fundi i kufirit: # c00 4px me pika;
}
Por ju nuk duhet të ndaloni me scrolling dhe kufijtë për stilet tuaja. Ju mund të aplikoni shumë stile të tjera CSS në iframe tuaj. Ky shembull përdor stilet CSS3 për t'i dhënë iframe një hije, qoshe të rrumbullakëta dhe e ka rrotulluar atë 20 gradë.
iframe {
diferencë-lartë: 20px;
margjina-fund: 30px;
-moz-kufiri-kufiri: 12px;
-webkit-kufiri-rreze: 12px;
rrezja kufitare: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
kuti-hije: 4px 4px 14px # 000;
-moz-transformuar: rrotullohen (20deg);
-webkit-transformuar: rrotullohen (20deg);
-O-transformuar: rrotullohen (20deg);
-ms-transformuar: rrotullohen (20deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rrotullimi = .2);
}
Dizajnimi i përmbajtjes Iframe
Dizajni i përmbajtjes së një iframe është ashtu si styling ndonjë faqe tjetër web. Por, duhet të keni qasje në redaktimin e faqes . Nëse nuk mund ta ndryshoni faqen (për shembull, është në një faqe tjetër).
Nëse mund të ndryshoni faqen, atëherë ju mund të shtoni një fletë ose stilet e stilit të jashtëm në dokument ashtu siç dëshironi të stiloni ndonjë faqe tjetër në faqen tuaj.