ការយល់ដឹងពីរបៀបដែល IFrames ធ្វើការនៅក្នុងការរចនាគេហទំព័រ
នៅពេលអ្នកបង្កប់ធាតុនៅក្នុង HTML របស់អ្នកអ្នកមានឱកាសពីរដើម្បីបន្ថែម រចនាប័ទ្ម CSS ទៅវា:
- អ្នកអាចរចនា IFRAME ដោយខ្លួនឯង។
- អ្នកអាចរចនាទំព័រនៅក្នុង IFRAME (ក្រោមលក្ខខណ្ឌមួយចំនួន) ។
ដោយប្រើ CSS ដើម្បីធ្វើរចនាប័ទ្មធាតុ IFRAME
រឿងដំបូងដែលអ្នកគួរតែពិចារណានៅពេលដែលអ្នករៀបចំរចនាប័ទ្មរបស់អ្នកគឺ IFRAME ដោយខ្លួនឯង។ ខណៈពេលដែលកម្មវិធីរុករកភាគច្រើនរួមបញ្ចូល iframe ដោយគ្មានរចនាប័ទ្មច្រើននោះវានៅតែជាគំនិតដ៏ល្អក្នុងការបន្ថែមរចនាប័ទ្មមួយចំនួនដើម្បីរក្សាឱ្យពួកគេស្រប។
នេះគឺជារចនាប័ទ្ម CSS មួយចំនួនដែលខ្ញុំតែងតែបញ្ចូលនៅក្នុង iframes របស់ខ្ញុំ:
- រឹម: 0;
- ចន្លោះ: 0;
- ព្រំដែន: គ្មាន;
- ទទឹង: តម្លៃ ;
- កម្ពស់: តម្លៃ ;
ជាមួយទទឹងនិងកំពស់កំណត់ទំហំដែលត្រូវនឹងឯកសារខ្ញុំ។ នេះគឺជាឧទាហរណ៍នៃស៊ុមមួយដែលគ្មានរចនាប័ទ្មនិងមួយជាមួយគ្រាន់តែជាមូលដ្ឋានដែលតែងហៅ។ ដូចដែលអ្នកអាចឃើញរចនាប័ទ្មទាំងនេះភាគច្រើនគ្រាន់តែយកចេញស៊ុមជុំវិញ iframe ប៉ុន្ដែពួកគេក៏ធានាថាកម្មវិធីរុករកទាំងអស់បង្ហាញថា iframe ដែលមានរឹមទំហំផ្ទៃតុនិងវិមាត្រដូចគ្នា។
HTML5 ផ្ដល់អនុសាសន៍ថាអ្នកប្រើលក្ខណសម្បត្តិលើសចំណុះដើម្បីដករបាររមូរប៉ុន្តែមិនអាចទុកចិត្តបាន។ ដូច្នេះប្រសិនបើអ្នកចង់លុបឬប្ដូររបាររមូរអ្នកគួរតែប្រើគុណលក្ខណៈរមូរនៅលើ iframe របស់អ្នកផងដែរ។ ដើម្បីប្រើគុណលក្ខណៈរមូរបន្ថែមវាដូចជាគុណលក្ខណៈផ្សេងទៀតណាមួយហើយបន្ទាប់មកជ្រើសយកមួយក្នុងចំណោមបីតម្លៃ: បាទ / ចាសឬស្វ័យប្រវត្តិ។ បាទប្រាប់កម្មវិធីរុករកឱ្យរួមបញ្ចូលទាំងរបាររមូរជានិច្ចទោះបីជាពួកគេមិនត្រូវការ។ គ្មាននិយាយថាត្រូវយករបាររមូរទាំងអស់ចេញទោះបីត្រូវការឬអត់។
ស្វ័យប្រវត្តិគឺជាលំនាំដើមនិងរួមបញ្ចូលទាំងរបាររមូរនៅពេលដែលពួកគេត្រូវការហើយយកពួកវាចេញពេលពួកវាមិនមាន។
នេះជារបៀបបិទរមូរជាមួយគុណលក្ខណៈរមូរ:
scrolling = "no"
នេះជា iframe
ដើម្បីបិទការរមូរនៅក្នុង HTML5 អ្នកត្រូវបានសន្មតថាប្រើទ្រព្យសម្បត្តិលើសចំណុះ។ ប៉ុន្តែដូចដែលអ្នកអាចមើលឃើញនៅក្នុង ឧទាហរណ៍ទាំងនេះ វាមិនដំណើរការបានក្នុងកម្មវិធីរុករកទាំងអស់នៅឡើយទេ។
នេះជារបៀបដែលអ្នកនឹងបើករមូរគ្រប់ពេលវេលាជាមួយនឹងទ្រព្យសម្បត្តិលើសចំណុះ:
style = "overflow: scroll;"
នេះជា iframe
មិន មានវិធី ដើម្បីបិទការរមូរទាំងស្រុងជាមួយនឹងទ្រព្យសម្បត្តិលើសពីនេះទេ។
អ្នកច្នៃជាច្រើនចង់អោយហ្វេមរាមរបស់ពួកគេលាយជាមួយផ្ទៃខាងក្រោយរបស់ទំព័រដែលពួកគេមានដូច្នេះអ្នកអានមិនដឹងថា iframes មាននៅទីនោះទេ។ ប៉ុន្តែអ្នកក៏អាចបន្ថែមរចនាប័ទ្មដើម្បីធ្វើឱ្យពួកគេលេចធ្លោ។ ការកែតម្រូវស៊ុមដូច្នេះថា iframe បង្ហាញកាន់តែងាយស្រួលគឺងាយស្រួល។ គ្រាន់តែប្រើលក្ខណសម្បត្តិរចនាប័ទ្មស៊ុម (ឬវាទាក់ទងនឹងស៊ុមលើកំពូលស៊ុមស៊ុមឆ្វេងនិងលក្ខណសម្បត្តិស៊ុម) ដើម្បីរចនាស៊ុម:
iframe {
border-top: # c00 1px dotted;
ស៊ុមខាងស្តាំ: # c00 2px dotted;
ស៊ុមខាងឆ្វេង: # c00 2px dotted;
បាតខាងក្រោម: # c00 4px dotted;
}
ប៉ុន្តែអ្នកមិនគួរបញ្ឈប់ដោយរមូរនិងស៊ុមសម្រាប់រចនាប័ទ្មរបស់អ្នកទេ។ អ្នកអាចអនុវត្តរចនាប័ទ្ម CSS ជាច្រើនទៀតទៅក្នុងវចនានុក្រមរបស់អ្នក។ ឧទាហរណ៍នេះប្រើរចនាប័ទ្ម CSS3 ដើម្បីឱ្យ iframe ស្រមោលជ្រុងមូលនិងបង្វិលវា 20 ដឺក្រេ។
iframe {
margin-top: 20px;
រឹមខាងក្រោម: 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: បង្វិល (20deg);
-ms-transform: rotate (20deg);
តម្រង: progid: DXImageTransform.Microsoft.BasicImage (rotation = .2);
}
ធ្វើរចនាប័ទ្មមាតិកា Iframe
ការតុបតែងមាតិកានៃ iframe គឺដូចជាការធ្វើរចនាប័ទ្មទំព័របណ្ដាញផ្សេងទៀត។ ប៉ុន្តែអ្នក ត្រូវតែមានលទ្ធភាពកែប្រែទំព័រ ។ ប្រសិនបើអ្នកមិនអាចកែប្រែទំព័របានទេ (ឧទាហរណ៍វានៅលើគេហទំព័រផ្សេងទៀត) ។
ប្រសិនបើអ្នកអាចកែសម្រួលទំព័រនោះអ្នកអាចបន្ថែម សន្លឹករចនាប័ទ្មខាងក្រៅ ឬ រចនាប័ទ្ម ខាងក្រៅ នៅក្នុងឯកសារ ដូចគ្នានឹងអ្នកនឹងស្ទីលទំព័រវិបផតថលណាមួយនៅលើគេហទំព័ររបស់អ្នក។