របៀបប្រើ CSS ដើម្បីដាក់ប្លង់ដោយគ្មានតារាង

ប្លង់គ្មានតារាងបើកដែនកំណត់រចនាថ្មី

មាន មូលហេតុជាច្រើនដែលមិនប្រើតារាងសម្រាប់ប្លង់ ។ ហេតុផលមួយក្នុងចំណោមហេតុផលច្រើនដែលមនុស្សប្រើដើម្បីបន្តប្រើវាគឺដោយសារវាពិបាកក្នុងការធ្វើប្លង់ជាមួយ CSS ។ ទោះបីជាការសរសេរស្គ្រីប CSS ពិតជាមានលក្ខណៈកោងសិក្សាក៏ដោយនៅពេលដែលអ្នកយល់ពីរបៀបធ្វើ CSS layout អ្នកប្រហែលជាមានការភ្ញាក់ផ្អើលចំពោះភាពងាយស្រួលរបស់វា។ ហើយនៅពេលដែលអ្នកបានរៀនអ្នកនឹងដោះស្រាយនូវហេតុផលទូទៅទីពីរដែលមនុស្សផ្តល់ឱ្យមិនប្រើ CSS- "វាលឿនជាងមុនក្នុងការសរសេរតារាង។ " វាលឿនជាងព្រោះអ្នកដឹងពីតារាងប៉ុន្តែនៅពេលអ្នករៀន CSS អ្នកអាចនឹងរហ័ស ជាមួយនោះ។

ការគាំទ្រកម្មវិធីរុករក CSS នៃទីតាំង

ការកំណត់ទីតាំង CSS ត្រូវបានគាំទ្រយ៉ាងល្អនៅក្នុង កម្មវិធីរុករកទំនើបទាំងអស់ ។ លុះត្រាតែអ្នកកំពុងបង្កើតគេហទំព័រសម្រាប់ Netscape 4 ឬ Internet Explorer 4 អ្នកអានរបស់អ្នកមិនគួរមានបញ្ហាក្នុងការមើលទំព័របណ្តាញ CSS របស់អ្នកទេ។

ពិចារណាឡើងវិញអំពីរបៀបដែលអ្នកបង្កើតទំព័រមួយ

នៅពេលអ្នកបង្កើតវែបសាយដោយប្រើតារាងអ្នកត្រូវតែគិតជាទ្រង់ទ្រាយ តារាង ។ នៅក្នុងពាក្យផ្សេងទៀត, អ្នកកំពុងគិតនៅក្នុងលក្ខខណ្ឌនៃកោសិកានិងជួរដេកនិងជួរឈរ។ ទំព័របណ្ដាញរបស់អ្នកនឹងឆ្លុះបញ្ចាំងពីវិធីសាស្ត្រនេះ។ នៅពេលដែលអ្នកផ្លាស់ទីទៅការរចនាទីតាំង CSS អ្នកនឹងចាប់ផ្តើមគិតអំពីទំព័ររបស់អ្នកទាក់ទងនឹងមាតិកាព្រោះមាតិកាអាចដាក់នៅកន្លែងណាមួយដែលអ្នកចង់បាននៅក្នុងប្លង់ - សូម្បីតែស្រទាប់នៅលើមាតិកាផ្សេងទៀត។

គេហទំព័រផ្សេងៗគ្នាមានរចនាសម្ព័ន្ធផ្សេងៗគ្នា។ ដើម្បីបង្កើតទំព័រដែលមានប្រសិទ្ធភាពចូរវាយតម្លៃរចនាសម្ព័ន្ធនៃទំព័រដែលបានផ្តល់ឱ្យមុនពេលអ្នកដាក់មាតិកាទៅវា។ ទំព័រគំរូមួយអាចរួមបញ្ចូលផ្នែកខុសគ្នាប្រាំ:

  1. បឋមកថា ។ ទំព័រដើមទៅការផ្សាយពាណិជ្ជកម្មបដាឈ្មោះវែបសាយតំណភ្ជាប់ចំណងជើងអត្ថបទនិងអ្វីផ្សេងទៀត។
  2. ជួរឈរស្តាំ ។ នេះគឺជាផ្នែកខាងស្តាំនៃទំព័រដែលមានប្រអប់ស្វែងរក, ពាណិជ្ជកម្ម, ប្រអប់វីដេអូនិងតំបន់ដើរទិញឥវ៉ាន់។
  3. មាតិកា ។ អត្ថបទនៃអត្ថបទមួយ, ប្រកាសកំណត់ហេតុបណ្ដាញឬរទេះដើរទិញឥវ៉ាន់ - សាច់និងដំឡូងនៃទំព័រ។
  4. ពាណិជ្ជកម្មក្នុងតួ ។ ការផ្សាយពាណិជ្ជកម្មក្នុងតួក្នុងមាតិកា។
  5. បាតកថា ។ ការរុករកខាងក្រោម, ព័ត៌មានអ្នកនិពន្ធ, ពត៌មានសិទ្ធិអ្នកនិពន្ធ, បដាផ្សព្វផ្សាយពាណិជ្ជកម្មទាបនិងតំណដែលពាក់ព័ន្ធ។

ជាជាងដាក់ធាតុទាំងប្រាំនៅក្នុងតារាងប្រើធាតុផ្នែក HTML5 ដើម្បីកំណត់ផ្នែកខុសគ្នានៃមាតិកាហើយបន្ទាប់មកប្រើការកំណត់ទីតាំង CSS ដើម្បីដាក់ធាតុមាតិកានៅលើទំព័រ។

ការកំណត់ផ្នែកមាតិការបស់អ្នក

បន្ទាប់ពីអ្នកបានកំណត់តំបន់មាតិកាផ្សេងគ្នានៃគេហទំព័ររបស់អ្នកអ្នកត្រូវសរសេរវាទៅក្នុង HTML របស់អ្នក។ ខណៈពេលដែលអ្នកអាចដាក់ជាទូទៅដាក់ផ្នែករបស់អ្នកនៅក្នុងលំដាប់ណាមួយវាជាគំនិតដ៏ល្អដើម្បីដាក់ផ្នែកដ៏សំខាន់បំផុតនៃទំព័ររបស់អ្នកជាមុនសិន។ វិធីសាស្រ្តនេះនឹងជួយជាមួយការបង្កើនប្រសិទ្ធិភាពម៉ាស៊ីនស្វែងរកផងដែរ។

ដើម្បីបង្ហាញការដាក់ទីតាំងមើលឃើញទំព័រដែលមានជួរឈរបីប៉ុន្តែមិនមានបឋមកថាឬបាតកថាទេ។ អ្នកអាចប្រើទីតាំងដើម្បីបង្កើតប្រភេទប្លង់ណាមួយដែលអ្នកចូលចិត្ត។

សម្រាប់ប្លង់ជួរឈរបីជួរកំណត់ផ្នែកបី: ជួរឈរខាងឆ្វេងជួរឈរខាងស្តាំនិងមាតិកា។

ផ្នែកទាំងនេះនឹងត្រូវបាន instantiated ដោយប្រើធាតុ ARTICLE សម្រាប់មាតិកានិងធាតុ SECTION ចំនួនពីរសម្រាប់ជួរឈរទាំងពីរ។ អ្វីគ្រប់យ៉ាងក៏នឹងមានគុណលក្ខណៈកំណត់វាផងដែរ។ នៅពេលអ្នកប្រើគុណលក្ខណៈលេខសម្គាល់អ្នកត្រូវតែសរសេរឈ្មោះពិសេសសម្រាប់លេខសម្គាល់នីមួយៗ។

កំណត់ទីតាំងមាតិកា

ដោយប្រើ CSS, កំណត់ទីតាំងសម្រាប់ធាតុ ID'd របស់អ្នក។ រក្សាទុកព័ត៌មានទីតាំងរបស់អ្នកនៅក្នុងការហៅស្ទីលដូចនេះ:

# មាតិកា {

}

មាតិកានៅក្នុងធាតុទាំងនេះនឹងយកទំហំធំតាមដែលអាចធ្វើបានពោលគឺ 100% ទទឹងនៃទីតាំងបច្ចុប្បន្នឬទំព័រ។ ដើម្បីប៉ះពាល់ទីតាំងនៃផ្នែកមួយដោយមិនបង្ខំវាឱ្យទទឹងថេរផ្លាស់ប្តូរគម្លាតឬលក្ខណៈសម្បត្តិរឹម។

សម្រាប់ប្លង់នេះកំណត់ជួរឈរពីរទៅទទឹងថេរហើយបន្ទាប់មកកំណត់ទីតាំងរបស់ពួកគេដាច់ខាតដូច្នេះពួកវានឹងមិនត្រូវបានប៉ះពាល់ដោយកន្លែងដែលពួកវាត្រូវបានរកឃើញនៅក្នុង HTML ។

# left-column {
ទីតាំង: ដាច់ខាត
ខាងឆ្វេង: 0;
ទទឹង: 150 ភីក;
រឹមឆ្វេង: 10px;
margin-top: 20px;
ពណ៌: # 000000;
ចន្លោះ: 3px;
}
# ស្តាំជួរឈរ {
ទីតាំង: ដាច់ខាត
ខាងឆ្វេង: 80%;
កំពូល: 20px;
ទទឹង: 140px;
padding-left: 10px;
z- index: 3;
ពណ៌: # 000000;
ចន្លោះ: 3px;
}

បន្ទាប់មកសម្រាប់ផ្ទៃមាតិកាកំណត់រឹមនៅខាងស្តាំនិងទៅឆ្វេងដូច្នេះមាតិកានឹងមិនជាន់លើជួរឈរខាងក្រៅពីរ។

# មាតិកា {
កំពូល: 0px;
រឹម: 0px 25% 0 165px;
ចន្លោះ: 3px;
ពណ៌: # 000000;
}

ការកំណត់ទំព័ររបស់អ្នកដោយប្រើ CSS ជំនួសឱ្យតារាង HTML តម្រូវឱ្យមានជំនាញបច្ចេកទេសបន្តិចបន្តួចប៉ុន្តែការទូទាត់គឺអាស្រ័យលើការរចនាដែលអាចបត់បែនបាននិងងាយស្រួលជាងមុននិងភាពងាយស្រួលក្នុងការកែតម្រូវរចនាសម្ព័ន្ធរបស់អ្នកនៅពេលក្រោយ។