태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

CSS Hover 를 이용한 깔끔한 페이징

8년 전

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>뮤직트로트</title>
<style type="text/css">
/* base */
#wrap {
        width:23em;
        border:6px solid #eee;
        margin:6em auto;
        padding:1.5em 0;
        text-align:left;
        overflow:hidden;
}

/* css */
ul {
        list-style:none;
        float:left;
        display:inline;
}
ul li {
        float:left;
}
ul li a {
        float:left;
        padding:4px;
        margin-right:3px;
        width:15px !important;
        color:#000;
        font:bold 12px tahoma;
        border:1px solid #eee;
        text-align:center;
        text-decoration:none;
        width /**/:26px;        /*IE 5.5*/

}
ul li a:hover, ul li a:focus {
        color:#fff;
        border:1px solid #f40;
        background-color:#f40;
}

</style>
</head>

<body>

<div id="wrap">
        <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
                <li><a href="#">10</a></li>
        </ul>
</div>

</body>
</html>

추천 목록

번호	제목
2,615	클릭시 url 복사하기
	CSS Hover 를 이용한 깔끔한 페이징
2,613	스크롤해도 상단에 고정되는 메뉴 만들기
2,612	[정규표현식] php 문자열에서 숫자만 추출
2,611	HTML5 Video/Audio CurrentTime/Ended 문제점
2,610	audio 엘리먼트의 onplay 이벤트 처리 시 주의사항
2,609	PHP - $ SERVER 환경변수
2,608	Example #1 print 예제
2,607	php `/`기준으로 자르기
2,606	php 문자열 함수
2,605	주소등 인코딩해서 보내기
2,604	jquery load() 메소드 (비동기 웹페이지 로드)
2,603	[Ajax] ajax 예제2
2,602	[Ajax] ajax 예제1
2,601	[Ajax] JSON (Javascript Object Notation) 사용하기
2,600	[jQuery] jQuery.ajax() HTTP 비동기 데이터 교환
2,599	[jQuery] jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo() 이해하기
2,598	IE6~7 문제해결
2,597	Windows Media Player 제어
2,596	나눔고딕 구글 웹폰트(Webfont) 사용하기
2,595	PHP 문자열 나누기 - explode()
2,594	[PHP] ceil() , floor(), round() 함수
2,593	PHP split 함수를 이용한 문자열 분리
2,592	[CSS] :before,:after 활용하기 - 구분선
2,591	CSS border-image 속성
2,590	jquery 기본문법
2,589	[자바스크립트] 서서히 나타나고 사라지는 창
2,588	php에서 이미지 파일을 랜덤하게 불러오기
2,587	php에서 sendmail 테스트 하기
2,586	php의 number format 함수 - 숫자를 천단위로 구분