CSS 탭의 예
이 장에서 우리는 CSS를 사용하여 페이징의 인스턴스를 만드는 방법을 소개합니다.
간단한 탭
사이트의 페이지 수가 많은 경우, 각 페이지에 대한 탐색을 위해 탭을 사용해야합니다.
다음의 예는 페이지를 생성하는 HTML과 CSS를 사용하는 방법을 보여줍니다 :
CSS 예
ul.pagination {
디스플레이 : 인라인 블록;
패딩 : 0;
여백 : 0;
}
ul.pagination 리 {디스플레이 : 인라인;}
ul.pagination 리 a를 {
색상 : 검정;
플로트 : 왼쪽;
패딩 : 8px 16px;
텍스트 장식 : 없음;
}
디스플레이 : 인라인 블록;
패딩 : 0;
여백 : 0;
}
ul.pagination 리 {디스플레이 : 인라인;}
ul.pagination 리 a를 {
색상 : 검정;
플로트 : 왼쪽;
패딩 : 8px 16px;
텍스트 장식 : 없음;
}
»시도
탭 및 호버 스타일을 클릭합니다
이 페이지에서 클릭하면 사용할 수 있습니다 .active 마우스 오버 사용할 수 있습니다, 현재 페이지 스타일을 설정 :hover 스타일을 수정하는 선택기 :
CSS 예
ul.pagination의 리 a.active {
배경 색상 : # 4CAF50;
색상 : 흰색;
}
ul.pagination 리 A : 호버 :하지 ( .active는) {배경 색 : #ddd;}
배경 색상 : # 4CAF50;
색상 : 흰색;
}
ul.pagination 리 A : 호버 :하지 ( .active는) {배경 색 : #ddd;}
»시도
CSS 예
ul.pagination의 리 a.active {
배경 색상 : # 4CAF50;
색상 : 흰색;
}
ul.pagination 리 A : 호버 :하지 (.active는) {배경 색 : #ddd;}
배경 색상 : # 4CAF50;
색상 : 흰색;
}
ul.pagination 리 A : 호버 :하지 (.active는) {배경 색 : #ddd;}
»시도
둥근 스타일
당신은 사용할 수 있습니다 border-radius 모서리가 둥근 스타일을 추가하기 위해 선택한 페이지의 속성을 :
호버 전환 효과
우리는 추가 할 수 있습니다 transition 하면 전환 효과를 추가 할 때 페이지에서 마우스를 이동하는 속성을 :
테두리 탭
우리는 사용할 수 border 테두리가있는 페이지를 추가하는 속성 :
둥근 모서리
팁 : 첫 번째와 마지막 페이지 매김 링크에서는 필렛을 추가 링크 :
CSS 예
.pagination 리 제 1 아이 {
국경 왼쪽 상단 반경 : 5px;
국경 - 하단 왼쪽 반경 : 5px;
}
.pagination 리 : 마지막 아이 a를 {
국경 - 오른쪽 상단 반경 : 5px;
국경 오른쪽 하단 반경 : 5px;
}
국경 왼쪽 상단 반경 : 5px;
국경 - 하단 왼쪽 반경 : 5px;
}
.pagination 리 : 마지막 아이 a를 {
국경 - 오른쪽 상단 반경 : 5px;
국경 오른쪽 하단 반경 : 5px;
}
»시도
페이징 간격
팁 : 당신은 사용할 수 있습니다 margin 각 페이지에 직접 공간을 추가 속성을 :
페이징 글꼴 크기
우리는 사용할 수있는 font-size 페이지의 글꼴 크기를 설정하는 속성을 :
센터 탭
이 탭을 중심하려는 경우 (예 : <div>로) 컨테이너요소에 텍스트를 맞 춥니 추가 할 수 있습니다 : 중앙스타일 :
더 많은 예제
빵 부스러기
다음과 빵 부스러기와 같은 또 다른 탐색, 예는 다음과 같습니다
CSS 예
ul.breadcrumb {
패딩 : 8px 16px;
목록 스타일 : 없음;
배경 색상 : #eee;
}
ul.breadcrumb 리 {디스플레이 : 인라인;}
ul.breadcrumb의 리 + 리 : 전에 {
패딩 : 8px;
색상 : 검정;
내용 : "/ \ 00A0";
}
패딩 : 8px 16px;
목록 스타일 : 없음;
배경 색상 : #eee;
}
ul.breadcrumb 리 {디스플레이 : 인라인;}
ul.breadcrumb의 리 + 리 : 전에 {
패딩 : 8px;
색상 : 검정;
내용 : "/ \ 00A0";
}
»시도