IFrames хэрхэн вэбсайт дизайнд хэрхэн ажилладагийг ойлгох
Та өөрийн HTML- т элемент оруулахдаа CSS загварыг нэмэх хоёр боломж бий:
- Та IFRAME-г өөрийнхөөрөө хэвлэж болно.
- Та IFRAME доторх хуудсыг хэв маягаар (зарим нөхцөлд) хийж болно.
IFRAME элементийг CSS-г ашиглах
Хэрэв таны iframes хэлбэрийг загварчлах үед хамгийн эхний зүйл бол IFRAME өөрөө юм. Ихэнх хөтчүүд олон янзын загваргүй бол iframes-ийг багтаадаг боловч зарим загварыг нэмэх нь зүйтэй юм.
Энд би хэрвээ би өөрийн iframes дээр үргэлжлүүлэн оруулах зарим CSS загварууд байна:
- margin: 0;
- Налуу: 0;
- border: none;
- өргөн: утга ;
- өндөр: утга ;
Өргөн, өндрөөр миний баримт бичигт тохирсон хэмжээтэй тохирно. Энд ямар ч стильтэй, жаазтай загваруудын жишээ байна. Эдгээрээс харахад эдгээр загварууд нь зөвхөн iframe-ийн эргэн тойрон дахь хил хязгаарыг арилгах боловч бүх хөтчүүд нь ижил iframe нь ижил хүрээ, дэвсгэр, хэмжээ нь харуулах эсэхийг шалгаарай.
HTML5 нь гүйлгэх блокуудыг устгахын тулд overflow өмчийг ашиглахыг зөвлөдөг боловч энэ нь найдвартай биш юм. Тэгэхээр та scroll bar-ыг устгах эсвэл өөрчлөхийг хүсвэл өөрийн iframe дээр гүйлгэх шинж чанарыг ашиглах хэрэгтэй. Гүйлгэх шинж чанарыг ашиглахын тулд бусад атрибутуудын нэгэн адил нэмж, гурван утгын аль нэгийг сонгоно: yes, no, эсвэл auto. Тиймээ браузер хөтөчийг шаардлагатай биш ч гэсэн гүйлгээний буулгалтуудыг байнга оруулахыг хэлдэг. Шаардлагатай эсэхээс үл хамааран бүх гүйлгэх баарыг устгахыг хэлээгүй болно.
авто анхдагч бөгөөд шаардлагатай үед гүйлгэх буулгацыг оруулаад тэдгээрийг арилгах болно.
Гүйдэг гүйлгэх шинж чанар бүхий гүйлгэх үйлдлийг хэрхэн устгах талаар энд дарна уу:
scrolling = "no" >
Энэ бол iframe.
HTML5-ыг гүйлгэхийг болиулахын тулд та халих шинж чанарыг ашиглах ёстой. Гэхдээ эдгээр жишээнүүдээс харахад бүх хөтчүүдэд найдвартай ажиллахгүй байна.
Халаалтын үлдэгдэлтэй бүх цагийг хэрхэн гүйлгэхийг доор харуулав:
style = "overflow: scroll;" >
Энэ бол iframe.
Хальслах үл хөдлөх хөрөнгийн тусламжтай гүйлгэх ажиллагааг бүрэн зогсоох арга байхгүй .
Ихэнх дизайнерууд нь өөрсдийнх нь харьяалагдах iframes-ийг хүссэн хуудасныхаа арын хэсэгтэй холихыг хүсдэг. Гэхдээ та тэдгээрийг гаргахад зориулж стилийг нэмэх боломжтой. Хил хязгаарыг тохируулахын тулд iframe илүү хялбар байдаг. Хил орчмын өмчийг (эсвэл хил хязгаартай, хил, баруун, зүүн, хил хязгаартай холбоотой) ашигладаг хил хязгаарыг ашиглана уу:
iframe {
border-top: # c00 1px цэг;
border-right: # c00 2px цэг;
border-left: # c00 2px цэгэн;
border-bottom: # c00 4px тасархай;
}
Гэхдээ та стилийг нь гүйлгэх, хил хязгаарыг нь зогсоох хэрэггүй. Та өөрийн iframe руу олон CSS загварыг хэрэглэх боломжтой. Энэ жишээнд iframe нь сүүдэр, бөөрөнхий өнцөг үүсгэх, 20 градусыг эргүүлэхэд CSS3 стилийг ашигладаг.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
хилийн радиус: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
хайрцаг-сүүдэр: 4px 4px 14px # 000;
-moz-transform: rotate (20deg);
-webkit-transform: rotate (20deg);
-o-transform: rotate (20deg);
-с-хувиргах: эргэх (20deg);
шүүлтүүр: progid: DXImageTransform.Microsoft.BasicImage (rotation = .2);
}
Iframe агуулга дизайн хийх
Iframe-ийн агууламжийг өөр болгох нь бусад ямар ч веб хуудсыг загварчлахтай адил юм. Гэхдээ та хуудсыг засах эрхтэй байх ёстой . Хэрэв та хуудсыг засаж чадахгүй бол (жишээ нь, өөр сайт дээр байгаа).
Хэрвээ та хуудсыг засах боломжтой бол та өөрийн сайт дээр өөр вэб хуудсаа хэв маягаар хэвлэнэ.