เค้าโครง CSS ต้องการให้คุณนึกถึงเค้าโครงเว็บไซต์ของคุณโดยรวมจากนั้นจึงนำชิ้นส่วนเหล่านี้มารวมกัน เรียนรู้วิธีการสร้างเค้าโครง 3 คอลัมน์แบบง่ายๆด้วย CSS
01 จาก 09วาดเค้าโครงของคุณ
คุณสามารถวาดเค้าโครงบนกระดาษหรือในโปรแกรมกราฟิก หากคุณมีโครงลวดหรือการออกแบบที่กว้างขึ้นในใจให้ลดความซับซ้อนลงในกล่องขั้นพื้นฐานที่ประกอบขึ้นมาในไซต์ การออกแบบที่มาพร้อมกับบทความนี้มีสามคอลัมน์ในพื้นที่เนื้อหาหลักรวมทั้งส่วนหัวและส่วนท้าย ถ้าคุณมองใกล้ ๆ คุณจะเห็นว่าสามคอลัมน์มีความกว้างไม่เท่ากัน
หลังจากที่เค้าโครงของคุณวาดขึ้นคุณสามารถเริ่มคิดขนาดได้ ตัวอย่างการออกแบบนี้จะมีมิติข้อมูลพื้นฐานต่อไปนี้:
- ความกว้างไม่เกิน 900 พิกเซล
- ร่องน้ำ 20 px ด้านซ้าย
- 10 px ระหว่างคอลัมน์และแถว
- คอลัมน์ที่มีความกว้าง 250px, 300px และ 300px
- แถวบนสุดสูง 150px
- แถวล่างสุดสูง 100px
เขียน Basic HTML / CSS และสร้าง Element คอนเทนเนอร์
เนื่องจากหน้านี้จะเป็นเอกสาร HTML ที่ถูกต้องโปรดเริ่มต้นด้วยที่เก็บ HTML เปล่า
เพิ่มในรูปแบบ CSS ขั้นพื้นฐานให้เป็นศูนย์จากขอบหน้าขอบและการเบาะรองศีรษะ ในขณะที่มีสไตล์ CSS มาตรฐานอื่น ๆ สำหรับเอกสารใหม่รูปแบบเหล่านี้เป็นขั้นต่ำที่คุณต้องได้รับรูปแบบที่สะอาด เพิ่มไว้ในส่วนหัวของเอกสาร:
เมื่อต้องการเริ่มสร้างเค้าโครงให้วางองค์ประกอบคอนเทนเนอร์ บางครั้งอาจเกิดขึ้นที่คุณสามารถลบคอนเทนเนอร์ได้ในภายหลัง แต่สำหรับรูปแบบความกว้างคงที่มากที่สุดการมีองค์ประกอบคอนเทนเนอร์ช่วยให้สามารถจัดการกับเว็บเบราเซอร์ต่างๆได้ง่ายขึ้น ดังนั้นในร่างกายใส่นี้: และในสไตล์ชีต CSS ให้ใส่: คอนเทนเนอร์กำหนดว่าเนื้อหาของหน้าเว็บจะกว้างแค่ไหนรวมทั้งขอบด้านนอกและช่องว่างด้านใน สำหรับเอกสารนี้คอนเทนเนอร์มีขนาดกว้าง 870 พิกเซลและมีรางน้ำ 20 พิกเซลอยู่ทางด้านซ้าย รางน้ำถูกเซ็ตอัพด้วยรูปแบบส่วนขอบ แต่ช่องว่างบนคอนเทนเนอร์จะไม่ได้รับการตั้งค่าให้เป็นศูนย์เพื่อป้องกันไม่ให้องค์ประกอบใด ๆ ที่อยู่ใกล้กับภาชนะบรรจุ #container { ความกว้าง: 870px; margin: 0 0 0 20px; / * ด้านขวาล่างซ้าย * / padding: 0; } หากคุณบันทึกเอกสารไว้ในตอนนี้จะเห็นคอนเทนเนอร์ได้ยากเพราะไม่มีอะไรเลย หากคุณเพิ่มข้อความตัวยึดตำแหน่งคุณจะเห็นองค์ประกอบคอนเทนเนอร์ได้ชัดเจนยิ่งขึ้น วิธีการที่คุณกำหนดสไตล์แถวหัวเรื่องขึ้นอยู่กับสิ่งที่อยู่ในนั้น หากแถวส่วนหัวเป็นเพียงแค่จะมีโลโก้กราฟิกและบรรทัดแรกแล้วใช้แท็กบรรทัดแรก ( HTML สำหรับแถวส่วนหัวไปที่ด้านบนสุดของคอนเทนเนอร์และมีลักษณะดังนี้: จากนั้นในการตั้งรูปแบบบนเส้นขอบสีแดงถูกเพิ่มไว้ที่ด้านล่างเพื่อให้คุณสามารถมองเห็นว่าส่วนไหนที่สิ้นสุดระยะขอบและช่องว่างที่กำหนดไว้เป็นศูนย์ออกความกว้างที่กำหนดไว้คือ 100% และความสูง 150px: #container h1 { margin: 0; padding: 0; ความกว้าง: 100%; ความสูง: 150px; ลอย: ซ้าย; border-bottom: # c00 solid 3px; } อย่าลืมลอยองค์ประกอบนี้ด้วย float: left; คุณสมบัติ กุญแจสำคัญในการเขียนเค้าโครง CSS คือการลอยทุกอย่าง - แม้กระทั่งสิ่งที่มีความกว้างเช่นเดียวกับคอนเทนเนอร์ ด้วยวิธีนี้คุณจะรู้ได้เสมอว่าองค์ประกอบใดจะอยู่บนหน้าเว็บ ตัวเลือกลูกหลาน CSS ใช้ลักษณะเฉพาะกับองค์ประกอบ H1 ที่อยู่ภายในองค์ประกอบ #container เมื่อคุณสร้างเค้าโครงสามคอลัมน์ด้วย CSS คุณต้องแบ่งเค้าโครงของคุณออกเป็นสองกลุ่ม ดังนั้นสำหรับรูปแบบสามคอลัมน์นี้คอลัมน์กลางและด้านขวาและจัดกลุ่มและวางไว้ถัดจากคอลัมน์ทางซ้ายในรูปแบบสองคอลัมน์ที่คอลัมน์ด้านซ้ายกว้าง 250px และคอลัมน์ด้านขวากว้าง 610px (แต่ละคอลัมน์ 300 สำหรับคอลัมน์สองคอลัมน์ , บวก 10px สำหรับรางน้ำระหว่างพวกเขา) HTML มีลักษณะดังนี้: Ut aliquip ex ea commodo consequat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. ในการต่อต้านการออกกำลังกายในขณะนอนหลับ eu fugiat nulla pariatur ความสามารถในการทำงานที่มีประสิทธิภาพมากขึ้น Ut enim ad minim veniam, ทำให้เป็นไปตามข้อกำหนดในการดำเนินงานของ ullamco laboris nisi. Ut labore และ dolore magna aliqua Velit esse cillum dolore eu fugiat nulla pariatur. ข้อความตัวยึดตำแหน่งในคอลัมน์จะทำให้มองเห็นได้มากขึ้นเมื่อทดสอบ CSS มีลักษณะดังนี้: #container # col1 { ความกว้าง: 250px; ลอย: ซ้าย; } #container # col2outer { ความกว้าง: 610px; ลอย: ขวา; margin: 0; padding: 0; } คอลัมน์ด้านซ้ายจะลอยไปทางซ้ายขณะที่อีกด้านหนึ่งลอยไปทางขวา เนื่องจากความกว้างรวมของทั้งสองคอลัมน์เป็น 860px มีรางน้ำ 10px อยู่ระหว่างกัน ในการสร้างคอลัมน์สามคอลัมน์ให้เพิ่ม div สองส่วนภายในคอลัมน์ที่สองที่กว้างขึ้นเช่นเดียวกับที่คุณเพิ่ม div 2 รายการภายในคอลัมน์คอนเทนเนอร์ในขั้นตอนสุดท้าย HTML มีลักษณะดังนี้: Ut enim ad minim veniam, ทำให้เป็นไปตามข้อกำหนดในการดำเนินงานของ ullamco laboris nisi. Ut labore และ dolore magna aliqua Velit esse cillum dolore eu fugiat nulla pariatur. เวลาเปิดใช้งานของน้ำ, เวลาที่มีการเปิดใช้งานเป็นเวลานานUllam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. ความเป็นจริงของหูชั้นกลางที่มีความสำคัญและมีความสำคัญกับความรู้สึกและความรู้สึก CSS มีลักษณะดังนี้: # col2outer # col2mid { ความกว้าง: 300px; ลอย: ซ้าย; } # col2outer # col2side { ความกว้าง: 300px; ลอย: ขวา; } เนื่องจากทั้งสองกล่องกว้าง 300px อยู่ภายในกล่องกว้าง 610px จะมีรางน้ำอีก 10px อยู่ระหว่างกัน ขณะที่ส่วนที่เหลือของเพจถูกจัดรูปแบบคุณสามารถเพิ่มในส่วนท้ายได้ ใช้ div สุดท้ายที่มีรหัส "ท้าย" และเพิ่มเนื้อหาเพื่อให้คุณสามารถดูได้ นอกจากนี้คุณยังสามารถเพิ่มเส้นขอบที่ด้านบนเพื่อที่คุณจะได้ทราบว่าจะเริ่มจากที่ไหน HTML: CSS: #container #footer {
ลอย: ซ้าย;
ความกว้าง: 870px;
border-top: # c00 แบบทึบ 3px;
} 08 จาก 09 ตอนนี้คุณมีเค้าโครงเสร็จแล้วคุณสามารถเริ่มต้นเพิ่มสไตล์และเนื้อหาส่วนตัวของคุณเองได้ โปรดจำไว้ว่าขอบบนส่วนหัวและท้ายกระดาษถูกเพิ่มเพื่อแสดงส่วนเค้าโครงโดยเฉพาะสำหรับการออกแบบ นี่คือเอกสารทั้ง HTML และ CSS: จัดรูปแบบคอนเทนเนอร์
ใช้ Headline Tag สำหรับ Header
) มีความหมายมากกว่าการใช้ a
แถวส่วนหัวของฉัน
เพื่อให้ได้คอลัมน์สามคอลัมน์โดยเริ่มจากการสร้างสองคอลัมน์
เพิ่มคอลัมน์สองคอลัมน์ภายในคอลัมน์ที่สองกว้าง
เพิ่มในส่วนท้าย
เพิ่มในสไตล์และเนื้อหาส่วนบุคคลของคุณ
Final HTML / CSS
