การออกแบบเว็บที่ตอบสนอง - ตารางมุมมอง
มุมมองตารางคืออะไร?
หน้าเว็บจำนวนมากมีการออกแบบตามตารางหมายความว่าหน้าจะขึ้นอยู่กับรูปแบบคอลัมน์
ใช้มุมมองตารางช่วยเราในการออกแบบหน้าเว็บ นี้จะช่วยให้เราสามารถเพิ่มองค์ประกอบของหน้ากลายเป็นเรื่องง่าย
มุมมองตารางการตอบสนองโดยปกติจะเป็น 12 มีความกว้าง 100% เมื่อหน้าต่างเบราว์เซอร์ที่ถูกปรับขนาดโดยอัตโนมัติพับเก็บได้
สร้างมุมมองตารางการตอบสนอง
ต่อไปเราจะสร้างมุมมองตารางการตอบสนอง
ก่อนให้แน่ใจว่าองค์ประกอบ HTMLทุกคนมีคุณสมบัติกล่องขนาดและการตั้งค่าไปยังชายแดนกล่อง
ให้แน่ใจว่าอัตรากำไรขั้นต้นและเส้นขอบที่มีอยู่ระหว่างกว้างและความสูงขององค์ประกอบ
เพิ่มรหัสต่อไปนี้:
* {
box-sizing: border-box;
}
ดูข้อมูลเพิ่มเติมกล่องปรับขนาดกรุณาคลิกที่: คุณสมบัติ CSS3 กล่องขนาด
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงเว็บง่ายตอบสนองที่มีสองคอลัมน์:
ตัวอย่างเช่นข้างต้นทั้งสอง
ระบบกริด 12 ที่ดีขึ้นสามารถควบคุมเว็บไซต์ที่ตอบสนองต่อ
ครั้งแรกที่เราสามารถคำนวณอัตราร้อยละของแต่ละคอลัมน์: 100% / 12 = 8.33%
ที่ระบุไว้ในชั้นเรียนแต่ละคอลัมน์ class = "จะเก็บรวบรวม" ถูกนำมาใช้ในการกำหนดแต่ละคอลัมน์มีหลายช่วง:
CSS:
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
ลอง»
คอลัมน์ทั้งหมดที่เหลือลอยระยะห่าง (ขยาย) เพื่อ 15px:
CSS:
ลอย: ด้านซ้าย;
padding: 15px;
ชายแดน: 1px ของแข็งสีแดง;
}
แต่ละแถวจะใช้ <div> แพคเกจ คอลัมน์ทั้งหมดควรจะเพิ่มขึ้นถึง 12:
<div class = "Col-3 "> ... </ div>
<div class = "Col-9 "> ... </ div>
</ div>
พฤติกรรมคอลัมน์ด้านซ้ายลอยและเพิ่มโฟลตใส:
CSS:
เนื้อหา: "";
ชัดเจนทั้งสอง
จอแสดงผล: บล็อก
}
เราสามารถเพิ่มรูปแบบและสีบางอย่างให้มันดูดีกว่า:
ตัวอย่าง
font-family: "Lucida Sans" , Sans-serif;
}
เซฟไว้ได้ {
สีพื้นหลัง: # 9933cc;
สี: #FFFFFF;
padding: 15px;
}
.menu UL {
รูปแบบรายการ-Type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
ขอบล่าง: 7px;
สีพื้นหลัง: # 33b5e5;
สี: #FFFFFF;
กล่องเงา: 0 1px 3px RGBA (0,0,0,0.12), 0 1px 2px RGBA (0,0,0,0.24);
}
Li .menu: โฉบ {
สีพื้นหลัง: # 0099cc;
}
ลอง»