មករា
របៀបបង្កើត 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 សង្កាត់បឹងកក់២ ទួលគោក
មតិ និងយោបល់ទៅលើអត្ថបទនេះ (តាម Facebook)
ខាងក្រោមនេះជាយោបល់ផ្សេងៗរបស់អ្នកទស្សនា