ម៉ឺនុយ CSS បានបញ្ឈរ: ការធ្វើវាដោយខ្លួនឯង

អ្នកគ្រប់គ្រងតំបន់បណ្ដាញមួយចំនួនមិនចង់ចំណាយពេលវេលាអភិវឌ្ឍពីបាតដៃទទេធាតុសាមញ្ញដែលមានរួចទៅហើយ។ ពួកគេជឿថាមានចំណុចនៅក្នុងនៅលើខ្ជះខ្ជាយពេលវេលារបស់អ្នកដែលត្រូវបានអ្វីមួយជាយូរមកហើយមិនមាន។ ជាការពិតសម្រាប់អ្នកដែលគ្រាន់តែគ្រូ HTML និង CSS, វាជាការសំខាន់ដើម្បីធ្វើឱ្យខ្លួនអ្នកយ៉ាងច្រើននៃអ្វីមួយដើម្បីឱ្យមានការយល់ដឹងល្អនៃការងាររបស់ពួកគេ។ នេះអនុវត្តទៅម៉ឺនុយ។ បង្កើតម៉ឺនុយ CSS បានបញ្ឈរ។ វានឹងត្រូវបានផ្អែកតែលើ HTML និង CSS, ដោយគ្មានការប្រើប្រាស់ Javascript និង jQuery នេះ។ ម៉ឺនុយនីមួយគឺជាបញ្ជីនៃតំណដែលនាំឱ្យទំព័រនៃតំបន់បណ្តាញមួយ។

ជំហានជាមូលដ្ឋាន

ដើម្បីបង្កើតសាមញ្ញ ម៉ឺនុយបញ្ឈរ ជា CSS, អ្នកត្រូវការជំហានដូចខាងក្រោមនេះ:

1. ដំបូងកំណត់បញ្ជីនៃតំណភ្ជាប់ (ដោយប្រើកូដ HTML) ដែលម៉ឺនុយនេះនឹងមានមួយ។ ផ្តល់ឱ្យពួកគេនូវឈ្មោះមួយឧទាហរណ៍មានដូចខាងក្រោម:

1. ទំព័រដើម។
2. ប្រវត្តិសាស្រ្តរបស់យើង។
3. ណែនាំ។
4. សេវាកម្ម។
5. ទំនាក់ទំនង។

2. បន្ទាប់មករចនាប័ទ្មតំណដូចដែលអ្នកចង់បានដោយមានជំនួយរបស់ CSS បាន។

យើងសរសេរ កូដ HTML, រក្សាទុកនៅក្នុងឯកសារ my_Vmenu.html និងមើលឃើញពីរបៀបដែលវានឹងមើលទៅនៅក្នុងកម្មវិធីរុករកនេះ:

នេះជាមូលដ្ឋាន (គ្រោង) នៃម៉ឺនុយរបស់យើង។ # 1, # 2, ល គួរតែត្រូវបានជំនួសដោយសេចក្ដីយោង។ សូមមើលពីរបៀបដែលវាមើលទៅនៅក្នុងកម្មវិធីរុករកមួយ។ រូបភាពនេះអ្នកនឹងមិនចូលចិត្ត។ ឥឡូវនេះយើងត្រូវតែចាប់ផ្តើមដើម្បីរៀបរាប់អំពីធាតុនៃរចនាប័ទ្មដើម្បីធ្វើឱ្យម៉ឺនុយ CSS បានបញ្ឈរពេញលេញ។

រចនាប័ទ្មសង្ខេប

បង្កើត my_Vmenu.css ឯកសារមួយដែលកំណត់អ្វីដែលអ្នកចង់ឱ្យប្រសើរឡើងនូវរូបរាងនៃការដូចជាធាតុសំខាន់មួយនៃតំបន់បណ្តាញនេះ។ ខាងក្រោមនេះគឺជាកូដនេះសេចក្តីណែនាំនៃការដែលនឹងសកម្មឡើងវិញនូវម៉ឺនុយ CSS ដែលបញ្ឈរ។ វានិងសរសេរឯកសារថ្មីនេះហើយបន្ទាប់មកយើងនឹងយកមួយដែលនៅជិតបន្ទាត់មើលទៅអត្ថន័យសំខាន់ដែលត្រូវបានផ្តល់ឱ្យ។

សន្លឹករចនាប័ទ្មដែលបានប្រើរៀបរាប់លំអិត

ឥឡូវពិចារណាសេចក្ដីលម្អិតនៃម៉ឺនុយបញ្ឈរជា CSS របស់យើង:

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

ul # my_Vmenu - រចនាប័ទ្មសរុបនៃបញ្ជីទាំងមូល។

ul # my_Vmenu li មួយ - តំណភ្ជាប់រចនាប័ទ្មរវាងលីស្លាក។

ul # my_Vmenu លីមួយ: ពេលដាក់ - ការរៀបរាប់របស់ប្រភេទក្រោមការពិចារណានៃធាតុម៉ឺនុយនៅពេលដែលនរណាម្នាក់សំកាំងលើមនុស្ស។

ul # my_Vmenu li រយៈពេលមួយ - ពន្យល់អត្ថបទ (ម៉ឺនុយចំណងជើង) ។

សូមចងចាំថាឯកសារ my_Vmenu.css my_Vmenu.html ហើយត្រូវបានបម្រុងទុកនៅក្នុងថតដូចគ្នានេះដែរ។ ទោះជាយ៉ាងណា, ពួកគេអាចត្រូវបានមានទីតាំងនៅក្នុងថតផ្សេងគ្នា, ប៉ុន្តែបន្ទាប់មកវាជាការសំខាន់ដើម្បីចុះឈ្មោះនៅក្នុងផ្លូវឯកសារ my_Vmenu.html ទៅ my_Vmenu.css ។ ត្រូវប្រុងប្រយ័ត្នព្រោះអ្នកចំណូលថ្មីទៅបញ្ហានេះជាញឹកញាប់។

រចនាប័ទ្មត្រូវតែត្រូវបានតភ្ជាប់រវាងស្លាកក្បាលនៅក្នុងឯកសារ html ។ menu_1.png និង menu_2.png - នេះជារូបភាពសម្រាប់ធាតុម៉ឺនុយរូបភាពនៅក្នុងរដ្ឋធម្មតានិងពេលដាក់នេះ។

វាជាការល្អប្រសើរជាងមុនដើម្បីរក្សាទុករូបភាពក្នុងថតដាច់ដោយឡែកមួយសម្រាប់រូបភាព, ឈ្មោះវា my_images, ប៉ុន្តែបន្ទាប់លៃតម្រូវកូដ CSS បាននោះទេ។ សរសេរដែលជាកន្លែងដែលរូបភាពទាំងនេះត្រូវបានបង្ហាញ, ដែលពួកគេមាននៅក្នុងថតនេះ: url (my_images / menu_1.png) និង url (my_images / menu_2.png) ។

នៅសល់នៃលក្ខណៈសម្បត្តិដែលបានរៀបរាប់នៅក្នុងកូដ CSS ដែល, ដើម្បីយល់យ៉ាងងាយស្រួល។ ពួកគេបានកំណត់រូបរាងនៃម៉ឺនុយរបស់យើង។ វាគឺជាការងាយស្រួលក្នុងការសង្កេតឃើញថាទទឹងនិងកម្ពស់របស់ធាតុដែលបានបញ្ជាក់សម្រាប់ធាតុដូចគ្នានៅក្នុងរដ្ឋធម្មតាហើយនៅពេលដែលអ្នកដាក់កណ្ដុរលើពួកគេ។ ទំហំពុម្ពអក្សរ 18px, ចន្លោះបញ្ជាក់ការចូលបន្ទាត់ពីភាគីផ្សេងគ្នានៃឈ្មោះរបស់កន្លែងនេះ។ អេក្រង់អនុញ្ញាតឱ្យអ្នកកំណត់ឯកតាការបង្ហាញដើម្បីកំណត់ទទឹងនិងចន្លោះ។

ម៉ឺនុយបញ្ឈររបស់យើង

ដូចដែលអ្នកអាចឃើញម៉ឺនុយ CSS បានបញ្ឈរដើម្បីបង្កើតយ៉ាងងាយស្រួល។ នៅលើមូលដ្ឋាននៃទិន្នន័យនៃចំនេះអ្នកនឹងអាចដើម្បីធ្វើឱ្យវាស្រស់ស្អាតនិងភាពទាក់ទាញដល់ភ្ញៀវទេសចរទៅកាន់តំបន់បណ្តាញរបស់អ្នក! ប្រើការស្រមើលស្រមៃរបស់អ្នកហើយបន្ទាប់មកម៉ឺនុយទាន់សម័យដើម្បីបំពេញតំបន់បណ្ដាញរបស់អ្នក។