Հասկանալով, թե ինչպես IFrames- ը աշխատում է կայքի դիզայնի մեջ
Երբ HTML- ի տարրը տեղադրեք ձեր HTML- ում , դուք ունեք երկու հնարավորություններ CSS ոճերի ավելացնելու համար:
- Դուք կարող եք ձեւավորել IFRAME- ին:
- Դուք կարող եք ձեւավորել էջը IFRAME ներսում (որոշակի պայմաններով):
Օգտագործելով CSS- ին `IFRAME տարրը
Առաջին բանը, որ դուք պետք է հաշվի առնեք, երբ ձեր գործվածքների ձեւավորումն այն է, IFRAME- ն է: Չնայած բրաուզերների մեծ մասը ներառում է iframes առանց շատ լրացուցիչ ոճերի, այնուամենայնիվ, լավ գաղափար է ավելացնել որոշ ոճեր, որպեսզի դրանք հետեւողական լինեն:
Ահա որոշ CSS ոճեր ես միշտ ընդգրկում եմ իմ iframes- ում.
- margin: 0;
- լրացնելով `0;
- սահման: ոչ;
- լայնությունը ` արժեքը ;
- բարձրությունը ` արժեքը ;
Լայնությունը եւ բարձրությունը սահմանելիս չափսը, որը համապատասխանում է իմ փաստաթղթին: Ահա մի օրինակ օրինակներ, որոնք չունեն ոճեր եւ մեկը պարզապես հարդարված հիմունքներով: Ինչպես տեսնում եք, այս ոճերը հիմնականում պարզապես հեռացնում են iframe- ի սահմանը, սակայն նրանք նաեւ ապահովում են, որ բոլոր բրաուզերները ցույց են տալիս, որ եթե նույն ծածկույթով, padding- ով եւ չափսերով:
HTML5- ը խորհուրդ է տալիս օգտագործել արտահոսքի գոտին ոլորման բլոկները հեռացնելու համար, բայց դա հուսալի չէ: Այսպիսով, եթե ցանկանում եք հեռացնել կամ վերափոխել ոլորման սալերը, ապա պետք է նաեւ օգտագործեք գույնի հատկանիշը ձեր iframe- ում: Սկավառակի հատկանիշն օգտագործելու համար այն ավելացրեք ցանկացած այլ հատկանիշ, ինչպես նաեւ ընտրեք երեք արժեքներից մեկը `այո, ոչ, կամ ավտո: այո, զննարկիչը պատմում է, որ միշտ չէ, որ անհրաժեշտ է ոլորման սալիկներ: ոչ ոք չի ասում, թե անհրաժեշտ է, թե ոչ:
auto- ը կանխադրված է եւ ներառում է ոլորման սալերը, երբ դրանք անհրաժեշտ են եւ հեռացնում դրանք, երբ դրանք չեն:
Ահա թե ինչպես ջնջել ձախողման հատկանիշը:
scrolling = "no" >
Սա iframe է:
HTML5- ում գոլորշիացումն անջատելու համար դուք պետք է օգտագործեք արտահոսքի գույք: Սակայն, ինչպես դուք կարող եք տեսնել այս օրինակներում, այն չի աշխատում հուսալիորեն բոլոր բրաուզերում:
Ահա թե ինչպես Դուք կարող եք անջատել ամբողջ ժամանակ ձգվող գույքի հետ:
style = "overflow: ոլորման;" >
Սա iframe է:
Չափելու հնարավորություն չկա ամբողջովին ջնջել գոլորշի գույքը:
Շատ դիզայներները ցանկանում են, որ իրենց տառերը խառնվեն էջի ֆոնի վրա, որպեսզի ընթերցողները չգիտեն, որ եթե դրանք նույնիսկ այնտեղ են: Բայց դուք կարող եք նաեւ ավելացնել ոճեր, որպեսզի դրանք առանձնանա: Սահմանները կարգավորելու համար, եթե iframe- ը ավելի հեշտությամբ ցույց է տալիս, հեշտ է: Պարզապես օգտագործեք սահմանային ոճի գույքը (կամ դրա հետ կապված սահմանի վերեւ, սահմանի աջ, սահմանային-ձախ, եւ սահմանի ներքեւի հատկություններ) սահմանները ոճավորելու համար.
iframe {
border-top: # c00 1px կետավոր;
border-right: # c00 2px կետավոր;
border-left: # c00 2px կետավոր;
border-bottom: # c00 4px կետավոր;
}
Բայց դուք չպետք է դադարեք ոտքով շարժվելով եւ սահմաններով: Դուք կարող եք կիրառել բազմաթիվ CSS ոճեր ձեր iframe- ին: Այս օրինակը օգտագործում է CSS3- ի ոճերը `iframe- ը ստվերում, կլորացված անկյուններում եւ 20 աստիճան պտտվում:
iframe {
margin-top: 20px;
margin-bottom: 30px;
-մոզ-սահման-շառավիղ `12px;
-հայտնի-սահման-շառավիղ `12px;
սահմանային շառավղ `12px;
-moz-box-shadow: 4px 4px 14px # 000;
- վեբ-տուփ-ստվեր: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-մոզ-փոխակերպում. պտտել (20 դեգ);
-վեբիտ-վերափոխում. պտտել (20 դեգ);
-o-transform: պտտել (20 դեգ);
-ms-transform: rotate (20deg);
ֆիլտր: նախորդ: DXImageTransform.Microsoft.BasicImage (ռոտացիոն = .2);
}
Ստեղծագործություն, եթե `
Ստեղծվում է iframe- ի բովանդակությունը, կարծես ցանկացած այլ վեբ էջի ոճավորում: Սակայն, դուք պետք է մուտք ունենեք էջը խմբագրելու համար : Եթե չեք կարող խմբագրել էջը (օրինակ, այն այլ կայքում է):
Եթե դուք կարող եք էջը խմբագրել, ապա դուք կարող եք ավելացնել արտաքին ոճը կամ ոճերը հենց փաստաթղթում այնպես, ինչպես դուք ցանկանում եք ոճը տեղադրել ձեր կայքում: