ตัวอย่างของแท็บ CSS
บทนี้เราจะมาแนะนำวิธีการสร้างตัวอย่างของเพจผ่านการใช้แบบ CSS
แท็บง่าย
หากเว็บไซต์ของคุณมีหลายหน้าคุณจะต้องใช้แท็บเพื่อให้นำทางสำหรับแต่ละหน้า
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการใช้ HTML และ CSS การสร้างหน้า:
ตัวอย่าง CSS
จอแสดงผล: อินไลน์บล็อก
padding: 0;
margin: 0;
}
Li ul.pagination {display: อินไลน์;}
ul.pagination หลี่ {
สี: สีดำ;
ลอย: ด้านซ้าย;
padding: 8px 16px;
ตกแต่งข้อความ: none;
}
ลอง»
คลิกแท็บและโฉบสไตล์
หากคุณคลิกในหน้านี้คุณสามารถใช้ .active การตั้งค่ารูปแบบหน้าปัจจุบันคุณสามารถใช้เมาส์เหนือ :hover เตอร์ในการปรับเปลี่ยนรูปแบบ:
ตัวอย่าง CSS
สีพื้นหลัง: # 4CAF50;
สี: สีขาว;
}
ul.pagination li A: โฉบ: ไม่ได้ ( .active) {สีพื้นหลัง: #ddd;}
ลอง»
ตัวอย่าง CSS
สีพื้นหลัง: # 4CAF50;
สี: สีขาว;
}
ul.pagination li A: โฉบ: ไม่ได้ (.active) {สีพื้นหลัง: #ddd;}
ลอง»
รูปแบบโค้งมน
คุณสามารถใช้ border-radius อสังหาริมทรัพย์สำหรับเพจที่เลือกที่จะเพิ่มมุมโค้งมนรูปแบบ:
ตัวอย่าง CSS
border-radius: 5px;
}
a.active ul.pagination li {
border-radius: 5px;
}
ลอง»
ผลการเปลี่ยนแปลงเลื่อน
เราสามารถเพิ่ม transition คุณสมบัติการเลื่อนเมาส์บนหน้าเมื่อคุณเพิ่มผลการเปลี่ยนแปลง:
มีแถบชายแดน
เราสามารถใช้ border แอตทริบิวต์การเพิ่มหน้าแบบมีขอบ:
มุมโค้งมน
เคล็ดลับ: ในครั้งแรกและครั้งเชื่อมโยงเลขหน้าลิงก์เพิ่มเนื้อ:
ตัวอย่าง CSS
ขอบบนด้านซ้ายรัศมี: 5px;
ขอบล่างซ้ายรัศมี: 5px;
}
Li .pagination: สุดท้ายเด็ก {
ขอบด้านบนขวารัศมี: 5px;
ขอบล่างขวารัศมี: 5px;
}
ลอง»
ช่วงเพจจิ้ง
เคล็ดลับ: คุณสามารถใช้ margin คุณสมบัติเพิ่มพื้นที่โดยตรงไปยังแต่ละหน้า:
ตัวอย่าง CSS
ขอบ :. 0 4px; / * 0 สำหรับบนและด้านล่างรู้สึกอิสระที่จะเปลี่ยนมัน * /
}
ลอง»
ขนาดตัวอักษรเพจจิ้ง
เราสามารถใช้ font-size คุณสมบัติการกำหนดขนาดตัวอักษรหน้านี้:
แท็บศูนย์
หากคุณต้องการแท็บศูนย์คุณสามารถ (เช่น <div>) เพื่อเพิ่มtext-align ในองค์ประกอบภาชนะ: สไตล์ Center:
ตัวอย่างเพิ่มเติม
สวดมนต์
นำทางอีกสวดมนต์ตัวอย่างดังต่อไปนี้:
ตัวอย่าง CSS
padding: 8px 16px;
รูปแบบรายการ: none;
สีพื้นหลัง: #eee;
}
Li ul.breadcrumb {display: อินไลน์;}
ul.breadcrumb Li + Li: {ก่อน
padding: 8px;
สี: สีดำ;
เนื้อหา: "/ \ 00a0";
}
ลอง»