Maison >interface Web >tutoriel CSS >Exemple de code de classes de style CSS (barre de navigation, pagination, sélecteur hiérarchique)

Exemple de code de classes de style CSS (barre de navigation, pagination, sélecteur hiérarchique)

不言
不言avant
2018-10-13 16:25:352603parcourir

Le contenu de cet article concerne l'exemple de code des classes de style CSS (barre de navigation, pagination, sélecteur de niveau). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.

Barre de navigation

Avoir une barre de navigation facile à utiliser est important pour tout site Web.
Avec CSS, vous pouvez transformer des menus HTML ennuyeux en de superbes barres de navigation.
La barre de navigation nécessite du HTML standard comme base.
Dans notre exemple, la barre de navigation sera construite à l'aide d'une liste HTML standard.
Une barre de navigation est essentiellement une liste de liens, donc utiliser les éléments

    et
  • est très approprié

    Créer une barre de navigation horizontale

    Il existe deux manières de créer une barre de navigation horizontale. Utilisez des éléments de liste en ligne ou flottants.
    Les deux méthodes sont bonnes, mais si vous souhaitez que les liens aient la même taille, vous devez utiliser la méthode float.

    nbsp;html>
    
    
        <meta>
        <title>导航栏</title>
        <style>
            div{
                width: 80%;
                margin: 0 auto;
                padding: 0;
            }
            ul{
                list-style-type: none;
            }
            li{
                display: inline-block;
                width: 24%;
                padding-top: 10px;
                padding-bottom: 10px;
                margin: 0 auto;
                text-align: center;
                background: #c0ffff;
            }
    
        </style>
    
    
    <div>
        <ul>
            <li><a>CSS/HTML</a></li>
            <li>
    <a>JavaScript</a> </li>
            <li>
    <a> Python</a> </li>
            <li>
    <a> C#</a> </li>
    
        </ul>
    </div>
    
    

    Exemple de code de classes de style CSS (barre de navigation, pagination, sélecteur hiérarchique)

    Créer une page web pour l'afficher en pages

    Le contenu d'un web la page comporte souvent plus d'une page. Saut de page requis

    nbsp;html>
    
    
        <meta>
        <title>分页</title>
        <style>
            ul{
                list-style-type: none;
            }
            li{
                display: inline-block;
                width: 12%;
                padding-top: 10px;
                padding-bottom: 10px;
                margin: 0 auto;
                text-align: center;
                background: #c0ffff;
            }
            li:hover{
                background: salmon;
            }
    
        </style>
    
    
    <div>
        <ul>
            <li>
    <a>上一页</a> </li>
            <li>
    <a>1</a> </li>
            <li>
    <a>2</a> </li>
            <li>
    <a>...</a> </li>
            <li>
    <a>12</a> </li>
            <li>
    <a>13</a> </li>
            <li>
    <a>下一页</a> </li>
    
    
        </ul>
    
    </div>
    
    

    Exemple de code de classes de style CSS (barre de navigation, pagination, sélecteur hiérarchique)

    Sélecteur de niveau

    Le Le sélecteur est utilisé pour sélectionner des éléments avec des éléments d'attribut et de valeur spécifiés.

    [attribute=value]
    nbsp;html>
    
    
        <meta>
        <title>层级选择</title>
        <style>
            ol pre {
                background: #888888;
            }
            input[type=&#39;submit&#39;]{
                background: salmon;
            }
        </style>
    
    
    
        <pre class="brush:php;toolbar:false">
    1题,伫倚危楼风细细,望极春愁,黯黯生天际....,出自( )
        
        
              
    1. 蝶恋花
    2.         
    3. 高丽史
    4.     
        
        ‘衣带渐宽终不悔,为伊消得人憔悴’的作者是:         
        请提交你的条形码:         
             

    Exemple de code de classes de style CSS (barre de navigation, pagination, sélecteur hiérarchique)

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:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer