搜索 

<!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: 10px;
  opacity:0.6;
}

.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;
}
  </style>
</head>
<body>
<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>


  </tr>
  <tr>
    <td>{{list_info.id}}</td>
    <td>{{list_info.title}}</td>
      <td>{{list_info.name}}</td>
      <td>{{list_info.time}}</td>
      <td>{{list_info.price}}</td>
  </tr>
</table>
    </div>
</body>
</html>
posted @ 2023-07-25 11:35  马越月  阅读(22)  评论(0)    收藏  举报