14 KiB

Raw Permalink Blame History

កិច្ចការផ្លាស់ប្តូររចនាសម្ព័ន្ធ CSS

គោលដៅ

ផ្លាស់ប្តូរគម្រោង terrarium របស់អ្នក ដើម្បីប្រើបច្ចេកវិទ្យារចនាសម្ព័ន្ធ CSS ម៉ូដដែល! បម្លែងវិធីសាស្រ្តកំណត់តំណែងអប្បបរមា (absolute positioning) បច្ចុប្បន្នក្នុងការអនុវត្ត Flexbox ឬ CSS Grid សម្រាប់រចនាបទដែលអាចថែរក្សា បានងាយ និងមានការឆ្លើយតបល្អ។ កិច្ចការនេះធ្វើឱ្យអ្នកមានការប្រឈមក្នុងការអនុវត្តស្ដង់ដារផ្នែក CSS ថ្មីៗ ខណៈបន្តរក្សាសម្រស់ភ្នាក់ងាររបស់ terrarium របស់អ្នក។

ការយល់ដឹងពីពេលវេលានិងវិធីសាស្រ្តប្រើការរចនា layout ខុសៗគ្នា គឺជាទំនុកចិត្តមួយសំខាន់សម្រាប់ការអភិវឌ្ឍវែបសម័យថ្មី។ ការហាត់នេះជាស្ពានភ្ជាប់វិធីសាស្រ្តកំណត់តំណែងចាស់ៗជាមួយប្រព័ន្ធរចនាសម្ព័ន្ធ CSS បច្ចុប្បន្ន។

សេចក្តីណែនាំសម្រាប់កិច្ចការ

ជំហានទី 1: វិភាគ និង គម្រោង

ពិនិត្យកូដ terrarium បច្ចុប្បន្នរបស់អ្នក - ស្វែងរកធាតុដែលកំពុងប្រើកំណត់តំណែងអប្បបរមា
ជ្រើសរើសវិធីសាស្រ្តរចនា layout របស់អ្នក - សម្រេចថាតើ Flexbox ឬ CSS Grid ត្រូវគ្នាជាងសម្រាប់គោលដៅរចនារបស់អ្នក
គូររចនាសម្ព័ន្ធ layout ថ្មីរបស់អ្នក - វិភាគពីរបៀបដាក់តំណែងកុងត្ន័រនិងធាតុរុក្ខជាតិ

ជំហានទី 2: អនុវត្ត

បង្កើតកំណែថ្មី នៃគម្រោង terrarium របស់អ្នកនៅថតថ្មីមួយ
ធ្វើបច្ចុប្បន្នភាពរចនាសម្ព័ន្ធ HTML តាមតម្រូវ ដើម្បីគាំទ្រវិធីសាស្រ្តរចនារបស់អ្នកជ្រើសរើស
ផ្លាស់ប្តូរ CSS ដើម្បីប្រើ Flexbox ឬ CSS Grid ជំនួសការកំណត់តំណែងអប្បបរមា
រក្សាសមាមាត្ររូបភាព - រក្សាការបង្ហាញរុក្ខជាតិ និងចាន terrarium នៅតំណែងដដែល
អនុវត្តចម្លើយបត់បែន - រចនាសម្ព័ន្ធរបស់អ្នកគួរតែអាចបត់បែនឱ្យសម្រួលទៅទំហំអេក្រង់ខុសៗគ្នា

ជំហានទី 3: សាកល្បង និង ឯកសារព័ត៌មាន

សាកល្បងក្នុងកម្មវិធីរុករក - បញ្ជាក់ថារចនារបស់អ្នកដំណើរការល្អនៅក្នុង Chrome, Firefox, Edge និង Safari
សាកល្បងចម្លើយបត់បែន - ពិនិត្យរចនារបស់អ្នកនៅលើទូរស័ព្ទចល័ត, ថេប្លេត និងកុំព្យូទ័រឡេបតុប
ឯកសារព័ត៌មាន - បន្ថែមមតិយោបល់ទៅ CSS របស់អ្នកដើម្បីពន្យល់ពីជម្រើសរចនា
ថតរូបអេក្រង់ - ចាប់ផ្តើម terrarium របស់អ្នកនៅក្នុងកម្មវិធីរុករកនិងទំហំអេក្រង់ផ្សេងៗ

កម្រិតបច្ចេកទេសត្រូវការ

ការអនុវត្តរចនាសម្ព័ន្ធ

ជ្រើសរើស១យ៉ាង: អនុវត្ត Flexbox ឬ CSS Grid (មិនប្រើពីរទាំងពីរជាមួយធាតុដូចគ្នា)
រចនារឆ្លើយតប: ប្រើឯកតាដូចជា (rem, em, %, vw, vh) ជំនួស pixels កំណត់ថេរ
ចូលដំណើរការ: រក្សារចនាសម្ព័ន្ធ HTML មានអត្ថន័យ និងអត្ថបទ alt ដូចគ្នា
គុណភាពកូដ: ប្រើឈ្មោះសម្គាល់រួមគ្នានិងចាត់តាំង CSS យ៉ាងសមរម្យ

លក្ខណៈ CSS ម៉ូដែលដើម្បីបញ្ចូល

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

តម្រូវការគាំទ្រកម្មវិធីរុករក

Chrome/Edge: ចុងក្រោយ ២ កំណែ
Firefox: ចុងក្រោយ ២ កំណែ
Safari: ចុងក្រោយ ២ កំណែ
កម្មវិធីរុករកលើទូរស័ព្ទ: iOS Safari, Chrome Mobile

ឯកសារដែលត្រូវឲ្យប្រគល់

ឯកសារ HTML បច្ចុប្បន្នភាព ជាមួយរចនាសម្ព័ន្ធសម្រួលធំ
ឯកសារ CSS បានផ្លាស់ប្តូរ ប្រើបច្ចេកទេសរចនាសម្ព័ន្ធម៉ូដ។
បណ្ណាល័យថតរូបអេក្រង់ បង្ហាញការចូលគ្នានៃកម្មវិធីរុករក:
- មើលលើកុំព្យូទ័រ (1920x1080)
- មើលលើថេប្លេត (768x1024)
- មើលលើទូរស័ព្ទចល័ត (375x667)
- យ៉ាងហោចណាស់ ២កម្មវិធីរុករកផ្សេងគ្នា
ឯកសារ README.md បង្ហាញសេចក្តីហេតុផលជ្រើសរើសរចនា (Flexbox ឬ Grid) និងហេតុផល
- បញ្ហាសម្រេចក្នុងពេលផ្លាស់ប្តូរ
- កំណត់សម្គាល់ការចូលរួមកម្មវិធីរុករក
- សេចក្តីណែនាំក្នុងការបញ្ជួរកូដរបស់អ្នក

វិច្ឆ័យការវាយតម្លៃ

កម្រិត	អតិភាព (4)	បរិញ្ញាបត្រ (3)	កំពុងអភិវឌ្ឍ (2)	ចាប់ផ្តើម (1)
ការអនុវត្តរចនា layout	ប្រើខ្លាំង Flexbox/Grid ជាមួយលក្ខណៈវាងវៃ; រចនារឆ្លើយតបពេញលេញ	អនុវត្តត្រឹមត្រូវ ជាមួយរចនារឆ្លើយតបល្អ	អនុវត្តមូលដ្ឋាន មានបញ្ហារចនារឆ្លើយតបតិច	ការអនុវត្តរចនា layout មិនពេញលេញ ឬខុស
គុណភាពកូដ	CSS ស្អាត រៀបចំល្អ មានមតិយោបល់មានន័យ និងឈ្មោះធម្មតា	រៀបចំបានល្អ មានមតិយោបល់ខ្លះ	រៀបចំបានត្រឹមត្រូវ មានការចង្អុលខ្លះ	រៀបចំខ្សោយ ធ្វើអោយស្មុគស្មាញក្នុងការយល់
ភាពឆបគ្នាក្នុងកម្មវិធីរុករក	មានភាពស្របគ្នាទាំងអស់ជំនួយដោយថតរូបអេក្រង់	មានភាពឆបគ្នាល្អ បញ្ជាក់បញ្ហានៅកម្រិតតូច	មានបញ្ហាភាពឆបគ្នាដែលមិនប៉ះពាល់មុខងារ	មានបញ្ហាធំ ឬខ្វះការសាកល្បង
រចនារឆ្លើយតប	វិធីសាស្រ្តម៉ូប៊ីល-ផ្តើមល្អ ជាមួយចំណុចឆក់ខ្សែភាពយន្ដទន់	រចនារឆ្លើយតបល្អ ជាមួយចំណុចឆក់សមរម្យ	រចនាមូលដ្ឋាន មានបញ្ហារចនារឆ្លើយតប	រចនារឆ្លើយតបមានកំណត់ ឬខូចខាត
ឯកសារព័ត៌មាន	README ពេញលេញ មានពន្យល់លម្អិត និងយល់ដឹង	ឯកសារយ៉ាងល្អគ្របដណ្តប់ទាំងអស់	ឯកសារមូលដ្ឋាន មានការពន្យល់តិច	ឯកសារខ្វះ ឬមិនមាន

ឧបករណ៍ជួយ

មេរៀនវិធីសាស្រ្តរចនា layout

ឧបករណ៍សាកល្បងកម្មវិធីរុករក

ឧបករណ៍គុណភាពកូដ

បញ្ហាបន្ថែម

🌟 រចនាលំនាំបច្ចេកទេស: អនុវត្តទាំង Flexbox និង Grid នៅផ្នែកផ្សេងៗនៃរចនារបស់អ្នក
🌟 បញ្ចូលកម្មវិធីចលនា: បន្ថែមការផ្លាស់ប្តូរឬចលនាដែលដំណើរការជាមួយ layout ថ្មីរបស់អ្នក
🌟 របៀបខ្មៅ: អនុវត្តអ្នកប្តូរមុខងារធ្វើពីលក្ខណ: CSS custom properties
🌟 ការសួរក្រោមកុងតឺន័រ: ប្រើបច្ចេកវិទ្យារចនាក្រោម container query សម្រាប់ភាពឆ្លើយតបនៅកម្រិតធាតុ

💡 ចងចាំ: គោលបំណងមិនមែនគ្រាន់តែធ្វើឲ្យវាដំណើរការ ប៉ុន្តែគឺយល់ថា ហេតុអ្វីបានជាវិធីសាស្រ្តរចនារបស់អ្នកជ្រើសរើសគឺជាចម្លើយល្អបំផុតសម្រាប់បញ្ហារចនានេះ!

ប្រកាសលើកលែង៖
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI Co-op Translator។ ទោះបីយើងខិតខំសម្រាប់ភាពត្រឹមត្រូវ ក៏សូមយកចិត្តទុកដាក់ថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុសឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមក្នុងភាសាមានដើមគួរត្រូវបានគេចាត់ទុកជាធនធានដ៏មានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ៗ ដាក់សំណើរសូមប្រើការបកប្រែដោយមនុស្សជំនាញ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុសណាមួយដែលកើតមានពីការប្រើប្រាស់បកប្រែនេះទេ។

14 KiB Raw Permalink Blame History