LearningjQuery.com 블로그 게시물 목록의 왼쪽에는 다음과 같은 멋진 날짜가 있습니다.
사진을 보면 "2009"가 오른쪽에 수직으로 배열되어 있는 것을 볼 수 있습니다. Firebug를 사용하여 요소를 확인하세요. 이 문서에서는 이 효과를 얻는 두 가지 방법을 소개합니다.
1. Sprite 기술을 사용하여 달성
구현 프로세스는 Chris Coyier가 " Sprites를 사용한 날짜 표시 기술 "이라는 기사에서 자세히 소개했습니다. 다음은 구현 프로세스에 대한 간략한 설명입니다. 당연히 각 날짜마다 별도의 그림을 사용하고 싶지 않으므로 이를 하나의 그림으로 통합하고 그림과 같이 그림의 여러 영역에 연도, 월, 일을 배열합니다.
1.HTML
페이지의 html 구조는 다음과 같습니다.
<div 클래스="이후 날짜">
<div class="month m-06">6월</div>
<div class="day d-30">30</div>
<div class="year y-2009">2009</div>
</div>
.postdate 컨테이너에는 의미적 무결성을 보장하는 연도, 월, 일에 해당하는 세 가지 영역이 포함되어 있습니다.
wordpress와 같은 CMS 시스템에서 백엔드 코드는 다음과 같습니다.
<div 클래스="이후 날짜">
<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
CSS는 HTML에 정의된 클래스 속성을 사용하여 해당 이미지를 표시하는 스프라이트가 실제로 작동하는 곳입니다.
먼저, .postdate 클래스 속성을 가진 컨테이너를 상대적으로 배치하여 컨테이너에 포함된 세 영역이 절대적으로 배치되고 동일한 배경 이미지를 사용하도록 합니다. 각각의 너비와 높이를 설정하고 텍스트를 바깥쪽으로 이동하여 배경 이미지를 표시합니다.
그런 다음 매월(12), 매일(31), 매년(10년 기준)에 대한 특정 배경 위치를 정의하여 해당 사진을 표시합니다.
.postdate {
위치: 상대;
너비: 50px;
높이: 50px;
플로트: 왼쪽;
}
.월, .일, .년 {
위치: 절대;
텍스트 들여쓰기: -1000em;
배경 이미지: url(/wp-content/themes/ljq/images/dates.png);
background-repeat: 반복하지 않음;
}
.month { 위쪽: 2px; 왼쪽: 0; 높이: 24px;
.day { 위쪽: 25px; 왼쪽: 0; 너비: 32px;}
.연도 { 하단: 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;}
... 더 비슷한 것 ...