项目实战：在首页上添加分页按钮-编程知识

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

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;
}