CSS樣式類別的實例程式碼（導覽列、分頁、層級選擇器）

本篇文章帶給大家的內容是關於CSS樣式類別的實例程式碼（導覽列、分頁、層級選擇器），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

導覽列

擁有易用的導覽列對於任何網站都很重要。
透過 CSS，您能夠把乏味的 HTML 選單轉換為漂亮的導覽列。
導覽列需要標準的 HTML 作為基礎。
在我們的例子中，將使用標準的 HTML 清單來建立導覽列。
導覽列基本上是一個連結列表，因此使用

和
• 元素是非常合適的

  製作水平導覽列

  有兩種建立水平導覽列的方法。使用行內或浮動清單項目。
  兩種方法都不錯，但是如果您希望連結擁有相同的尺寸，就必須使用浮動方法。

  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>
  
  

  

  製作網頁分頁顯示

  網頁內容往往不只一頁，這時就需要頁面跳轉

  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>
  
  

  

  層級選擇器

  選擇器用於選取具有指定屬性和值的元素。

  [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. 高丽史
      
      
      ‘衣带渐宽终不悔，为伊消得人憔悴’的作者是：         
      请提交你的条形码：         
           

  

  #

以上是CSS樣式類別的實例程式碼（導覽列、分頁、層級選擇器）的詳細內容。更多資訊請關注PHP中文網其他相關文章！