รายการโพสต์ในบล็อกของ LearningjQuery.com มีวันที่ดีๆ ทางด้านซ้าย เช่นนี้
จากภาพจะเห็นได้ว่า "2009" ถูกจัดเรียงในแนวตั้งทางด้านขวา ใช้ Firebug เพื่อดูองค์ประกอบ ข้อความ "2009" ปรากฏในโครงสร้าง html บทความนี้จะแนะนำสองวิธีเพื่อให้บรรลุผลนี้
1. ใช้เทคโนโลยีสไปรท์เพื่อให้บรรลุเป้าหมาย
กระบวนการนำไปใช้ได้รับการแนะนำอย่างละเอียดโดย Chris Coyier ในบทความ " เทคนิคการแสดงวันที่ด้วยสไปรท์ " ต่อไปนี้เป็นคำอธิบายโดยย่อของกระบวนการนำไปใช้ แน่นอนว่าเราไม่ต้องการใช้รูปภาพแยกกันสำหรับแต่ละวัน เราจึงรวมเป็นรูปภาพเดียวและจัดเรียงปี เดือน และวันไว้ในพื้นที่ต่างๆ ของรูปภาพ ดังแสดงในรูป:
1.Html
โครงสร้าง html ในหน้าเป็นดังนี้:
มิ.ย.
30
2009
คอนเทนเนอร์ .postdate ประกอบด้วยสามส่วน ซึ่งสอดคล้องกับปี เดือน และวัน ซึ่งช่วยให้มั่นใจถึงความสมบูรณ์ของความหมาย
ในระบบ CMS เช่น WordPress โค้ดแบ็กเอนด์จะเป็นดังนี้:
2. ซีเอสเอส
CSS คือจุดที่สไปรท์เข้ามามีบทบาทจริงๆ โดยใช้แอตทริบิวต์คลาสที่กำหนดใน HTML เพื่อให้สามารถแสดงรูปภาพที่เกี่ยวข้องได้
ขั้นแรก ให้วางตำแหน่งคอนเทนเนอร์ที่มีแอตทริบิวต์ class .postdate ให้สัมพันธ์กัน เพื่อที่ทั้งสามพื้นที่ที่อยู่ในนั้นจะถูกวางตำแหน่งอย่างสมบูรณ์และใช้ภาพพื้นหลังเดียวกัน ตั้งค่าความกว้างและความสูงตามลำดับ แล้วย้ายข้อความไปด้านนอกเพื่อแสดงภาพพื้นหลัง
จากนั้น กำหนดตำแหน่งพื้นหลังเฉพาะสำหรับแต่ละเดือน (12) ทุกวัน (31) และทุกปี (ตาม 10 ปี) เพื่อแสดงรูปภาพที่เกี่ยวข้อง
.postdate {
ตำแหน่ง: ญาติ;
ความกว้าง: 50px;
ความสูง: 50px;
ลอย: ซ้าย;
-
.เดือน, .วัน, .ปี {
ตำแหน่ง: แน่นอน;
เยื้องข้อความ: -1000em;
ภาพพื้นหลัง: url(/wp-content/themes/ljq/images/dates.png);
พื้นหลังซ้ำ: ไม่ซ้ำ;
-
.เดือน { บน: 2px; ซ้าย: 0; ความกว้าง: 32px;
.day { ด้านบน: 25px; ซ้าย: 0; ความกว้าง: 32px;
.year { ด้านล่าง: 0; ขวา: 0; ความกว้าง: 17px;
.m-01 { ตำแหน่งพื้นหลัง: 0 4px;}
.m-02 { ตำแหน่งพื้นหลัง: 0 -28px;}
.m-03 { ตำแหน่งพื้นหลัง: 0 -57px;}
... แบบนี้อีก ...
.d-01 { ตำแหน่งพื้นหลัง: -50px 0;}
.d-02 { ตำแหน่งพื้นหลัง: -50px -31px;}
.d-03 { ตำแหน่งพื้นหลัง: -50px -62px;}
... แบบนี้อีก ...
.y-2006 { ตำแหน่งพื้นหลัง: -150px 0;}
.y-2007 { ตำแหน่งพื้นหลัง: -150px -50px;}
.y-2008 { ตำแหน่งพื้นหลัง: -150px -100px;}
... แบบนี้อีก ...