พื้นที่บล็อกแรกถูกห่อในแท็กส่วนเพื่อให้เราสามารถลอยเลย์เอาต์แบบเคียงข้างกัน คอลัมน์ด้านซ้ายมีอินพุตทั้งหมด: ข้อความอีเมล URL และหมายเลขโทรศัพท์ ในขณะที่คุณแท็บผ่านโทรศัพท์ของคุณจอแสดงผลคีย์บอร์ดมือถือควรปรับตามประเภทอินพุต มีเหตุผลที่ดีมากมายที่จะสนับสนุนคุณสมบัติเหล่านี้สำหรับมือถือเนื่องจากทุกคนทำงานในระหว่างเดินทาง.
องค์ประกอบ textarea ยังสามารถมีข้อความตัวยึดที่กำหนดไว้ใน pageload สิ่งนี้คล้ายกับป้ายกำกับที่หายไปเมื่อผู้ใช้ป้อนข้อความในช่อง คุณลักษณะที่ไม่ได้ดำเนินการคือ การเติมข้อความอัตโนมัติ เพราะโดยปกติข้อความจะไม่เติมเนื้อหาที่เกี่ยวข้อง.
ตัวควบคุมแถบด้านข้าง
ฉันต้องการสร้างแบบฟอร์มนี้เพื่อให้มันตอบสนองได้อย่างเหมาะสมเพื่อปรับขนาดการแสดงหน้าต่าง เมื่อหน้าต่างเต็มพอจากนั้นคอลัมน์อินพุตทั้งสองจะลอยอยู่ติดกัน แต่ถ้าความกว้างถูกตัดลงเล็กน้อยแถบด้านข้างขวาจะลดลงต่ำกว่าเนื้อหาหลัก.
นี่คือ HTML ของฉันสำหรับพื้นที่แถบด้านข้าง:
ผู้รับ:
รหัสนี้จริง ๆ แล้วไม่สับสนอะไรเกินไป เพียงแค่เลือกเมนูอย่างง่ายและปุ่มตัวเลือก นอกจากนี้หลังจากวัตถุเหล่านี้ฉันวางปุ่มรีเซ็ตและส่งไปที่ส่วนท้ายของส่วน.
ทั้งหมดนี้ดูดีและดีดังนั้นตอนนี้เรามาดูคุณสมบัติของ CSS กันบ้าง มีการปรับแต่งมากมายที่คุณสามารถใช้เมื่อทำงานกับองค์ประกอบของแบบฟอร์ม พยายามอย่าทำให้ตัวเองจมอยู่กับการคิดมากและสนุกสนาน!
เงากล่องเคลื่อนไหว
คุณจะสังเกตเห็นขณะที่คุณแท็บผ่านองค์ประกอบอินพุตหลักแต่ละรายการที่ฉันทำภาพเคลื่อนไหวเงาด้านนอกที่มีสีสัน Google Chrome มีคุณสมบัติเค้าร่างซึ่งทำสิ่งที่คล้ายกัน แต่ไม่มากเกินไป ส่วนเล็ก ๆ ของอินเทอร์เฟซนี้ดึงดูดผู้เข้าชมครั้งแรก.
/ ** องค์ประกอบของรูปแบบ ** / # hongkiat-form box-sizing: border-box; # hongkiat-form .txtinput display: block; font-family: "Helvetica Neue", Arial, sans-serif; สไตล์เส้นขอบ: ทึบ; ความกว้างชายแดน: 1px สีเส้นขอบ: #dedede; ระยะขอบล่าง: 20px; ขนาดตัวอักษร: 1.55em; การขยาย: 11px 25px; padding-left: 55px; ความกว้าง: 90%; สี: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ; การเปลี่ยนแปลง: เส้นขอบ 0 วินาทีเชิงเส้น 0 วินาที, กล่องเงา 0.15 วินาทีเชิงเส้น 0 วินาที, สี 0.15 วินาทีเชิงเส้น 0 วินาที; -webkit-transition: เส้นขอบ 0.15s เป็นเส้นตรง 0 วินาที, กล่องเงา 0.15 วินาทีเป็นเส้นตรง 0s, สี 0.15s เป็นเส้นตรง 0s; -moz-transition: เส้นขอบ 0.15s เป็นเส้นตรง 0 วินาที, กล่องเงา 0.15 วินาทีเป็นเส้นตรง 0s, สี 0.15s เป็นเส้นตรง 0s; -o-transition: เส้นขอบ 0.15s เป็นเส้นตรง 0 วินาที, กล่องเงา 0.15 วินาทีเป็นเส้นตรง 0s, สี 0.15s เป็นเส้นตรง 0s; # hongkiat-form .txtinput: focus color: # 333; เส้นขอบสี: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ, 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ, 0 0 8px rgba (41, 92, 161, 0.6); เค้าโครง: 0 ไม่มี;
เพื่อกำหนดเป้าหมายองค์ประกอบข้อความแต่ละตัวที่ฉันใช้ในชั้นเรียน .txtinput. คุณสมบัติการเปลี่ยนแปลงแต่ละอันทำงานบนเส้นขอบเงาและสี ฉันกำลังใช้ ขนาดกล่อง: ชายแดนกล่อง; บนคอนเทนเนอร์ฟอร์มดังนั้นการขยายไม่ทำให้การออกแบบที่ตอบสนองของเรายุ่งเหยิง.
ฉันต้องคัดลอกสไตล์เดียวกันเหล่านี้และแก้ไขเล็กน้อยสำหรับ textarea ฉันเปลี่ยนช่องว่างภายในและระยะขอบบางส่วนและผนวกไอคอนพื้นหลังที่ไม่ซ้ำกัน.
# harekiat-formare textarea display: block; font-family: "Helvetica Neue", Arial, sans-serif; สไตล์เส้นขอบ: ทึบ; ความกว้างชายแดน: 1px สีเส้นขอบ: #dedede; ระยะขอบล่าง: 15px; ขนาดตัวอักษร: 1.5em; การขยาย: 11px 25px; padding-left: 55px; ความกว้าง: 90%; ความสูง: 180px; สี: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ; การเปลี่ยนแปลง: เส้นขอบ 0 วินาทีเชิงเส้น 0 วินาที, กล่องเงา 0.15 วินาทีเชิงเส้น 0 วินาที, สี 0.15 วินาทีเชิงเส้น 0 วินาที; -webkit-transition: เส้นขอบ 0.15s เป็นเส้นตรง 0 วินาที, กล่องเงา 0.15 วินาทีเป็นเส้นตรง 0s, สี 0.15s เป็นเส้นตรง 0s; -moz-transition: เส้นขอบ 0.15s เป็นเส้นตรง 0 วินาที, กล่องเงา 0.15 วินาทีเป็นเส้นตรง 0s, สี 0.15s เป็นเส้นตรง 0s; -o-transition: เส้นขอบ 0.15s เป็นเส้นตรง 0 วินาที, กล่องเงา 0.15 วินาทีเป็นเส้นตรง 0s, สี 0.15s เป็นเส้นตรง 0s; # hongkiat-textarea แบบฟอร์ม: โฟกัส color: # 333; เส้นขอบสี: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ, 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ภาพประกอบ, 0 0 8px rgba (40, 90, 160, 0.6); เค้าโครง: 0 ไม่มี; # hongkiat รูปแบบ textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px ไม่ต้องทำซ้ำ; อินพุตแถบข้าง
ปุ่มตัวเลือกและรายการเมนูที่เลือกนั้นเรียบง่ายกว่ามาก คุณสามารถใช้เอฟเฟกต์แสงจากภายนอกและเงาที่คล้ายกันกับองค์ประกอบเหล่านี้ได้ แต่มันก็ดูไม่ดี อีกทางเลือกหนึ่งนักออกแบบจะสร้างส่วนต่อประสานผู้ใช้ที่กำหนดเองและแนบเป็นภาพพื้นหลัง แต่สิ่งนี้อาจต้องมีวิธีการแก้ปัญหา jQuery เพื่อให้ตัวเลือกแสดงอย่างถูกต้อง.
span.radiobadge display: block; ระยะขอบล่าง: 8px; span.radiobadge ฉลาก font-size: 1.2em; padding-bottom: 4px; select.selmenu font-size: 17px; สี: # 676767; padding: 9px! สำคัญ; เส้นขอบ: 1px solid #aaa; ความกว้าง: 200px;
ฉันยังไม่ได้ทำอะไรมากมายเพื่อผลักสิ่งเหล่านี้ออกไปจากองค์ประกอบเข้าหลัก ช่องว่างภายในเสริมมากมายเป็นสิ่งสำคัญเพื่อให้ผู้ใช้ของคุณรู้สึกสะดวกสบายในการโต้ตอบกับแบบฟอร์ม เมื่อข้อความมีขนาดเล็กมากมันอาจเป็นการดิ้นรนเพื่อเติมเต็มแต่ละส่วน ทำให้แบบอักษรของคุณมีขนาดใหญ่ แต่ไม่ใหญ่จนเกินหน้า.
ปุ่มที่กำหนดเอง
ปุ่มรีเซ็ตและส่งได้รับการออกแบบในชั้นเรียนของตนเอง ฉันได้สร้างชุดการไล่ระดับสีอ่อนเพื่อให้เข้ากับไฮไลท์สีน้ำเงินในฟิลด์แบบฟอร์มของเรา.
ด้านล่างเป็นรหัส CSS ของฉันสำหรับปุ่มส่งในสถานะมาตรฐานและโฮเวอร์.
#buttons #submitbtn display: block; ลอย: ซ้าย; ความสูง: 3em; การขยาย: 0 1em; เส้นขอบ: 1px solid; ร่าง: 0; น้ำหนักตัวอักษร: ตัวหนา; ขนาดตัวอักษร: 1.3em; สี: #fff; ข้อความเงา: 0px 1px 0px # 222; พื้นที่สีขาว: nowrap; การตัดคำ: ปกติ; แนวตั้ง - จัด: กลาง; เคอร์เซอร์: ตัวชี้; -moz-border-radius: 2px; -webkit-border-radius: 2px; รัศมี - ชายแดน: 2px; สีเส้นขอบ: # 5e890a # 5e890a # 000; -moz-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); box-shadow: inset 0 1px 0 rgba (256,256,256, .35); สีพื้นหลัง: rgb (226,238,175); ภาพพื้นหลัง: -moz-linear-gradient (ด้านบน, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); ภาพพื้นหลัง: -webkit-gradient (เส้นตรง, ด้านบนซ้าย, ล่างซ้าย, สีหยุด (3%, rgb (226,238,175)), สีหยุด (3%, rgb (188,216,77)), สีหยุด (100 % rgb (144,176,38))); ภาพพื้นหลัง: -webkit-linear-gradient (ด้านบน, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: โฮเวอร์, #buttons #submitbtn: ใช้งานได้ color-border: # 7c9826 # 7c9826 # 000; สี: #fff; -moz-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -ms-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -webkit-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); พื้นหลัง: rgb (228,237,189); พื้นหลัง: -moz-linear-gradient (บนสุด, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); พื้นหลัง: -webkit-gradient (เส้นตรงด้านบนซ้ายล่างซ้ายสีหยุด (2%, rgb (228,237,189)), สีหยุด (3%, rgb (207,219,120)), สีหยุด (100%, rgb ( 149,175,54))); พื้นหลัง: -webkit-linear-gradient (บนสุด, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); พื้นหลัง: -o-linear-gradient (บนสุด, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); พื้นหลัง: -ms-linear-gradient (บนสุด, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); พื้นหลัง: linear-gradient (บนสุด, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0);
แทบจะเป็นไปไม่ได้ที่จะรักษาตัวเลือกประเภทนี้ให้สะอาด! มีคุณสมบัติมากเกินไปที่คุณต้องการแสดงรายการและรองรับเบราว์เซอร์รุ่นเก่าจำนวนมาก Internet Explorer สามารถแสดงการไล่ระดับสีเหล่านี้ด้วยตัวกรองที่เหมาะสม สังเกตว่านอกเหนือจากการไล่ระดับสีพื้นหลังฉันยังได้รวมสีเส้นขอบใหม่มุมมนและเงาของกล่องไว้ด้วย.
ปุ่มรีเซ็ตดูเหมือนกัน แต่ฉันไปเส้นทางที่แตกต่างอย่างสิ้นเชิงกับโทนสี สีเทาอ่อนมีแนวโน้มตกอยู่ในพื้นหลังเมื่อเทียบกับสีเขียวสดใส ปุ่มรีเซ็ตของเรามีแนวโน้มว่าจะไม่ใช้งานมากนักดังนั้นจึงไม่จำเป็นต้องได้รับความสนใจทั้งหมด.
#buttons #resetbtn display: block; ลอย: ซ้าย; สี: # 515151; ข้อความเงา: -1px 1px 0px #fff; ระยะขอบ - ขวา: 20px; ความสูง: 3em; การขยาย: 0 1em; ร่าง: 0; น้ำหนักตัวอักษร: ตัวหนา; ขนาดตัวอักษร: 1.3em; พื้นที่สีขาว: nowrap; การตัดคำ: ปกติ; แนวตั้ง - จัด: กลาง; เคอร์เซอร์: ตัวชี้; -moz-border-radius: 2px; -webkit-border-radius: 2px; รัศมี - ชายแดน: 2px; พื้นหลังสี: #fff; ภาพพื้นหลัง: -moz-linear-gradient (ด้านบน, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); ภาพพื้นหลัง: -webkit-gradient (เส้นตรง, ด้านบนซ้าย, ล่างซ้าย, สีหยุด (2%, rgb (255,255,255)), สีหยุด (2%, rgb (240,240,240)), สีหยุด (100%, rgb (222,222,222))); ภาพพื้นหลัง: -webkit-linear-gradient (ด้านบน, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); เส้นขอบ: 1px solid # 969696; box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4) ข้อความเงา: 0 1px 1px rgba (255, 255, 255, 0.75); #buttons #resetbtn: โฮเวอร์ text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); สี: # 818181; พื้นหลังสี: #fff; ภาพพื้นหลัง: -moz-linear-gradient (ด้านบน, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); ภาพพื้นหลัง: -webkit-gradient (เส้นตรง, ด้านบนซ้าย, ล่างซ้าย, สีหยุด (2%, rgb (255,255,255)), สีหยุด (2%, rgb (244,244,244)), สีหยุด (100%, rgb (229,229,229))); background-image: -webkit-linear-gradient (บนสุด, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -o-linear-gradient (บนสุด, rgb () 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); เส้นขอบสี: #aeaeae; box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5);
คุณสามารถลดประเภทการรีเซ็ตและใช้ชุดรูปแบบสีขาว / เทานี้เป็นปุ่มส่งหลักของคุณ ฉันใช้สไตล์การไล่ระดับสีเดียวกันหลายแบบและเอฟเฟกต์เงาตกพร้อมกับเงาข้อความสำหรับฉลากด้านใน มันให้ความรู้สึกที่แตกต่างกับประสบการณ์ของผู้ใช้อย่างแน่นอน.
การเปลี่ยนแปลงเค้าโครงที่ตอบสนอง
การย้ายไปสู่ไฟล์ CSS อื่นของฉันเราสามารถดูการสืบค้นสื่อที่ตอบสนองง่าย ๆ ที่ฉันได้ตั้งค่า หน้าต่างเบราว์เซอร์ใด ๆ ที่สูงกว่า 800px จะได้สัมผัสกับแถบด้านข้างแบบเต็ม เมื่อคุณได้รับต่ำกว่าเกณฑ์นี้คอลัมน์ด้านซ้ายจะขยายความกว้าง 100% และคุณจะเห็นองค์ประกอบด้านข้างเลื่อนลงด้านล่าง.
@ หน้าจอสื่อและ (ความกว้างสูงสุด: 800px) เนื้อหา padding: 10px 15px; #container กว้าง: 100%; # hongkiat-form #aligned width: 100%; ลอย: ไม่มี; จอแสดงผล: บล็อก; # hongkiat-form #aside width: 100%; จอแสดงผล: บล็อก; ลอย: ไม่มี; # hongkiat-form .txtinput, # hongkiat-form textarea ความกว้าง: 85%; #prioritycase float: left; จอแสดงผล: บล็อก; #recipientcase float: left; จอแสดงผล: บล็อก; มาร์จิ้นขวา: 55px;
เมื่อเราเข้าใกล้ขนาดฉันพยายามที่จะปรับรูปแบบการป้อนข้อมูลแต่ละแบบ คุณสมบัติความกว้างสามารถจบลงได้นานกว่าหน้าเว็บของตัวเองและจากนั้นเรามีรูปแบบการป้อนข้อมูลยื่นออกมาเหนือขอบ สิ่งนี้เกิดขึ้นประมาณ 550px ซึ่งเป็นจุดที่ฉันตัดข้อความค้นหาถัดไปพร้อมกับความละเอียดหน้าจอ iPhone ทั้งในแนวตั้งและแนวนอน.
/ * ดร็อปหน้าจอที่เล็กลง ******* / @ สื่อหน้าจอเท่านั้นและ (ความกว้างสูงสุด: 550px) # hongkiat-form .txtinput, # hongkiat textarea แบบฟอร์ม width: 80%; / * แนวนอน iPhone ******** / @media หน้าจอเท่านั้นและ (ความกว้างสูงสุด: 480px) เนื้อหา padding: 10px 0px; select.selmenu width: 190px; / * แนวตั้ง iPhone ******* / @ สื่อหน้าจอเท่านั้นและ (ความกว้างสูงสุด: 320px) เนื้อหา padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea ความกว้าง: 70%; # hongkiat-form #aligned ล้น: ซ่อน; select.selmenu width: 160px; #recipientcase margin-right: 30px;
โหมดแนวนอนยังคงเก็บทุกอย่างเข้าด้วยกันเป็นอย่างดี ฉันทำเมนูแบบเลื่อนลงเพียงเล็กน้อยเท่านั้นเพื่อให้มีที่ว่างสำหรับปุ่มตัวเลือก ในมุมมองแนวตั้งฉันได้ปรับขนาดองค์ประกอบทั้งหมดให้มีความกว้างน้อยลงมาก ตอนนี้โค้ดของเราจะไม่หยุดยั้งแม้ในหน้าต่างเบราว์เซอร์ที่ปรับขนาดแล้ว แต่มันก็ดีที่มีสมาร์ทโฟน iOS / Android รองรับเช่นกัน.
- การสาธิต
- ดาวน์โหลดซอร์สโค้ด
ข้อสรุป
ฉันหวังว่าแบบฝึกหัดนี้จะเป็นประโยชน์ในการอธิบายว่าเว็บฟอร์มของคุณสามารถทำได้มากเพียงใด คุณสมบัติ CSS3 ใหม่นั้นทรงพลังพอที่จะสร้างภาพเคลื่อนไหวที่ทำงานได้อย่างสมบูรณ์ด้วยโค้ดเพียงไม่กี่บรรทัด เป็นเวลาที่น่าตื่นเต้นอย่างแท้จริงในการพัฒนาเว็บไซต์และติดตามแนวโน้มเหล่านี้.
หากคุณมีความคิดเห็นหรือข้อเสนอแนะเกี่ยวกับรหัสการสอนอย่าลังเลที่จะแบ่งปันกับเราผ่านช่องแสดงความคิดเห็นด้านล่าง.
