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