გააზრება როგორ IFrames მუშაობა ვებ დიზაინი
HTML- ში ელემენტის ჩართვისას თქვენ გაქვთ ორი შესაძლებლობა, რომ დაამატოთ CSS სტილები :
- თქვენ შეგიძლიათ სტილის IFRAME თავად.
- შეგიძლიათ სტილის გვერდი შიგნით IFRAME (გარკვეულ პირობებში).
CSS- ის გამოყენებით IFRAME ელემენტის სტილი
პირველი, რაც თქვენ უნდა განიხილონ, როდესაც თქვენი საიდუმლოების სტიმულირება თავად IFRAME არის. მიუხედავად იმისა, რომ ყველაზე ბრაუზერები მოიცავს iframes გარეშე ბევრი დამატებითი სტილის, მაინც კარგი იდეა დაამატოთ ზოგიერთი სტილის შენარჩუნება მათ თანმიმდევრული.
აქ არის გარკვეული CSS სტილის მე ყოველთვის მოიცავს ჩემს iframes:
- ზღვარი: 0;
- padding: 0;
- საზღვარი: არა;
- სიგანე: ღირებულება ;
- სიმაღლე: ღირებულება ;
სიგანე და სიმაღლე მითითებული ზომა, რომელიც შეესაბამება ჩემს დოკუმენტში. აქ არის მაგალითები ჩარჩოში არ სტილის და ერთი მხოლოდ საფუძვლებს ე.წ. როგორც ხედავთ, ეს სტილი ძირითადად მხოლოდ საზღვრის ირგვლივ წაშლის, მაგრამ ისინი ასევე უზრუნველყოფენ, რომ ყველა ბრაუზერმა აჩვენოს, რომ iframe იგივე მინდვრები, padding და ზომები.
HTML5 რეკომენდაციას იძლევა, რომ გამოიყენოთ გადახურული ქონება, რათა ამოიღოთ გრაგნილი ბარები, მაგრამ ეს არ არის საიმედო. ასე რომ, თუ გსურთ ამოიღოთ ან შეცვალოთ გრაგნილი ბარები, თქვენ უნდა გამოიყენოთ სკროლის ატრიბუტი თქვენს iframe ასევე. გამოიყენეთ სენსორული ატრიბუტი, დაამატეთ მას სხვა ატრიბუტის მსგავსად და შემდეგ აირჩიე სამი ღირებულების: დიახ, არა, ან ავტომატური. დიახ ეუბნება ბრაუზერი ყოველთვის მოიცავს გრაგნილი ბარები მაშინაც კი, თუ ისინი არ არის საჭირო. არ ამბობს, რომ ამოიღონ ყველა გრაგნილი ბარი, საჭიროა თუ არა.
ავტო არის სტანდარტული და მოიცავს scroll ბარები, როდესაც ისინი საჭირო და შლის მათ, როდესაც ისინი არ არიან.
აქ არის თუ როგორ უნდა გამორთოთ სენსორული სენსორული ატრიბუტი:
სენსორული = "არა" >
ეს არის iframe.
გამორთვა სენსორული HTML5- ში თქვენ უნდა გამოვიყენოთ overflow ქონება. მაგრამ როგორც ხედავთ ამ მაგალითებში ის არ მუშაობს საიმედოდ ყველა ბრაუზერში ამჟამად.
აი, როგორ გახდებოდით ყველა დროის გამორთვაზე დაფარვისას:
სტილი = "overflow: გადახვევა;" >
ეს არის iframe.
არ არსებობს გზა , რომ გამორთვა სრულად გადაფარვასთან ერთად.
ბევრი დიზაინერი სურს მათი iframes რომ ნაზავია ერთად ფონზე გვერდზე ისინი ისე, რომ მკითხველს არ იციან, რომ iframes კი არსებობს. მაგრამ თქვენ ასევე შეგიძლიათ დაამატოთ სტილის რათა ისინი გამოირჩევა. საზღვრების მორგება, რომ iframe გვიჩვენებს უფრო ადვილად. უბრალოდ გამოიყენეთ სასაზღვრო სტილის ქონება (ან ის დაკავშირებული საზღვრის ზედა, სასაზღვრო-მარჯვენა, საზღვრის მარცხენა და საზღვრის ქვედა თვისებები) სტილის საზღვრებში:
iframe {
საზღვრის ზედა: # c00 1px dotted;
საზღვრის უფლება: # c00 2px dotted;
საზღვრის მარცხნივ: # c00 2px dotted;
საზღვრის ქვედა: # c00 4px dotted;
}
მაგრამ თქვენ არ უნდა შეაჩერონ სენსორული და საზღვრები თქვენი სტილისთვის. შეგიძლიათ გამოიყენოთ ბევრი სხვა CSS სტილის თქვენს iframe. ეს მაგალითი იყენებს CSS3 სტილის მისცეს iframe shadow, მომრგვალო კუთხეებში და გარდამავალია 20 გრადუსი.
iframe {
ზღვარი ზედა: 20px;
ზღვარი-ქვედა: 30px;
-ზოგადი-საზღვრის რადიუსი: 12px;
-ვებ-საზღვრის რადიუსი: 12px;
საზღვრის რადიუსი: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-ვებრი-ყუთი-ჩრდილი: 4px 4px 14px # 000;
ყუთი-ჩრდილი: 4px 4px 14px # 000;
-მოზომი-გარდაქმნა: როტაცია (20deg);
-ვებბით-გარდაქმნა: როტაცია (20deg);
-ოქ-გარდაქმნა: როტაცია (20 დგ);
-ms- ტრანსფორმირება: როტაცია (20deg);
ფილტრი: პროგპი: DXImageTransform.Microsoft.BasicImage (როტაცია = .2);
}
სტილის iframe შინაარსი
სტატიის შინაარსით, თუ სხვა მსგავსი რამ არის სხვა ვებ-გვერდი. მაგრამ, თქვენ უნდა ჰქონდეთ წვდომის გვერდზე რედაქტირება . თუ არ შეგიძლიათ გვერდის რედაქტირება (მაგ., სხვა საიტზე).
თუ შეგიძლია რედაქტირება გვერდზე, მაშინ თქვენ შეგიძლიათ დაამატოთ გარე სტილის ფურცელი ან სტილის უფლება დოკუმენტში, ისევე როგორც თქვენს სტილში ნებისმიერი სხვა ვებ გვერდი.