主页-526互联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

body
{
background-image:url('/static/img/21.jpeg');

}
  .button {
  position: absolute;
  top: 150px;
  left: 25.5%;
  padding: 10px 20px;
  
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

table
{
    border-collapse:collapse;
    width:50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 200px;

}
table,th, td
{
    border: 1px solid black;
    text-align:center;
}
th
{
    height:50px;
}
.cz {
  display: inline-block;
  padding: 4px 12px;
  text-align: center;
  text-decoration: none;
  background-color: #008CBA;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 1px;
  border-radius: 5px;
  font-size:10px;
}

/* 设置按钮悬停时的样式 */
.cz:hover {
  background-color: #4CAF50;
}

/* 设置按钮点击时的样式 */
.cz:active {
  
}
.search-box {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  background-color: #f2f2f2;
  border-radius: 20px;
  padding: 5px;
  position: absolute;
  top: 10px;
  right: 200px;
  opacity:1;
}

.search-box input[type="text"] {
  flex-grow: 1;
  border: none;
  outline: none;
  background-color: transparent;
  padding: 5px;
}

.search-box button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  outline: none;
  padding: 5px 10px;
  border-radius: 0 20px 20px 0;
}
.span
{
    border-collapse:collapse;
    width:50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 200px;

}
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-top:500px;
    position:relative;
   left:700px;

}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;

}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

.tuichu {
  align-items: center;
  width: 50px;
  height: 20px;
  background-color:#4CAF50 ;
  border-radius: 20px;
  padding: 5px;
  position: absolute;
  top: 15px;
  right: 10px;
  opacity:1;
  text-align:center;
}

  </style>
</head>
<body>
<a class="button" href="/addbook">添加书籍</a>
<form method="post">
    {% csrf_token %}
<div class="search-box">
  <input type="text" placeholder="请输入书名查找....."  name="bookname">
  <button type="submit" >搜索</button>
</div>
</form>
<div>
<table>
    <tr>
     <th>ID</th>
    <th>书名</th>
    <th>作者</th>
        <th>出版时间</th>
        <th>价格</th>
        <th>操作</th>

  </tr>

    {% for row in list_info %}
  <tr>
    <td>{{row.id}}</td>
    <td>{{row.title}}</td>
      <td>{{row.name}}</td>
      <td>{{row.time}}</td>
      <td>{{row.price}}</td>
      <td>
           <a href="/update?nid={{ row.id }}"  class="cz">编辑</a>
          <a href="/index?nid={{ row.id }}"  class="cz">删除</a>
      </td>
  </tr>
{% endfor %}
</table>
    </div>
<div>
    <a href="/delect"  class="cz tuichu">退出</a>
</div>
</body>
</html>