<!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;
}
网友评论