IFrames веб-сайт дизайнында қалай жұмыс істейтінін түсіну
HTML элементіңізді ендіргенде, оған CSS стильдерін қосудың екі мүмкіндігі бар:
- Сіз IFRAME-ні өзінше көрсете аласыз.
- IFRAME ішіндегі бетті (белгілі бір жағдайларда) стиль аласыз.
IFRAME элементін мәнерге CSS үшін пайдалану
Біріншіден, IFRAME-ді өзіңіздің стилін жасау кезінде ескеру керек. Көптеген браузерлерде қосымша стильдерсіз iframes бар болса да, оларды бірізді сақтау үшін кейбір стильдерді қосудың жақсы идеясы бар.
Міне, мен әрқашан өзімнің ішектеріме кіретін CSS стильдері:
- маржа: 0;
- толтыру: 0;
- шекара: жоқ;
- ені: мән ;
- биіктігі: мән ;
Ені мен биіктігі менің құжатыма сәйкес өлшемге орнатылады. Мұнда стилі жоқ біреудің мысалдары және бір ғана стилі негіздері бар. Көріп отырғаныңыздай, бұл стильдер, негізінен, iframe айналасындағы шекараны алып тастайды, бірақ сонымен қатар, барлық браузерлерде сол шеттермен, толтырумен және өлшемдерімен iframe көрсетуін қамтамасыз етеді.
HTML5 айналдыру жолақтарын алып тастау үшін асыра сипатын пайдалануды ұсынады, бірақ бұл сенімді емес. Сондықтан, айналдыру жолақтарын алып тастау немесе өзгерту қажет болса, iframe-дағы жылжыту атрибутын пайдалану керек. Жылжыту атрибутын пайдалану үшін оны кез-келген басқа атрибут сияқты қосыңыз да, үш мәннің біреуін таңдаңыз: иә, жоқ немесе авто. иә, браузерде олар қажет болмаса да әрқашан жылжыту жолақтарын қосуға нұсқайды. қажеті жоқ немесе жоқ барлық айналдыру жолақтарын алып тастайды.
auto әдепкі болып табылады және қажет болғанда жылжыту жолақтарын қамтиды және олар болмаған кезде оларды жояды.
Жылжыту атрибутымен жылжуды қалай өшіру керек:
scrolling = «no» >
Бұл iframe.
HTML5 ішіне жылжуды өшіру үшін, толып жатқан сипатты пайдалануыңыз керек. Бірақ осы мысалдарда сіз барлық шолғыштарда сенімді жұмыс істемейді.
Жылжымалы сипатпен жылжуды қалайша қосатыныңызды келтіріңіз:
style = «overflow: scroll;» >
Бұл iframe.
Жылжыту сипатын толықтай жылжытудың ешқандай жолы жоқ .
Көптеген дизайнерлер өздерінің шифрлары беттердің фонымен араласқысы келеді, сондықтан оқырмандар тіпті егер бұл жерде орналасқан болса, білмейді. Бірақ сіз оларды стильдермен бөле аласыз. Iframe оңайырақ көрінуі үшін шекараларды реттеу оңай. Шекараларды стильдеу үшін шекара мәнерінің сипатын (немесе шекара-үстіңгі, шекара, оң жақ және сол жақ шекараның сипаттары) пайдаланыңыз:
iframe {
border-top: # c00 1px нүкте;
border-right: # c00 2px нүкте;
border-left: # c00 2px нүкте;
шекараның төменгі жағы: # c00 4px нүкте;
}
Бірақ сіздің стильдеріңіз үшін жылжу және шекаралармен тоқтамаңыз. Сіз өзіңіздің iframe-ге басқа көптеген CSS стильдерін қолдана аласыз. Бұл мысал iframe көлеңкесін, дөңгелек бұрыштарын беру және 20 градусқа айналдыру үшін CSS3 мәнерлерін пайдаланады.
iframe {
margin-top: 20px;
төменгі шет: 30px;
-moz-шекара-радиусы: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
қораптың көлеңке: 4px 4px 14px # 000;
-moz-transform: айналу (20deg);
-webkit-transform: айналу (20deg);
-o-transform: айналу (20deg);
-ms-transform: айналу (20deg);
сүзгі: прокси: DXImageTransform.Microsoft.BasicImage (ротация = .2);
}
Iframe мазмұнын бейнелеу
Егер iframe мазмұнын стильдеу кез-келген басқа веб-бетті стильдеу сияқты. Бірақ, сіз бетті өңдеуге рұқсатыңыз болуы керек . Егер сіз бетті өңдей алмасаңыз (мысалы, ол басқа сайтта болса).
Егер сіз бетті өңдей алсаңыз, сіз сыртқы мәнер кестесін немесе стильдерді сіздің сайтыңыздағы басқа кез-келген веб-стильді стиль жасайтын сияқты құжаттай аласыз.