分页按钮"/>
项目实战：在首页上添加分页按钮
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; }
更多推荐
项目实战：在首页上添加分页按钮
发布评论