导航页面

    <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>滚动条</title>
<link rel="stylesheet" type="text/css" href="新建文件夹/c.css">
</head>
<body>
<div class="a">
    <div class="a1"><a href="#">1</a></div>
    <div class="a2"><a href="#">2</a></div>
    <div class="a3"><a href="#">3</a></div>
    <div class="a4"><a href="#">4</a></div>
    <div class="a5"><a href="#">5</a></div>
    <div class="a6"><a href="#">...</a></div>
    <div class="a7"><a href="#">9</a></div>
    <div class="a8"><a href="#">10</a></div>
    <div class="a9"><a href="#">11</a></div>
    <div class="a10"><a href="#">12</a></div>
</div>
</body>
</html>

样式表

*{
margin:0;
padding: 0;
}
.a{
width: 500px;
height: 42px;
border:1px solid #818181;
background-color: white;
margin: 0 auto;
margin-top: 50px;
}

.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a10{
float:left;
margin-left: 4px;
}
.a1 a,.a2 a,.a3 a,.a4 a,.a5 a,.a6 a,.a7 a,.a8 a,.a9 a,.a10 a{
text-decoration: none;
color:black;
font-size: 12px;
}
.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a10{
width: 25px;
background-color: gold;
padding:5px 10px;
margin-top: 7px;
text-align: center;
}
.a1:hover{
background-color:red;
}
.a2:hover{
background-color:red;
}
.a3:hover{
background-color:red;
}
.a4:hover{
background-color:red;
}
.a5:hover{
background-color:red;
}
.a6:hover{
background-color:red;
}
.a7:hover{
background-color:red;
}
.a8:hover{
background-color:red;
}
.a9:hover{
background-color:red;
}
.a10:hover{
background-color:red;
}
.a1 a:hover{
color:white;
}
.a2 a:hover{
color:white;
}
.a3 a:hover{
color:white;
}
.a4 a:hover{
color:white;
}
.a5 a:hover{
color:white;
}
.a6 a:hover{
color:white;
}
.a7 a:hover{
color:white;
}
.a8 a:hover{
color:white;
}
.a9 a:hover{
color:white;
}
.a10 a:hover{
color:white;
}