01 នៃ 06
របៀបបង្កើតការភ្ជាប់ផ្ទាំងជាមួយ CSS និងគ្មានរូបភាព
ការរុករកនៅលើទំព័របណ្តាញគឺជាសំណុំបែបបទនៃបញ្ជីនិងការរុករកផ្ទាំងគឺដូចជាបញ្ជីផ្ដេក។ វាមានភាពងាយស្រួលក្នុងការបង្កើតផ្ទាំងតាម CSS ដោយផ្ដេកតែ CSS 3 ផ្តល់ឱ្យយើងនូវឧបករណ៍មួយចំនួនទៀតដើម្បីធ្វើឱ្យវាមើលទៅស្អាតជាងមុន។
ការបង្រៀននេះនឹងនាំអ្នកឆ្លងកាត់ HTML និង CSS ដែលត្រូវការដើម្បីបង្កើតម៉ឺនុយផ្ទាំង CSS ។ ចុចលើតំណនោះដើម្បីមើលពីរបៀបដែលវានឹងមើលទៅ។
ម៉ឺនុយផ្ទាំងនេះប្រើ ពុំមានរូបភាព គ្រាន់តែជា HTML និង CSS 2 និង CSS 3 ។ វាអាចត្រូវបានកែសម្រួលយ៉ាងងាយស្រួលដើម្បីបន្ថែមផ្ទាំងច្រើនឬផ្លាស់ប្តូរអត្ថបទនៅក្នុងពួកវា។
ការគាំទ្រកម្មវិធីរុករក
ម៉ឺនុយផ្ទាំងនេះនឹងដំណើរការនៅក្នុង កម្មវិធីរុករកធំ ៗ ទាំងអស់ ។ កម្មវិធីរុករកអ៊ីនធឺណិតនឹងមិនបង្ហាញជ្រុងមូលទេប៉ុន្តែបើមិនដូច្នេះទេវានឹងបង្ហាញផ្ទាំងដូចជា Firefox, Safari, Opera និង Chrome ។
02 នៃ 06
សរសេរបញ្ជីរបស់អ្នក
ម៉ឺនុយនិងផ្ទាំងរុករកទាំងអស់សុទ្ធតែពិតជាបញ្ជីគ្មានលំដាប់។ ដូច្នេះរឿងដំបូងដែលអ្នកចង់ធ្វើគឺសរសេរបញ្ជីតំណភ្ជាប់ដែលគ្មានលំដាប់ទៅកន្លែងដែលអ្នកចង់ឱ្យការរុករករបស់អ្នកត្រូវបានគេដាក់។
ការបង្រៀននេះត្រូវបានសន្មតថាអ្នកកំពុងសរសេរ HTML របស់អ្នកនៅក្នុងកម្មវិធីនិពន្ធអត្ថបទហើយអ្នកដឹងពីកន្លែងដាក់ HTML សម្រាប់ម៉ឺនុយរបស់អ្នកនៅលើទំព័របណ្តាញរបស់អ្នក។
សរសេរបញ្ជីគ្មានលំដាប់របស់អ្នកដូចនេះ:
- class = "tablist">
- CSS 3
- លេខសម្គាល់ = "បច្ចុប្បន្ន"> ថេប
- សម្រាប់
- ម៉ឺនុយ
អ្នកនឹងកត់សម្គាល់ថាកូដហៅចេញនូវរឿងពីរ: class = "tablist" និង id = "current" ។ ទីមួយត្រូវបាន ទាមទារ ។ ប្រសិនបើអ្នកមិនដាក់ថ្នាក់ tablist នៅលើបញ្ជីគ្មានលំដាប់របស់អ្នកនោះផ្ទាំងនឹងមិនដំណើរការទេ។ ទីពីរគឺស្រេចចិត្ត។ ដាក់លេខសម្គាល់ = "បច្ចុប្បន្ន" នៅលើផ្ទាំងណាមួយដែលអ្នកចង់បន្លិចនៅលើទំព័រនោះ។ ជាធម្មតាខ្ញុំប្រើវាដើម្បីបន្លិចទំព័រដែលខ្ញុំមានប៉ុន្តែអ្នកអាចប្រើវាដើម្បីបន្លិចផ្ទាំងសំខាន់បំផុត។ ឬអ្នកអាចយកវាចេញទាំងស្រុង។
03 នៃ 06
ចាប់ផ្តើមកែសម្រួលសន្លឹករចនាប័ទ្មរបស់អ្នក
អ្នកអាចប្រើ សន្លឹករចនាប័ទ្មខាងក្រៅ ឬ សន្លឹករចនាប័ទ្មខាងក្នុង ។ ទំព័រម៉ឺនុយគំរូប្រើសន្លឹករចនាប័ទ្មខាងក្នុងក្នុង
នៃឯកសារ។ដំបូងយើងនឹងរចនាម៉ូដ UL ខ្លួនឯង
នេះគឺជាកន្លែងដែលយើងប្រើ tablist ថ្នាក់។ ក្នុង HTML ។ ជាជាងធ្វើរចនាប័ទ្មស្លាក UL ដែលនឹងធ្វើរចនាប័ទ្មទាំងអស់បញ្ជីគ្មានលំដាប់នៅលើទំព័ររបស់អ្នកអ្នកគួរតែរចនាប័ទ្មតែថ្នាក់ UL ។ tablist ដូច្នេះធាតុដំបូងនៅក្នុង CSS របស់អ្នកគួរតែ:
.tablist {}ខ្ញុំចូលចិត្តដាក់សញ្ញាអង្កាញ់បញ្ចប់ (}) មុនពេលដូច្នេះខ្ញុំមិនភ្លេចវានៅពេលក្រោយ។
ខណៈពេលដែលយើងកំពុងប្រើស្លាកបញ្ជីគ្មានលំដាប់សម្រាប់បញ្ជីម៉ឺនុយផ្ទាំងប៉ុន្តែយើងមិនចង់ឱ្យគ្រាប់កាំភ្លើងឬលេខលូនចូលទេ។ ដូច្នេះរចនាប័ទ្មដំបូងដែលអ្នកគួរតែបន្ថែមគឺ។ list-style: none; នេះប្រាប់កម្មវិធីរុករកថាខណៈពេលដែលវាជាបញ្ជីវាជាបញ្ជីដែលគ្មានរចនាប័ទ្មដែលបានកំណត់ជាមុន (ដូចជាគ្រាប់កាំភ្លើងឬលេខ) ។
បន្ទាប់មកអ្នកអាចកំណត់កម្ពស់បញ្ជីរបស់អ្នកឱ្យត្រូវគ្នានឹងទំហំដែលអ្នកចង់ឱ្យវាបំពេញ។ ខ្ញុំបានជ្រើសរើសយក 2em សម្រាប់កម្ពស់របស់ខ្ញុំព្រោះថាវាមានទំហំទ្វេដងនៃទំហំពុម្ពអក្សរស្តង់ដារហើយផ្តល់ឱ្យពាក់កណ្តាលអាដនៅខាងលើនិងខាងក្រោមអត្ថបទនៃផ្ទាំង។ កម្ពស់: 2em; ប៉ុន្តែអ្នកអាចកំណត់ទទឹងរបស់អ្នកទៅទំហំដែលអ្នកចង់បាន។ ស្លាក UL នឹងយកដោយស្វ័យប្រវត្តិ 100% នៃទទឹងដូច្នេះលុះត្រាតែអ្នកចង់ឱ្យវាតូចជាងធុងបច្ចុប្បន្នអ្នកអាចទុកទទឹង។
ចុងក្រោយប្រសិនបើ សន្លឹករចនាបថមេ របស់អ្នកមិនមានការកំណត់ជាមុនសម្រាប់ស្លាក UL និង OL អ្នកនឹងចង់ដាក់វា។ នេះមានន័យថាអ្នកគួរតែបិទស៊ុមរឹមនិងចន្លោះនៅលើ UL របស់អ្នក។ ចន្លោះ: 0; រឹម: 0; ព្រំដែន: គ្មាន; ប្រសិនបើអ្នកបានកំណត់ឡើងវិញនូវស្លាក UL រួចហើយអ្នកអាចផ្លាស់ប្តូររឹមគែមឬស៊ុមទៅអ្វីដែលសមស្របនឹងការរចនារបស់អ្នក។
ថ្នាក់រៀនរបស់អ្នកគួរតែមើលទៅដូចនេះ:
.tablist {list-style: none; កម្ពស់: 2em; ចន្លោះ: 0; រឹម: 0; ព្រំដែន: គ្មាន; }04 នៃ 06
ការកែសម្រួលធាតុបញ្ជី LI
នៅពេលដែលអ្នកបានរាយនាមបញ្ជីគ្មានលំដាប់របស់អ្នកអ្នកត្រូវរចនាស្លាក LI នៅខាងក្នុង។ បើមិនដូច្នោះទេពួកគេនឹងដើរតួជាបញ្ជីស្តង់ដារមួយនិងផ្លាស់ទីគ្នាទៅបន្ទាត់បន្ទាប់ដោយមិនចាំបាច់ដាក់ផ្ទាំងរបស់អ្នកឱ្យបានត្រឹមត្រូវ។
ជាបឋមសូមរៀបចំលក្ខណៈសម្បត្តិរចនាប័ទ្មរបស់អ្នក:
.tablist លីនុច {}បន្ទាប់មកអ្នកចង់អណ្តែតផ្ទាំងរបស់អ្នកដូច្នេះពួកគេតម្រៀបជាជួរនៅលើប្លង់ផ្ដេក។ float: left;
ហើយកុំភ្លេចបន្ថែមរឹមខ្លះរវាងផ្ទាំងដូច្នេះពួកគេមិនច្របាច់បញ្ចូលគ្នាទេ។ រឹមខាងស្តាំ: 0.13em;
រចនាប័ទ្មលីរបស់អ្នកគួរតែដូចនេះ:
.tablist លី {float: left; រឹមខាងស្តាំ: 0.13em; }05 នៃ 06
ធ្វើឱ្យផ្ទាំងមើលទៅដូចជាផ្ទាំងជាមួយ CSS 3
ដើម្បីធ្វើអ្វីៗភាគច្រើនក្នុងការលើកធ្ងន់ក្នុងសន្លឹករចនាប័ទ្មនេះខ្ញុំកំពុងផ្ដោតសំខាន់លើតំណនៅក្នុងបញ្ជីគ្មានលំដាប់។ កម្មវិធីរុករកទទួលស្គាល់ថាតំណធ្វើច្រើននៅលើទំព័របណ្ដាញជាងស្លាកផ្សេងដូច្នេះវាងាយស្រួលក្នុងការយកកម្មវិធីរុករកដែលចាស់ជាងនេះដើម្បីអនុវត្តតាមអ្វី ៗ ដូចជាស្ថានភាពនៃការផ្ទុកប្រសិនបើអ្នកភ្ជាប់ពួកវាទៅនឹងស្លាកយុថ្កា។ ដូច្នេះដំបូងត្រូវសរសេរលក្ខណសម្បត្តិរចនាប័ទ្មរបស់អ្នក:
.tablist li a {} .tablist li a: hover {}ដោយសារតែផ្ទាំងទាំងនេះគួរធ្វើដូចជាផ្ទាំងក្នុងកម្មវិធីមួយអ្នកចង់ឱ្យផ្ទាំងផ្ទៃទាំងមូលអាចចុចបានមិនមែនត្រឹមតែអត្ថបទដែលបានភ្ជាប់ទេ។ ដើម្បីធ្វើដូច្នេះអ្នកត្រូវតែបម្លែងស្លាក A ពីវាជាស្ថានភាពធម្មតានៅក្នុង ធាតុប្លុក ។ បង្ហាញ: ប្លុក; (ប្រសិនបើអ្នកចាប់អារម្មណ៍ចង់ដឹងបន្ថែមអំពីភាពខុសគ្នាសូមអាន Block-Level vs. Inline Elements ) ។
បន្ទាប់មកវិធីងាយស្រួលដើម្បីបង្ខំថេបរបស់អ្នកឱ្យស៊ីមេទ្រីជាមួយគ្នាប៉ុន្តែនៅតែឆ្លុះដើម្បីវាស់ទំហំទទឹងនៃអត្ថបទគឺធ្វើឱ្យចន្លោះខាងស្តាំនិងខាងឆ្វេងដូចគ្នា។ ខ្ញុំបានប្រើលក្ខណៈសម្បត្តិស្ដង់ដា padding ដើម្បីកំណត់កំពូលនិងបាតទៅ 0 និងខាងស្តាំនិងខាងឆ្វេងទៅ 1em ។ ចន្លោះ: 0 1em;
ខ្ញុំក៏បានជ្រើសរើសយកការគូសបន្ទាត់ពីក្រោមដើម្បីឱ្យផ្ទាំងមើលទៅដូចតំណ។ ប៉ុន្តែប្រសិនបើទស្សនិកជនរបស់អ្នកអាចយល់ច្រឡំនោះចូរទុកបន្ទាត់នេះចេញ។ តំណ - តុបតែង: គ្មាន
ដោយដាក់ស៊ុមស្តើងជុំវិញផ្ទាំងវាធ្វើឱ្យវាមើលទៅដូចជាផ្ទាំង។ ខ្ញុំបានប្រើលក្ខណសម្បត្តិស្ដាំព្រំដែនដើម្បីដាក់ស៊ុមនៅជុំវិញស៊ុមទាំងបួន: 0,06em solid # 000; ហើយបន្ទាប់មកប្រើលក្ខណសម្បត្តិ បាតខាងក្រោម ដើម្បីយកវាចេញពីបាត។ border-bottom: 0;
បន្ទាប់មកខ្ញុំបានធ្វើការលៃតម្រូវមួយចំនួនទៅពុម្ពអក្សរពណ៌និងពណ៌ផ្ទៃខាងក្រោយនៃផ្ទាំង។ កំណត់ទាំងនេះទៅរចនាប័ទ្មដែលផ្គូផ្គងតំបន់បណ្ដាញរបស់អ្នក។ ពុម្ពអក្សរ: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; ពណ៌: # 000; background-color: #ccc;
ទាំងអស់នៃរចនាប័ទ្មខាងលើគួរតែចូលទៅក្នុង selector ។ ការរៀបចំ li a, ក្បួនដូច្នេះពួកវាប៉ះពាល់ដល់ស្លាកយុថ្កាជាទូទៅ។ បន្ទាប់មកដើម្បីធ្វើឱ្យផ្ទាំងលេចឡើងកាន់តែចុចបានអ្នកគួរបន្ថែមក្បួនរបស់រដ្ឋមួយចំនួន .tablist li a: hover ។
ខ្ញុំចូលចិត្តផ្លាស់ប្តូរពណ៌នៃអត្ថបទនិងផ្ទៃខាងក្រោយដើម្បីធ្វើឱ្យផ្ទាំងលេចឡើងនៅពេលអ្នក mouse លើវា។ ផ្ទៃខាងក្រោយ: # 3cf; ពណ៌: #fff;
ហើយខ្ញុំបានរួមបញ្ចូលកម្មវិធីរំលឹកមួយទៀតទៅនឹងកម្មវិធីរុករកដែលខ្ញុំចង់អោយតំណភ្ជាប់មិនត្រូវបានគូសបញ្ជាក់។ ការតុបតែងអត្ថបទ: គ្មាន; វិធីសាស្រ្តទូទៅមួយទៀតគឺត្រូវបើកការគូសបញ្ជាក់ត្រឡប់មកវិញនៅពេលអ្នកកណ្តុរលើផ្ទាំង។ ប្រសិនបើអ្នកចង់ធ្វើដូចនោះផ្លាស់ប្តូរវាទៅការតុបតែងអត្ថបទ: គូសបន្ទាត់ពីក្រោម;
ប៉ុន្តែតើ CSS 3 នៅឯណា?
ប្រសិនបើអ្នកបានយកចិត្តទុកដាក់អ្នកប្រហែលជាកត់សម្គាល់ថាមិនមានរចនាប័ទ្ម CSS 3 ណាដែលត្រូវបានប្រើនៅក្នុងសន្លឹករចនាប័ទ្មទេ។ នេះមានអត្ថប្រយោជន៍នៃការធ្វើការនៅក្នុងកម្មវិធីរុករកទំនើបណាមួយដែលរួមបញ្ចូលទាំង Internet Explorer ។ ប៉ុន្តែវាមិនធ្វើឱ្យផ្ទាំងមើលទៅដូចជាអ្វីៗច្រើនជាងប្រអប់ការ៉េទេ។ ដោយបន្ថែមរចនាប័ទ្ម CSS 3 ហៅតាមកាំកាំ (ហើយវាត្រូវបានភ្ជាប់ការហៅជាក់លាក់របស់កម្មវិធីរុករក) អ្នកអាចធ្វើឱ្យគែមមានរាងមូលដើម្បីមើលទៅដូចជាផ្ទាំងនៅលើថតម៉ាលីល។
រចនាប័ទ្មអ្នកគួរតែបន្ថែមទៅ។ ការរៀបចំក្បួនលីនុចគឺ: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; ស៊ុមស៊ុម - កំពូលស្តាំ - កាំ: 0,50em; ស៊ុមស៊ុមខាងលើ - ឆ្វេង: 0,5m;
ទាំងនេះគឺជាច្បាប់រចនាប័ទ្មចុងក្រោយដែលខ្ញុំបានសរសេរ:
.tablist li a {display: block; ចន្លោះ: 0 1em; ការតុបតែងអត្ថបទ: គ្មាន; ព្រំដែន: 0.06em solid # 000; border-bottom: 0; ពុម្ពអក្សរ: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; ពណ៌: # 000; background-color: #ccc; / * CSS 3 ធាតុ * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; ស៊ុមស៊ុម - កំពូលស្តាំ - កាំ: 0,50em; ស៊ុមស៊ុមខាងលើ - ឆ្វេង: 0,5m; } .tablist li a: hover {background: # 3cf; ពណ៌: #fff; ការតុបតែងអត្ថបទ: គ្មាន; }ជាមួយរចនាប័ទ្មទាំងនេះអ្នកមានម៉ឺនុយផ្ទាំងដែលដំណើរការនៅក្នុងកម្មវិធីរុករកធំ ៗ ទាំងអស់និងមើលទៅដូចផ្ទាំងដែលបានបោះពុម្ពល្អនៅក្នុងកម្មវិធី CSS 3 ដែលមានលក្ខណៈស្រដៀងគ្នា។ ទំព័របន្ទាប់ផ្តល់ឱ្យអ្នកនូវជម្រើសមួយទៀតដែលអ្នកអាចប្រើដើម្បីស្លៀកពាក់ឱ្យកាន់តែច្រើន។
06 នៃ 06
បន្លិចថេបបច្ចុប្បន្ន
ក្នុង HTML ដែលខ្ញុំបានបង្កើត UL មានធាតុបញ្ជីមួយជាមួយ ID ។ នេះអនុញ្ញាតឱ្យអ្នកផ្តល់ឱ្យ LI LI នូវរចនាប័ទ្មផ្សេងពីសល់។ ស្ថានភាពទូទៅបំផុតគឺធ្វើឱ្យផ្ទាំងបច្ចុប្បន្នលេចធ្លោក្នុងលក្ខណៈមួយចំនួន។ មធ្យោបាយមួយទៀតដើម្បីគិតអំពីរឿងនេះគឺថាអ្នកចង់ឱ្យមានពណ៌ក្រហមចេញពីផ្ទាំងដែលមិនមានជីវិត។ បន្ទាប់មកអ្នកប្តូរទីតាំងលេខសម្គាល់នៅលើទំព័រផ្សេងៗ។
ខ្ញុំមានស្ទីល #current ស្លាកក៏ដូចជា #current A: ទ្រនិចស្តូរដូច្នេះទាំងពីរមានភាពខុសគ្នាបន្តិចបន្តួច។ អ្នកអាចផ្លាស់ប្តូរពណ៌ផ្ទៃខាងក្រោយសូម្បីតែកំពស់និងទទឹងនៃធាតុនោះ។ ធ្វើឱ្យមានការផ្លាស់ប្តូរអ្វីដែលសមហេតុផលក្នុងការរចនារបស់អ្នក។
.tablist li # current a {background-color: # 777; ពណ៌: #fff; } .tablist li # current a: hover {background: # 39C; }ហើយអ្នកបានបញ្ចប់ហើយ! អ្នកទើបតែបានបង្កើតម៉ឺនុយផ្ទាំងសម្រាប់គេហទំព័ររបស់អ្នក។