Maison > Article > interface Web > Exemple de code de classes de style CSS (barre de navigation, pagination, sélecteur hiérarchique)
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
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>
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>
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='submit']{ background: salmon; } </style> <pre class="brush:php;toolbar:false"> 1题,伫倚危楼风细细,望极春愁,黯黯生天际....,出自( )
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!