Maison >interface Web >js tutoriel >Idées de mise en page de sites Web

Idées de mise en page de sites Web

php中世界最好的语言original: 2018-03-12 16:41:101175parcourir

Cette fois, je vais vous apporter les idées de pagination du site Web et l'effet de pagination lors de la création du site Web Quelles sont les choses à noter Voici un cas pratique, jetons un coup d'oeil.

Lors de la création d'un site Web, de nombreuses paginations utilisent li pour s'afficher en ligne, mais cela n'est pas propice à la définition de l'arrière-plan, donc le meilleur moyen est de laisser li s'afficher sous forme de bloc et de flotter pour résoudre le problème, mais ici est un Le problème est que, parce que la pagination n'est pas corrigée et qu'elle doit toujours être centrée, la largeur de ul ne peut pas être corrigée, donc la marge couramment utilisée ou text-align ne fonctionnera pas. La pagination est toujours centrée et doit être définie comme suit.
1. Définition du centrage du texte
Le centrage du texte est toujours nécessaire, alors donnez d'abord au div externe ul un alignement du texte (alignement du texte : centré), et vous pouvez également donner un "débordement : caché ; )", de Bien entendu, vous pouvez également définir la hauteur et la largeur.
Définition 2.ul
ul ne peut pas définir la largeur. Nous ne pouvons donner qu'un seul positionnement. Le type est relatif (position : relatif), et la position de gauche est de 50 % (gauche : 50). %). Bien entendu, un flottant peut également être donné. Veuillez noter que ul ne doit pas être masqué avec overflow: Hidden;, afin qu'une partie du li ne puisse pas être affichée.
Définition du 3.li
La définition de li est similaire à celle de ul La largeur n'est pas fixe Elle donne également un positionnement Le type est relatif (position : relatif). à droite : 50%), ce qui est exactement la même chose que ul. Au contraire, ul est défini de cette façon pour que li puisse toujours être centré quel que soit le nombre de pages.

<!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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Outil de démarrage de script de barre de notification écrit en Python

JS implémente le classificateur bayésien

Comment dessiner un spectrogramme d'anneau musical à l'aide de H5 Canvas

Comment utiliser le style de cellule js-xlsx

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Conteneur de centrage vertical de html+cssArticle suivant：Conteneur de centrage vertical de html+css

Articles Liés

Voir plus