如何使用div+css制作下面图中的翻页按钮

发布网友发布时间：2022-05-02 03:31

共2个回答

热心网友时间：2022-05-14 02:58

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
    <style type="text/css">
        body { font:14px/1.5 "microsoft yahei","\5FAE\8F6F\96C5\9ED1",tahoma,arial }
        ul,li,div {
            margin: 0;
            padding: 0;
        }
        ul,li { list-style: none; }
        li {
            float: left;
            margin-left: 5px;
            padding: 0 8px;
            border: 1px solid #999;
            color: #000;
            line-height: 24px;
        }
        .active {
            color: #fff;
            background-color: red;
            border-color: red;
        }
        .nowd { border: none; }
        select {
            float: left;
            margin-left: 10px;
            height: 26px;
        }
        button {
            float: left;
            margin-left: 5px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<div>
  <ul>
    <li>首页</li>
    <li>上一页</li>
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li class="nowd">...</li>
    <li>4</li>
    <li>下一页</li>
    <li>尾页</li>
  </ul>
</div>
<div>
    <select>
        <option selected>01页</option>
        <option>02页</option>
        <option>03页</option>
    </select>
    <button>跳转</button>
</div>
</body>
</html>

可能在配色方面有所误差，配色的话用抓取颜色工具可以解决

热心网友时间：2022-05-14 04:16

有现成的，给个邮箱之类的，发给你追问谢谢了