นี่คือวิธีที่ฉันสร้างโค้ดเค้าโครง DIV ไม่รู้ว่าจะชัดหรือเปล่า มาดูกัน
ความคิดของฉันคือในอนาคต เราสามารถใช้ชิ้นส่วนมาตรฐานเพื่อประกอบเค้าโครง DIV ของหน้าเว็บได้
ฉันแบ่งคลาสออกเป็นสองประเภท คลาสเค้าโครง และคลาสสไตล์ คลาสเค้าโครงคือโครงกระดูก และคลาสสไตล์คือเสื้อผ้า
ตัวอย่างเช่น:
ตัวอย่างเช่น คอลัมน์ด้านซ้ายในเค้าโครง
ประการแรก คุณสมบัติของมันคือ: คอลัมน์ด้านซ้าย ความกว้าง สีพื้นหลัง สีตัวอักษร ฯลฯ
1. ขั้นแรก คลาสจะถูกกำหนด เช่น .layout ซึ่งส่วนใหญ่จะใช้เพื่อควบคุมขนาดทั้งหมดของเพจ
.layout{width:98%;margin:0 auto;text-align:left;}
2. จากนั้นจะมีการกำหนดโครงร่างพื้นฐาน 3 แบบ Class(l,m,r)
.l{ลอย:ซ้าย}
.m{ความกว้าง:อัตโนมัติ}
.r{ลอย:ขวา}
ฉันยังจัดประเภทเค้าโครง 2 คอลัมน์เป็นรูปแบบ 3 คอลัมน์ด้วย เพราะในรูปแบบ 3 คอลัมน์ เมื่อความกว้างของคอลัมน์ซ้ายและขวาเป็น 0 3 คอลัมน์จะกลายเป็น 2 คอลัมน์
เมื่อเราเขียนโค้ดโครงร่างพื้นฐาน วิธีที่ดีที่สุดคือเขียนในรูปแบบ 3 คอลัมน์
3. ให้สอดคล้องกับคลาสโครงร่าง กำหนดคลาสสไตล์ที่ต้องการ เช่น ความกว้าง ความสูง สีพื้นหลัง ฯลฯ ทั้งหมดนี้ล้วนเป็นองค์ประกอบของสไตล์
.class_l{พื้นหลัง:#ff0;ระยะขอบขวา: -150px;ความกว้าง:150px;}
.class_m{พื้นหลัง:#f00;ระยะขอบ:0 140px 0 150px;}
.class_r{พื้นหลัง:#00f;ระยะขอบซ้าย: -140px;ความกว้าง:140px;}
มีคลาสโครงร่างเพียงชุดเดียว แต่สามารถกำหนดคลาสสไตล์ได้หลายคลาส
ตัวอย่างเช่น คุณต้องการสร้างเค้าโครงสองคอลัมน์เล็กๆ ในคอลัมน์กลาง
คุณสามารถกำหนดคลาสสไตล์อื่นได้
.mid_l{พื้นหลัง:#ff0;ระยะขอบขวา: -100px;ความกว้าง:100px;}
.mid_m{พื้นหลัง:#f00;ระยะขอบ:0 0 0 100px;}
4. รวมคลาสโครงร่างและคลาสสไตล์แล้วอ้างอิงในโค้ดเช่นนี้
<คลาส div=l คลาส＿l></div>
<div class=l mid_l></div>
อ้างอิงทั้งสองคลาสโดยคั่นด้วยช่องว่าง อันแรกคือคลาสโครงร่าง และอันที่สองคือคลาสสไตล์ คุณสามารถเสนอราคาทั้งสองคลาสด้วยการเว้นวรรคได้ หากคุณต้องการกำหนดมันเป็นพิเศษ คุณสามารถให้ div นี้ รหัสที่จะกำหนด
คลาสสไตล์ที่ใช้กันทั่วไปอื่นๆ ยังสามารถเขียนเป็นสากลได้ ตัวอย่างเช่น สามารถกำหนดโดยนัยเป็น
.ซ่อน{จอแสดงผล:ไม่มี}
จากนั้นเมื่อจำเป็น ให้ใช้ class=xxx Hide เพื่ออ้างอิง ซึ่งสะดวกมาก
รหัส: