이미지 스프라이트 예시
페이지 정보
작성자
운영자쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 1,397회
작성일 22-03-18 17:11
본문
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative; /* 위치:상대값 */
}
#navlist li {
margin: 0; /* 외부여백:0 */
padding: 0; /* 내부여백:0 */
list-style: none; /* 목록유형:사용안함 */
position: absolute; /* 위치:절대값 */
top: 0; /* 상단위치:0 (y좌표:0) */
}
#navlist li, #navlist a {
height: 44px; /* 높이:44px */
display: block; /* 표시방법:블록화(넓이,높이 설정가능) */
}
#home {
left: 0px; /* 좌측여백:0 (x좌표:0) */
width: 46px; /* 넓이(폭) 46픽셀 */
background: url('img_navsprites.gif') 0 0; /* 좌측 0, 상단0 저점에서 배경이미지 표시 */
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0; /* 왼쪽방향으로 47픽셀 더 들어 가서, 윗쪽은 0지점부터 배경 이미지 표시*/
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.