项目实战：在首页上添加分页按钮

news2025/11/10 11:58:24

1、在index.html添加div_pagination

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/index.css">
    <script src="script/axios.min.js"></script>
    <script src="script/index.js"></script>
    <script src="script/common.js"></script>
</head>
<body>
  <div id="div0">
    <div id="div_title">
      <p>欢迎使用水果库存系统</p>
        <div style="float: right;border: 0px solid red;margin-right:8%;margin-bottom: 4px">
            <a href="add.html" style="text-decoration: none">添加新库存</a>
        </div>
    </div>
    <div id="div_fruit_table">
      <table id="fruit_tbl">
        <tr>
          <th class="w25">名称</th>
          <th class="w25">单价</th>
          <th class="w25">库存</th>
          <th>操作</th>
        </tr>
        <!--
        <tr>
          <td><a href='edit.html?fid=1'>苹果</a></td>
          <td>5</td>
          <td>100</td>
          <td><img class="delImg" src="imgs/del.png" onclick='delFruit(1)'/></td>
        </tr>
        -->
      </table>
    </div>

      <div id="div_pagination">
          <input type="button" class="btn" value="首页"/>
          <input type="button" class="btn" value="上一页"/>
          <input type="button" class="btn" value="下一页"/>
          <input type="button" class="btn" value="尾页"/>
      </div>

  </div>
</body>
</html>

2、在index.css添加分页按钮样式

.delImg{
    width:24px;
    height:24px;
}
body{
    padding:0;
    margin:0;
    background-color: #333333;
}
div{
    position:relative;
    float:left;
}
*{
    color:indigo;
}
#div0{
    width:80%;
    margin-left:10%;
    background-color: aliceblue;
    padding: 60px 0px;
    margin-top:20px;
    border-radius: 8px;
}
#div_title{
    width:80%;
    margin-left:10%;
}
#div_title p{
    text-align: center;
    font-size:28px;
    letter-spacing: 8px;
}
#div_fruit_table{
    width:80%;
    margin-left:10%;
}
#fruit_tbl{
    width:88%;
    margin-left:6%;
    border:1px solid lightgray;
    line-height: 32px;
    border-collapse: collapse;
}
#fruit_tbl td , #fruit_tbl th{
    border:1px solid lightgray;
    text-align: center;
    font-weight: lighter;
}
.w25{
    width:25%;
}
#div_pagination {
    width: 70%;
    margin-left: 15%;
    border: 0px solid red;
    text-align: center;
    margin-top: 16px;
}
.btn{
    width: 100px;
    height: 26px;
    border: 1px solid lightgray;
}