1、index.html
<!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: left;border: 0px solid red;margin-left: 18%;margin-bottom: 4px">
请输入查询的关键字:<input type="text" name="keyword" size="30"
style="border: 1px solid lightgray;height: 24px; margin-left: 8px;padding-left: 4px"/>
<input type="button" value="查询" class="btn"/>
</div>
<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" onclick="page('first')" value="首页"/>
<input type="button" class="btn" onclick="page('pre')" value="上一页"/>
<input type="button" class="btn" onclick="page('next')" value="下一页"/>
<input type="button" class="btn" onclick="page('last')" 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;
}
![](https://i-blog.csdnimg.cn/blog_migrate/dc2e291d7592028a41f90c25f7de27c1.png)