作業(yè)

<!DOCTYPE html> 
<html lang="en"> 
<head> <meta charset="UTF-8">
<title></title> 
      <style type="text/css">
         *{margin:0;
           padding: 0;
             }
        .box{
            width: 500px;
            height: 42px;
            border:1px #818181 solid ;
            background-color: white;
            margin: 0 auto;
            margin-top: 50px;
           }
        .box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10{
             float:left;
            margin-left: 4px;
           }
       .box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10 box{
            text-decoration: none;
            color:black;
            font-size: 12px;
          }
       .box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10{
             width: 25px;
             background-color: gold;
             padding:5px 10px;
             margin-top: 7px;
            text-align: center;
          }
     .box1:hover{
         background-color:red;
        }
     .box2:hover{
         background-color:red;
         }
     .box3:hover{
         background-color:red;
         }
     .box4:hover{
         background-color:red;
       }
     .box5:hover{
         background-color:red;
        }
    .box6:hover{
        background-color:red;
      }
    .box7:hover{
         background-color:red;
       }
    .box8:hover{
        background-color:red;
      }
    .box9:hover{
        background-color:red;
      }
    .box10:hover{
       background-color:red;
    }
    .box1 a:hover{
       color:white;
       }
    .box2 a:hover{
       color:white;
    }
    .box3 a:hover{
       color:white;
     }
     .box4 a:hover{
         color:white;
      }
   .box5 a:hover{
      color:white;
     }
   .box6 a:hover{
      color:white;
      }
   .box7 a:hover{
       color:white;
     }
   .box8 a:hover{
      color:white;
     }
   .box9 a:hover{
      color:white;
     }
   .box10 a:hover{
      color:white;
  }
      </style>
</head>
<body> 
     <div class="box">
         <div class="box1"><a href="#">1</a></div> 
         <div class="box2"><a href="#">2</a></div> 
         <div class="box3"><a href="#">3</a></div>
         <div class="box4"><a href="#">4</a></div>
         <div class="box5"><a href="#">5</a></div> 
         <div class="box6"><a href="#">...</a></div>
         <div class="box7"><a href="#">9</a></div> 
         <div class="box8"><a href="#">10</a></div>
         <div class="box9"><a href="#">11</a></div>
         <div class="box10"><a href="#">12</a></div>
     </div> 
</body>
</html>
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容