翻页

2018-11-29  本文已影响0人  骚X
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>滚动条</title>
  <link rel="stylesheet" type="text/css" href="../02day/html.css">
</head>
<body>
<div class="c">
    <div class="c1"><a href="#">1</a></div>
    <div class="c2"><a href="#">2</a></div>
    <div class="c3"><a href="#">3</a></div>
    <div class="c4"><a href="#">4</a></div>
    <div class="c5"><a href="#">5</a></div>
    <div class="c6"><a href="#">...</a></div>
    <div class="c7"><a href="#">9</a></div>
    <div class="c8"><a href="#">10</a></div>
    <div class="c9"><a href="#">11</a></div>
    <div class="c10"><a href="#">12</a></div>
</div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
.c{
    width: 500px;
    height: 42px;
    border:1px solid #818181;
    background-color: white;
    margin: 0 auto;
    margin-top: 50px;
}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10{
float:left;
margin-left: 4px;
}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10{
width: 25px;
background-color: gold;
padding:5px 10px;
margin-top: 7px;
text-align: center;
}
.c1:hover{
background-color:red;
}
.c2:hover{
background-color:red;
}
.c3:hover{
background-color:red;
}
.c4:hover{
background-color:red;
}
.c5:hover{
background-color:red;
}
.c6:hover{
background-color:red;
}
.c7:hover{
background-color:red;
}
.c8:hover{
background-color:red;
}
.a9:hover{
background-color:red;
}
.c10:hover{
background-color:red;
}
.c1 a:hover{
color:white;
}
.c2 a:hover{
color:white;
}
.c3 a:hover{
color:white;
}
.c4 a:hover{
color:white;
}
.c5 a:hover{
color:white;
}
.c6 a:hover{
color:white;
}
.c7 a:hover{
color:white;
}
.c8 a:hover{
color:white;
}
.c9 a:hover{
color:white;
}
.c10 a:hover{
color:white;
}
上一篇下一篇

猜你喜欢

热点阅读