เค้าโครง CSS ต้องการให้คุณนึกถึงเค้าโครงเว็บไซต์ของคุณโดยรวมจากนั้นจึงนำชิ้นส่วนเหล่านี้มารวมกัน เรียนรู้วิธีการสร้างเค้าโครง 3 คอลัมน์แบบง่ายๆด้วย CSS
01 จาก 09
วาดเค้าโครงของคุณ
คุณสามารถวาดเค้าโครงบนกระดาษหรือใน โปรแกรมกราฟิก หากคุณมีโครงลวดหรือการออกแบบที่กว้างขึ้นในใจให้ลดความซับซ้อนลงในกล่องขั้นพื้นฐานที่ประกอบขึ้นมาในไซต์ การออกแบบที่มาพร้อมกับบทความนี้มีสามคอลัมน์ในพื้นที่เนื้อหาหลักรวมทั้งส่วนหัวและส่วนท้าย ถ้าคุณมองใกล้ ๆ คุณจะเห็นว่าสามคอลัมน์มีความกว้างไม่เท่ากัน
หลังจากที่เค้าโครงของคุณวาดขึ้นคุณสามารถเริ่มคิดขนาดได้ ตัวอย่างการออกแบบนี้จะมีมิติข้อมูลพื้นฐานต่อไปนี้:
- ความกว้างไม่เกิน 900 พิกเซล
- ร่องน้ำ 20 px ด้านซ้าย
- 10 px ระหว่างคอลัมน์และแถว
- คอลัมน์ที่มีความกว้าง 250px, 300px และ 300px
- แถวบนสุดสูง 150px
- แถวล่างสุดสูง 100px
02 จาก 09
เขียน Basic HTML / CSS และสร้าง Element คอนเทนเนอร์
เนื่องจากหน้านี้จะเป็นเอกสาร HTML ที่ถูกต้องโปรดเริ่มต้นด้วยที่เก็บ HTML เปล่า
เพิ่มในรูปแบบ CSS ขั้นพื้นฐานให้ เป็นศูนย์จากขอบหน้าขอบและการเบาะรองศีรษะ ในขณะที่มี สไตล์ CSS มาตรฐาน อื่น ๆ สำหรับเอกสารใหม่รูปแบบเหล่านี้เป็นขั้นต่ำที่คุณต้องได้รับรูปแบบที่สะอาด เพิ่มไว้ในส่วนหัวของเอกสาร: