ធ្វើឱ្យម៉ឺនុយផ្ដេកសម្រាប់តំបន់បណ្ដាញដោយខ្លួនឯង

ម៉ឺនុយផ្ដេកមានស្ទើរតែនៅតំបន់ណាមួយ - វាគឺជាផ្នែកសំខាន់មួយ, ដូចដែលវាអាចធ្វើបានជាមួយនឹងរូបរាងនិងការប្រើប្រាស់របស់ខ្លួនដើម្បីទាក់ទាញឬផ្ទុយមកបន្លាចឆ្ងាយពីភ្ញៀវទេសចរ។ សូមឱ្យយើងរៀនពីរបៀបក្នុងការបង្កើតម៉ឺនុយផ្ដេកបឋម: ធ្វើឱ្យវា "គ្រោង" ទៅជា HTML ដើម្បីធ្វើជាម្ចាស់ជំនាញជាមូលដ្ឋាននៃការបង្កើត។ អ្នកពិតជាអាចរកឃើញម៉ឺនុយត្រៀមខ្លួនជាស្រេច, ប៉ុន្តែការច្រើន nicer ដើម្បីរៀនពីរបៀបដើម្បីអភិវឌ្ឍវាដោយខ្លួនឯង។ វាជាភាពសប្បាយរីករាយណាស់។

រៀនដើម្បីធ្វើឱ្យម៉ឺនុយ

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

HTML ដែលមើលទៅដូចជាកូដនេះ:

តើអ្នកណាដែលមិនបានដឹងថា: ស្លាក ul ត្រូវបានប្រើសម្រាប់ គ្រាប់កាំភ្លើង ធាតុចាប់ផ្តើមជាមួយលីនេះ។ លោកលីបានទទួលស្លាករចនាប័ទ្មដែលត្រូវបានអនុវត្តទៅ ul នេះ។

ul - ធាតុប្លុកនៃបញ្ជីវានឹងត្រូវបានទាញឱ្យវែងដើម្បីទទឹង។ លោកលីគឺជាប្លុកផងដែរ។

ដូច្នេះ, បង្កើត index.html មួយ។ យើងប្រមូលកូដរបស់យើង។ នៅចំណុចនេះ, កម្មវិធីរុករកដែលបង្ហាញបញ្ឈរជាជាងម៉ឺនុយផ្ដេក។ ប៉ុន្តែយើងដោយមានគោលដៅអ្នក - ដើម្បីធ្វើឱ្យម៉ឺនុយផ្ដេកសម្រាប់តំបន់បណ្តាញ។ ចំពោះការនេះយើងត្រូវការ CSS ។

CSS ជាអ្វី?

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

ដោយប្រើសន្លឹករចនាប័ទ្មសម្រាប់ការអភិវឌ្ឍម៉ឺនុយ

CSS មានកូដសម្រាប់ម៉ឺនុយនេះ:

1. # My_1menu បញ្ជីរចនាប័ទ្ម {: គ្មាន ចន្លោះ: 6; ទទឹង: 800px; រឹម: រថយន្ត;}
2. # My_1menu li {ទសភាគ: ចាកចេញ; អក្សរ Arial 18px ទ្រេត;}
3. # My_1menu ជា {color: # 756; បង្ហាញ: ប្លុក; កម្ពស់: 55px; បន្ទាត់កម្ពស់: 55px; ចន្លោះ: 0px 15px 0px 15px; ផ្ទៃខាងក្រោយ: #dfc; text-decoration: none;}
4. # My_1menu មួយ: ពេលដាក់ {color: #foa; ផ្ទៃខាងក្រោយ: # 788;}

ឥឡូវនេះសូមមើលនៅម៉ឺនុយ CSS បានផ្តេកលទ្ធផល។

# My_1menu - ដូច្នេះមានកិច្ចការរចនាប័ទ្មសម្រាប់ធាតុ UL- ជាមួយ id = my_1menu បញ្ជីរចនាប័ទ្ម: គ្មាន - ពាក្យបញ្ជាដើម្បីយកសញ្ញាដែលបានចាកចេញដោយធាតុដែលបានគ្រោងនេះ។

ទទឹង: 800px - ទទឹងនៃម៉ឺនុយរបស់យើងគឺ 800 ភិចសែល។

ចន្លោះ: 0 - នេះយកចន្លោះនៅខាងក្នុង។

រឹម: រថយន្ត - vyravnivnie ម៉ឺនុយផ្ដេកនៅកណ្តាលនៃទំព័ររបស់យើង។

# li My_1menu - ផ្តល់រចនាប័ទ្មលីធាតុ។

កម្ពស់: 55px - កម្ពស់ម៉ឺនុយ។

# My_1menu មួយ: ពេលដាក់ - ផ្ដល់ទៅឱ្យធាតុនិងរចនាប័ទ្មកណ្តុរពេលដែលវាត្រូវបាននាំមក។

យើងនឹងមិនរៀបរាប់នៅក្នុងលម្អិតបន្ទាត់ជារៀងរាល់, ជាអ្នកអភិវឌ្ឍជារៀងរាល់អាចបញ្ជាក់ប៉ារ៉ាម៉ែត្ររបស់វានៅទីនេះ។ មូលដ្ឋាននេះសម្រាប់ការប្រើប្រាស់នៃរចនាប័ទ្មក្នុងម៉ឺនុយនៅលើគេហទំព័រ។ អ្នកអាចផ្ដល់ឱ្យវារូបរាងកាន់តែច្រើនបានបញ្ចប់និងស្រស់ស្អាតដោយប្រើរូបភាព។ ចាត់តាំងធាតុប៉ុន្តែ, ឧទាហរណ៍, ផ្ទៃខាងក្រោយ: URL (img1.png) ធ្វើឡើងវិញការ-X ។ សូមឱ្យមានផ្ទៃខាងក្រោយ: URL (img2.png) បានធ្វើឡើងវិញ-x សម្រាប់: ដាក់។

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