สองเทคนิคในการจัดวันที่ในแนวตั้ง

รายการโพสต์ในบล็อกของ LearningjQuery.com มีวันที่ดีๆ ทางด้านซ้าย เช่นนี้

จากภาพจะเห็นได้ว่า "2009" ถูกจัดเรียงในแนวตั้งทางด้านขวา ใช้ Firebug เพื่อดูองค์ประกอบ ข้อความ "2009" ปรากฏในโครงสร้าง html บทความนี้จะแนะนำสองวิธีเพื่อให้บรรลุผลนี้

1. ใช้เทคโนโลยีสไปรท์เพื่อให้บรรลุเป้าหมาย

กระบวนการนำไปใช้ได้รับการแนะนำอย่างละเอียดโดย Chris Coyier ในบทความ " เทคนิคการแสดงวันที่ด้วยสไปรท์ " ต่อไปนี้เป็นคำอธิบายโดยย่อของกระบวนการนำไปใช้ แน่นอนว่าเราไม่ต้องการใช้รูปภาพแยกกันสำหรับแต่ละวัน เราจึงรวมเป็นรูปภาพเดียวและจัดเรียงปี เดือน และวันไว้ในพื้นที่ต่างๆ ของรูปภาพ ดังแสดงในรูป:

1.Html

โครงสร้าง html ในหน้าเป็นดังนี้:

<div class="postdate">
<div class="เดือน m-06">มิ.ย.</div>
<div class="วัน ง-30">30</div>
<div class="ปี y-2009">2009</div>
</div>

คอนเทนเนอร์ .postdate ประกอบด้วยสามส่วน ซึ่งสอดคล้องกับปี เดือน และวัน ซึ่งช่วยให้มั่นใจถึงความสมบูรณ์ของความหมาย

ในระบบ CMS เช่น WordPress โค้ดแบ็กเอนด์จะเป็นดังนี้:

<div class="postdate">
<div class="เดือน m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="วัน d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
<div class="ปี y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>

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;}
... แบบนี้อีก ...