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

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>
  
  

  Copier après la connexion

  

  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>
  
  

  Copier après la connexion

  

  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]

  Copier après la connexion

  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题，伫倚危楼风细细，望极春愁，黯黯生天际....，出自（ ）
      

  Copier après la connexion
      
          
  1. 蝶恋花
          
  2. 高丽史
      
      
      ‘衣带渐宽终不悔，为伊消得人憔悴’的作者是：         
      请提交你的条形码：         
           

  

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!