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

웹사이트를 탐색할 때 웹페이지에 페이징 효과가 나타나는 것을 보셨나요? 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>

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

# 🎜🎜#

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 페이징 효과가 달성되었습니다. 마우스로 페이징 내용을 클릭하면 활성화된 부분이 녹색으로 나타나고 마우스를 페이징 내용 위에 올리면 회색으로 나타나고 전체 페이지 중앙에 페이징 효과가 나타납니다.

위 내용은 HTML과 CSS를 사용하여 페이징 효과를 얻는 방법에 대해 더 자세히 설명하고 있습니다. 초보자도 직접 시도해 보면 더 멋진 페이징 효과를 만들 수 있는지 확인하실 수 있습니다. !

【관련 튜토리얼 추천】

1.

Html 비디오 튜토리얼2
CSS3 최신 버전 참조 매뉴얼# 🎜🎜#3. 부트스트랩 튜토리얼

위 내용은 정적 페이징 효과를 달성하기 위한 html+css의 자세한 예(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!