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