หน้าแรก
หน้าแรก
ตั้งค่าคุณสมบัติต่อไปนี้ด้วยคุณสมบัติกริด:grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns และ grid-auto-flow คุณสมบัติ ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติกริด CSS <!DOCTYPE html> <html> <head> &n
ด้วยคุณสมบัติ grid-row ให้กำหนดขนาดของรายการกริด มีคุณสมบัติ grid-row-start และ grid-row-end คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ CSS grid-row ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .cont
ตั้งค่าการไล่ระดับสีเชิงเส้นเป็นภาพพื้นหลังด้วยฟังก์ชัน CSS linear-gradient() คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ฟังก์ชัน linear-gradient() ใน CSS ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #demo { &
ใช้จัดตำแหน่งเนื้อหา คุณสมบัติที่มีค่า เว้นวรรค เพื่อเพิ่มพื้นที่รอบเส้นงอ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน space-around ค่า ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { &
ใช้ จัดตำแหน่งเนื้อหา พร็อพเพอร์ตี้พร้อม value center เพื่อกำหนดเส้น flex ให้อยู่ตรงกลาง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งานศูนย์ ค่า ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { &nb
คุณสมบัติ nav-right ใช้เพื่อเลื่อนไปทางขวาเมื่อคุณกดปุ่มลูกศรขวาในแป้นพิมพ์ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ CSS nav-right ตัวอย่าง <!DOCTYPE html> <html> <head> <style> button { &nbs
กำหนดคอนเทนเนอร์แบบยืดหยุ่นและตั้งค่ารายการแบบยืดหยุ่นในนั้น คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีใช้องค์ประกอบ Flexbox Q1, Q2, Q3 นี่คือรายการแบบยืดหยุ่น พื้นที่ทั้งหมดเป็นองค์ประกอบ Flexbox ตัวอย่าง <!DOCTYPE html> <html> <head> <
หากต้องการปรับขนาดช่องว่าง ให้ใช้คุณสมบัติ grid-column-gap, grid-row-gap หรือ grid-gap ใน CSS คุณสมบัติ grid-column-gap กำหนดช่องว่างระหว่างคอลัมน์กริดด้วย CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ grid-column-gap ตัวอย่าง <!DOCTYPE html> <html> <head> &n
ต่อไปนี้เป็นคุณสมบัติของรายการแบบยืดหยุ่น สั่งซื้อ flex-grow flex-หด แบบยืดหยุ่น ดิ้น จัดตำแหน่งตัวเอง มาดูตัวอย่างคุณสมบัติ flex-basis กำหนดความยาวของรายการ flex ด้วยคุณสมบัติ CSS พื้นฐาน flex คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ flex-basis ตัวอย่าง <!DOCTYPE html> <html&g
ในการจัดตำแหน่งข้อความให้อยู่กึ่งกลางรูปภาพ ให้ใช้คุณสมบัติการแปลงใน CSS คุณสามารถลองเรียกใช้รหัสต่อไปนี้สำหรับข้อความที่อยู่กึ่งกลางบนรูปภาพ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container {
ในการตั้งค่าความกว้างของแต่ละคอลัมน์ใน Grid Layout ให้ใช้ grid-template-columns ทรัพย์สิน ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน - <!DOCTYPE html> <html> <head> <style> .container { &nbs
กำหนดช่องว่างระหว่างแถวกริดและคอลัมน์ด้วย CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ grid-gap ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { d
ใช้ justify-content ทรัพย์สินมีค่า ศูนย์กลาง เพื่อจัดตำแหน่งงอสินค้าให้อยู่ตรงกลาง ตัวอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อใช้ค่าศูนย์ - <!DOCTYPE html> <html> <head> <style> .mycontainer { &nb
ใช้ grid-template-rows คุณสมบัติเพื่อกำหนดจำนวนแถวใน CSS Grid Layout ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อกำหนดจำนวนแถวได้ <!DOCTYPE html> <html> <head> <style> .container { &nb
กำหนดตำแหน่งที่จะเริ่มต้นรายการกริดด้วยคุณสมบัติ CSS grid-column-start ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ grid-column-start <!DOCTYPE html> <html> <head> <style> .container { &
เส้นตารางคือเส้นคอลัมน์และเส้นแถว เส้นคอลัมน์คือเส้นระหว่างคอลัมน์และเส้นแถวระหว่างแถว ต่อไปนี้เป็นตัวอย่างเส้นตาราง ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { &
หากต้องการจัดตำแหน่งข้อความไปทางซ้ายบน ให้ใช้ซ้ายและบน คุณสมบัติ. คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อจัดตำแหน่งข้อความไปยังตำแหน่งซ้ายบนรูปภาพ - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .box {
ใช้ flex-direction คุณสมบัติที่มี แถว ค่าเพื่อตั้งค่า flex-items ในแนวนอนจากขวาไปซ้าย ตัวอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อใช้ค่าการย้อนกลับแถว - <!DOCTYPE html> <html> <head> <style> .mycontainer {
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ ความกว้างสูงสุด คุณสมบัติเพื่อให้เครื่องเล่นวิดีโอของคุณตอบสนอง - ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width=device-width, initial-scale = 1.0"&
ในการออกแบบหน้าเว็บ คุณยังสามารถทำตาม Grid Layout Module เช่น ตารางที่มีแถวและคอลัมน์ เค้าโครงกริดมีองค์ประกอบกริด แถว คอลัมน์ ช่องว่าง ฯลฯ Grid Layout มีองค์ประกอบหลักและองค์ประกอบย่อย แถวคือเส้นแนวนอนของรายการกริด อย่างไรก็ตาม คอลัมน์คือเส้นแนวตั้ง