เรียนรู้วิธีการสร้างเลขที่ตอบสนองต่อการใช้ CSS
เลขที่เรียบง่าย
หากคุณมีเว็บไซต์ที่มีจำนวนมากของหน้าเว็บที่คุณอาจต้องการที่จะเพิ่มการจัดเรียงของบางอย่างที่จะแบ่งหน้าแต่ละหน้า:
เพื่อสร้างเลข, รูปแบบรายการแบบ HTML:
ตัวอย่าง
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{display: inline;}
ul.pagination li a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
} ลองตัวเอง» การใช้งานและ Hoverable เลข
ไฮไลท์หน้าปัจจุบันกับ .active ชั้นเรียนและใช้ :hover เลือกการเปลี่ยนสีของการเชื่อมโยงแต่ละหน้าเมื่อมีการย้ายเมาส์เหนือพวกเขา:
ตัวอย่าง
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} ลองตัวเอง» ปุ่มใช้งานอยู่และ Hoverable โค้งมน
เพิ่ม border-radius คุณสมบัติถ้าคุณต้องการที่โค้งมน "งาน" และปุ่ม "โฉบ":
ตัวอย่าง
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} ลองตัวเอง» Hoverable การเปลี่ยนผล
เพิ่ม transition คุณสมบัติการเชื่อมโยงหน้าเพื่อสร้างผลการเปลี่ยนแปลงในโฉบ:
ขอบเลข
ใช้ border คุณสมบัติการเพิ่มเส้นขอบให้เลขหน้านี้:
โค้งมนพรมแดน
เคล็ดลับ: เพิ่มเส้นขอบโค้งมนเพื่อการเชื่อมโยงและนามสกุลของคุณในการแบ่งหน้านี้:
ตัวอย่าง
.pagination li:first-child a {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ลองตัวเอง» ช่องว่างระหว่างลิงก์
เคล็ดลับ: การเพิ่ม margin ของสถานที่ถ้าคุณไม่ต้องการที่จะเชื่อมโยงกลุ่มหน้า:
ตัวอย่าง
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
ลองตัวเอง» ขนาดเลขหน้า
เปลี่ยนขนาดของเลขหน้าด้วยที่ font-size ทรัพย์สิน:
เลขศูนย์กลาง
ไปยังศูนย์เลขห่อองค์ประกอบภาชนะรอบ ๆ มัน (เช่น <div> ) และเพิ่ม text-align:center
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ลองตัวเอง»สวดมนต์
รูปแบบของการแบ่งหน้าก็คือสิ่งที่เรียกว่า "สวดมนต์"
ตัวอย่าง
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ลองตัวเอง»