웹사이트 페이징 아이디어-JS 튜토리얼-php.cn

웹사이트 페이징 아이디어

php中世界最好的语言

풀어 주다： 2018-03-12 16:41:10

원래의

1158명이 탐색했습니다.

이번에는 웹사이트 페이징 아이디어와 웹사이트 제작시 페이징 효과는 무엇인지Notes를 살펴보겠습니다.

웹사이트를 만들 때 많은 페이지네이션이 li와 함께 인라인으로 표시되는데 이는 배경 정의에 도움이 되지 않기 때문에 가장 좋은 방법은 li를 블록 및 플로팅으로 표시하여 해결하는 방법이지만 여기서 문제가 발생합니다. , 페이징은 고정되어 있지 않으며 항상 중앙에 오도록 하려면 ul의 너비를 고정할 수 없으므로 일반적으로 사용되는 여백 또는 text-align은 작동하지 않습니다. 가운데로 정의하려면 다음 방법을 눌러야 합니다.
1. 텍스트 센터링 정의
텍스트 센터링은 항상 필요하므로 먼저 ul 외부 div에 텍스트 정렬(텍스트 정렬: 가운데 정렬)을 지정하고 "오버플로: 숨김;"을 지정할 수도 있습니다. 높이와 너비를 정의합니다.
2.ul 정의
ul은 너비를 정의할 수 없습니다. 위치 지정만 제공할 수 있으며 유형은 상대적(position: 상대)이고 왼쪽 위치는 50%(왼쪽: 50%)입니다. 물론 부동 소수점은 가능합니다. 주어지기도 합니다. ul은overflow:hidden;으로 숨겨서는 안되므로 li의 일부가 표시될 수 없습니다.
3.li 정의
li의 정의는 ul의 정의와 유사합니다. 너비는 고정되어 있지 않으며, 유형은 상대적(위치: 상대)이고 배치 오른쪽은 50%(오른쪽: 50%) ul과 정반대이므로 li를 정의한 후에는 몇 페이지가 나뉘어져도 항상 중앙에 배치될 수 있습니다.

<!doctype html><html><head><meta charset="utf-8"><title>by eric zheng</title><style type="text/css">
    *{margin:0; padding: 0;}    ol{list-style: none;}    ol{        height: 32px;        border: solid 1px red;        position: absolute;        left: 50%;
    }    li{        position: relative;        left: -50%;        width: 30px;        height: 30px;        border: solid 1px #ccc;        text-align: center;        line-height: 30px;        font-size: 14px;        margin: 0 5px;        float: left;
    }</style></head><body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ol></body></html>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! Related Reading : Bayesian Classifier를 구현하기 위해 Python

js로 작성된 Notification Bar 스크립트 시작 도구 H5의 캔버스를 사용하여 음악 반지 스펙트로 그램 셀 스타일을 구현하는 방법 js-xlsx

위 내용은 웹사이트 페이징 아이디어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!