CSS를 사용하여 응답 매김을 작성하는 방법에 대해 알아 봅니다.
간단한 매김
이 페이지의 많은 웹 사이트가있는 경우, 당신은 각 페이지에 페이지 매김 어떤 종류를 추가 할 수 있습니다 :
페이지 매김 스타일에게 HTML 목록을 만들려면 :
예
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{display: inline;}
ul.pagination li a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
} »그것을 자신을 시도 활성 및 Hoverable 매김
으로 현재 페이지를 강조 .active 클래스 및 사용 :hover 그들 위에 마우스를 이동 각 페이지 링크의 색상을 변경하려면 선택기를 :
예
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} »그것을 자신을 시도 둥근 활성 및 Hoverable 버튼
추가 border-radius 이 둥근 "활성화"와 "호버"버튼을하려면 속성을 :
예
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} »그것을 자신을 시도 Hoverable 전환 효과
추가 transition 마우스 오버에 전환 효과를 만들 페이지 링크 속성을 :
경계가 매김
사용 border 매김에 테두리를 추가하는 속성을 :
둥근 테두리
팁 : 매김에 첫 번째와 마지막 링크에 둥근 테두리를 추가 :
예
.pagination li:first-child a {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
»그것을 자신을 시도 링크 사이의 공간
팁 : 추가 margin 당신은 페이지의 링크 그룹에하지 않으려면 속성을 :
예
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
»그것을 자신을 시도 페이지 매김 크기
과 매김의 크기 변경 font-size 속성을 :
중심 매김
, 페이지 매김을 중심으로 (같은 주위 컨테이너 요소를 포장하려면 <div> ), 및 추가 text-align:center
더 예
빵 부스러기
페이지 매김의 또 다른 변화는 "이동 경로"소위입니다 :
예
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
»그것을 자신을 시도