지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
찾다
logo
  • 로그인
  • 가입
비밀번호 재설정 성공

당신이 관심을 갖고 있는 프로젝트를 팔로우하고 그들에 관한 최신 뉴스를 맛보세요

CSS 페이지 매김

이 섹션에서는 CSS3를 사용하여 페이징 예제를 만드는 방법을 소개합니다.

간단한 페이지 매김부터 시작해 보겠습니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
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;
}
</style>
</head>
<body>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" 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="#">»</a></li>
</ul>
</body>
</html>

마우스 오버 스타일: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
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;
}
ul.pagination li a.active {
    background-color: blue;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" 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="#">»</a></li>
</ul>
</body>
</html>

모서리가 둥근 마우스 오버 스타일: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
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;
    border-radius: 5px;
}
ul.pagination li a.active {
    background-color:red;
    color: white;
    border-radius: 25px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" 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="#">»</a></li>
</ul>
</body>
</html>

테두리가 있는 페이지 매김 스타일: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
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;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
ul.pagination li a.active {
    background-color: blue;
    color: white;
    border: 2px solid red;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" 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="#">»</a></li>
</ul>
</body>
</html>

모서리가 둥근 테두리 페이지 매김: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
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;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
.pagination li:first-child a {
    border-top-left-radius:25px;
    border-bottom-left-radius: 25px;
}
.pagination li:last-child a {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
ul.pagination li a.active {
    background-color: gray;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

공백을 사용한 페이지 매김: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
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;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 10px;
}
ul.pagination li a.active {
    background-color: blue;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" 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="#">»</a></li>
</ul>
</body>
</html>

글꼴 크기 설정: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
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;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 30px;
}
ul.pagination li a.active {
    background-color: pink;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<p>我们可以使用 font-size 属性来设置分页的字体大小:</p>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" 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="#">»</a></li>
</ul>
</body>
</html>

가운데 정렬: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
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;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
div.center {text-align: center;}
</style>
</head>
<body>
<div class="center">
  <ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" 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="#">»</a></li>
  </ul>
</div>
</body>
</html>

페이지 매김 탐색 스타일: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
         body {
        font:12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
      }
      .pager {
        list-style: none outside none;
        margin: 20px;
        padding: 0;
        text-align: center;
      }
      .pager li {
        display: inline-block;
        margin: 0;
        padding: 0;
      }
      * html .pager li   { display: inline; }  
      *+html .pager  li   { display: inline; }
      .pager li.pager-current,
      .pager li a {
      -moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
      -webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
        border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
      background: #232B30; /* old browsers */
      background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
      -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
      -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */ 
      box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
        color: #FFFFFF;
        font-size: 12px;
        margin-left: 10px;
        padding: 3px 12px;
      -webkit-transition: all 0.5s ease-in 0s;
        -moz-transition: all 0.5s ease-in 0s;
        -o-transition: all 0.5s ease-in 0s;
        transition: all 0.5s ease-in 0s;
      text-decoration: none;
      zoom:1;
      }
      .pager li.pager-current {
      -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      color: #d54e21;
      font-weight: bold;
      }
      .pager li a:hover {
      -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      background: #4C5A64; /* old browsers */
      background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
      color: #d54e21;
      }
</style>
</head>
<body>
 <ul class="pager">
        <li class="pager-first first">
          <a class="active" title="到第一页" href="/css3">« 首页</a>
        </li>
        <li class="pager-previous">
          <a class="active" title="返回上一个页面" href="/css3?page=2">‹ 上一页</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 1 页" href="/css3">1</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 2 页" href="/css3?page=1">2</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 3 页" href="/css3?page=2">3</a>
        </li>
        <li class="pager-current">4</li>
        <li class="pager-item">
          <a class="active" title="到第 5 页" href="/css3?page=4">5</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 6 页" href="/css3?page=5">6</a>
        </li>
        <li class="pager-next">
          <a class="active" title="去下一个页面" href="/css3?page=4">下一页 ›</a>
        </li>
        <li class="pager-last last">
          <a class="active" title="到最后一页" href="/css3?page=5">尾页 »</a>
        </li>
      </ul>
</body>
</html>



지속적인 학습
새로운 파일
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> #pagination-clean li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; } #pagination-clean a { border-right:solid 1px #DEDEDE; margin-right:2px; } #pagination-clean .previous-off, #pagination-clean .next-off { color:#888888; display:block; float:left; font-weight:bold; padding:3px 4px; } #pagination-clean .next a,#pagination-clean previous a { border:none; font-weight:bold; } #pagination-clean .active { color:#000000; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ border-right:solid 1px #DEDEDE; } #pagination-clean a:link,#pagination-clean a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:underline; } #pagination-clean a:hover { text-decoration:none; } #pagination-digg li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; } #pagination-digg a { border:solid 1px #9aafe5; margin-right:2px; } #pagination-digg .previous-off,#pagination-digg .next-off { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; } #pagination-digg .next a,#pagination-digg .previous a { font-weight:bold; } #pagination-digg .active { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; } #pagination-digg a:link,#pagination-digg a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; } #pagination-digg a:hover { border:solid 1px #0e509e; } #pagination-flickr li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; } #pagination-flickr a { border:solid 1px #DDDDDD; margin-right:2px; } #pagination-flickr .previous-off,#pagination-flickr .next-off { color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; } #pagination-flickr .next a,#pagination-flickr .previous a { font-weight:bold; border:solid 1px #FFFFFF; } #pagination-flickr .active { color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; } #pagination-flickr a:link, #pagination-flickr a:visited { color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; } #pagination-flickr a:hover { border:solid 1px #000; background:#0063DC; color:#FFF; } body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } h2{ clear:both; border:0; margin:0; padding-top:30px; font-size:13px; } p{ border:0; margin:0; padding:0; padding-bottom:20px; } ul{ border:0; margin:0; padding:0; } </style> </head> <body> <h2>清新极简风格</h2> <p>A simple and clean pagination style</p> <ul id="pagination-clean"> <li class="previous-off">« Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul> <h2>高亮按钮风格</h2> <p>A simple pagination style Digg-like</p> <ul id="pagination-digg"> <li class="previous-off">«Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul> <h2>Flickr网站风格</h2> <p>A simple pagination style Flickr-like</p> <ul id="pagination-flickr"> <li class="previous-off">«Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul> </body> </html>
코드 재설정
자동운전
제출하다
logo
시사 Clear
이전 섹션
다음 섹션
튜토리얼 목록
도움을 받다
  • 코스 추천
  • 코스웨어 다운로드
무료 CSS3 튜토리얼로 빠르게 플레이
무료 HTML5 튜토리얼로 빠르게 플레이
무료 SVG 튜토리얼
무료 AngularJS 중국어 참조 매뉴얼
무료 Go 언어 튜토리얼 매뉴얼
무료 Redis 명령 조작 중국어 매뉴얼
무료 파이썬 3 튜토리얼
무료 XML DOM 튜토리얼
무료 Memcached 명령 운영 매뉴얼
무료 XSLT 튜토리얼
무료 XQuery 튜토리얼
무료 XLink 튜토리얼
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
이 강좌를 시청한 학생들도 학습하고 있습니다.
496452
PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다. 웹 프론트 엔드 개발에 대한 빠른 소개 민망한 물건 백과사전 사이트를 모방한 Mini 버전 MVC 프레임워크의 대규모 실용 Tianlongbabu 개발 PHP 실용 개발 시작하기: 빠른 PHP 생성 [중소기업 포럼] 로그인 인증 및 클래식 게시판 컴퓨터 네트워크 지식 수집 빠른 시작 Node.JS 정식 버전 당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본] 자신만의 PHP MVC 프레임워크 작성(깊이 있는 40개 장/자세한 내용/초보자가 발전하려면 읽어야 함)