정적 페이징 효과를 달성하기 위한 html+css의 자세한 예(코드 포함)-CSS 튜토리얼-php.cn

정적 페이징 효과를 달성하기 위한 html+css의 자세한 예(코드 포함)

yulia

풀어 주다： 2018-10-26 11:52:30

원래의

7963명이 탐색했습니다.

웹사이트를 탐색할 때 웹페이지에 페이징 효과가 나타나는 것을 보셨나요? HTML과 CSS를 배우고 있는 친구들, 정적 HTML 페이징 코드를 작성할 수 있나요? 이 기사에서는 예제를 기반으로 HTML 페이징 효과를 만드는 단계를 소개합니다. 마지막으로 관심 있는 친구들이 참고할 수 있도록 HTML 페이징 코드를 공유하겠습니다.

페이징 효과를 얻으려면 float, hover 의사 클래스 선택기, 텍스트 정렬 센터링 등과 같은 CSS의 많은 속성을 사용해야 합니다. 확실하지 않은 경우 다음을 참조하세요. PHP 중국어 웹사이트에서 관련 기사를 보거나 CSS 비디오 튜토리얼을 방문하세요. 도움이 되길 바랍니다.

Example에서는 정적 페이징 효과를 얻기 위한 html+CSS 단계를 자세히 설명합니다.

html part

만들기 , 클래스 이름 중 하나는 센터링에 편리합니다.

태그에

태그를 만들면 순서가 지정되지 않습니다. 점프 효과를 클릭하면 li 태그에 태그를 삽입해야 합니다. 구체적인 코드는 다음과 같습니다.

<div class="center">
   <ul class="page">
       <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="#">8</a></li>
       <li><a href="#">下一页</a></li>
   </ul>
  </div>

로그인 후 복사

현재 효과는 다음과 같습니다.

# 🎜🎜# 정적 페이징 효과를 달성하기 위한 html+css의 자세한 예(코드 포함)

CSS

의 일부 위 그림에서 볼 수 있듯이 현재 페이지는 다소 보기 흉하므로 이제 CSS를 사용하여 아름답게 만들어야 합니다. 먼저, 정렬되지 않은 목록을 왼쪽으로 띄우고 한 줄로 정렬하려면 float: left를 사용하고, a 태그의 기본 밑줄을 제거하려면 패딩을 사용하여 간격을 조정하세요. 페이징 효과에 대한 효과는 다음과 같습니다:

.page {
       display: inline-block;
       padding: 0;
       margin: 0;
   }   
   .page li {display: inline;}  
   .page li a {
       color: black;
       float: left;
       padding: 8px 16px;
       text-decoration: none;
       transition: background-color .3s;
       border: 1px solid #ddd;
   }   
   .page .active {
       background-color: #4CAF50;
       color: white;
       border: 1px solid #4CAF50;
   }  
   .page a:hover:not(.active) {background-color: #ddd;}   
   .center {text-align: center;}

로그인 후 복사

효과는 그림과 같습니다:

정적 페이징 효과를 달성하기 위한 html+css의 자세한 예(코드 포함)