For Android device For iOS device
២៣
មករា

របៀប​បង្កើត Box Product Card នៅ​ក្នុង HTML & CSS

រៀបរៀងដោយ លោក រ៉ាន់ ប៊ុនផេង

សួស្តីអ្នក​ទាំងអស់​គ្នា ថ្ងៃ​នេះ​ខ្ញុំ​ចង់​បង្ហាញ​អ្នក​ទាំងអស់​គ្នា​អំពីរបៀប​បង្កើត​ Box Product Card​ដែល​មាន​លក្ខណៈ​ពិសេស នៅ​ក្នុង​ HTML & CSS ។ ដើម្បី​កុំ​ឲ្យ​ខាតពេលយូរ យើងអាចមើល​ទៅលើ​លទ្ធផល និងឧទាហរណ៍ជា  code នៅ​ក្នុង​រូបភាព​ដូច​ខាងក្រោម ៖

 ​លទ្ធផល​កូដ

 ការពន្យល់កូដ HTML

​នៅពេល​ដែល​យើងចុច Run File index នៅលើ​ផ្ទាំង Browser វានិង​បង្ហាញ​តម្លៃ​របស់ Box Product Card

- នៅបន្ទាត់ទី៦ គេ​ប្រើ​ tag link ដើម្បី​តភ្ចាប់ File HTML ជាមួយ File CSS

- នៅបន្ទាត់ទី១១ គឺគេ​ប្រើ Class មួយ​ឈ្មោះ​ថា main-box ដើម្បី​ក្តោប​ទិន្នន័យ​ទាំងអស់​នៅ​ក្នុង Contain

- នៅបន្ទាត់ទី១២ គឺគេ​ប្រើ Class មួយ​ឈ្មោះ​ថា box_picture ដើម្បី​ក្តោប​រូបភាព​ដែល​មាននៅខាង​ក្នុង​ Class

- នៅបន្ទាត់ទី១៣ គឺគេ​ប្រើ​ tag image ដើម្បី​បង្ហាញ​រូបភាព

- នៅបន្ទាត់ទី១៥ គេ​ប្រើ Class Box_title ដើម្បី​ក្តោប​ទៅលើ​ tag p & tag h5 ដើម្បី​បង្ហាញ​អំពី​ចំណងជើង​អត្ថបទនិង​តម្លៃ

- នៅបន្ទាត់ទី១៩ គេ​ប្រើ Class Box_button ដើម្បី​ក្តោប​ទៅលើ​ tag button ​ដែល​មាន​ឈ្មោះ​ថា Add Chart

- នៅបន្ទាត់ទី២៤ គេ​ប្រើ​ Link របស់ Google Font ដើម្បី​ឲ្យ​អក្សរមាន​លក្ខណៈ​ស្អាត​ជាងមុន ។

 ការពន្យល់កូដ CSS

- នៅបន្ទាត់ទី៧ របស់ File CSS គេ​ប្រើ​ Class . main-box ដើម្បី​ក្តោបអំពី Property របស់ File CSS ។ នៅ​ក្នុង​Class .main-box នៅបន្ទាត់ទី១១ គេ Property margin:0px auto; ដើម្បី​ឲ្យ​ Box មកកណ្តាល ។ ហើយនៅបន្ទាត់ទី១២គេ​ប្រើ Property box-shadow ដើម្បី​ឲ្យ​Box មានស្រមោល ។

- នៅបន្ទាត់ទី៤៤ គេ​ប្រើ​ Class .box_button button ដើម្បី​ក្តោបអំពី Property របស់ button ។ នៅ​ក្នុង​Class .box_button button នៅបន្ទាត់ទី៥០ គេ Property cursor: pointer; គេ​ប្រើ ដើម្បី​កំណត់​ទីតាំងរបស់ Cursor ពេលយើង​នៅពេល​យើងយកម៉ៅដាក់ពីលើ ។ ហើយនៅបន្ទាត់ទី១២គេ​ប្រើ Property box-shadow ដើម្បី​ឲ្យ Box មានស្រមោល ។

នៅបន្ទាត់ទី៥៤ គេ​ប្រើ​ Class_button button:hover គេ​ប្រើ ដើម្បី​កំណត់ Hover របស់ Button

 

→ ​សម្រាប់ Link Download កម្មវិធី ANTLearner សម្រាប់ Android & Windows http://www.antclasses.com/help/page/download.html

→ ​សម្រាប់ Link Download កម្មវិធី​ផ្សេងទៀត​សម្រាប់ iOS & Android & Windows http://www.antclasses.com/help/page/application.html

→ ​ប្រសិនបើ​មានចង្ងល់ ឬ​មាន​សំណួរ​ផ្សេងៗ​សូម​ផ្ញើ​សារចូល Facebook : https://www.facebook.com/anttrainning

 ​សម្រាប់​វគ្គ​សិក្សា​នៅអាន-ANT http://training.antkh.com/ 

 លេខ​ទូរសព្ទ​ទំនាក់ទំនង ០១០/០១៦ ៦៦៦ ៦៥៣

💒 ទីតាំង #86B ផ្លូវ 313 កែង 606 សង្កាត់បឹងកក់២ ទួលគោក

https://maps.app.goo.gl/cdi3hTED27tbHBaB9

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា