html书架
时间: 2023-07-05 19:25:04 浏览: 55
您需要一个HTML书架的代码吗?如果是这样,以下是一个简单的HTML书架的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Bookshelf</title>
<style type="text/css">
.bookshelf {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 50px;
}
.book {
width: 150px;
height: 200px;
margin: 10px;
border: 1px solid black;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
background-color: #f2f2f2;
text-align: center;
padding: 10px;
transition: all 0.3s ease-in-out;
}
.book:hover {
transform: scale(1.1);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.book img {
max-width: 100%;
max-height: 150px;
margin-bottom: 10px;
}
.book h3 {
font-size: 16px;
margin-bottom: 5px;
}
.book p {
font-size: 12px;
color: gray;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>My Bookshelf</h1>
<div class="bookshelf">
<div class="book">
<img src="book1.jpg">
<h3>Book Title 1</h3>
<p>Author Name</p>
</div>
<div class="book">
<img src="book2.jpg">
<h3>Book Title 2</h3>
<p>Author Name</p>
</div>
<div class="book">
<img src="book3.jpg">
<h3>Book Title 3</h3>
<p>Author Name</p>
</div>
<div class="book">
<img src="book4.jpg">
<h3>Book Title 4</h3>
<p>Author Name</p>
</div>
<div class="book">
<img src="book5.jpg">
<h3>Book Title 5</h3>
<p>Author Name</p>
</div>
<div class="book">
<img src="book6.jpg">
<h3>Book Title 6</h3>
<p>Author Name</p>
</div>
</div>
</body>
</html>
```
您可以根据需要更改样式和添加/删除书籍。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
检查这段代码的错误并修改实现与book.php的跳转<?php header("Location: book.php"); //连接数据库 $servername = "127.0.0.12"; $username = "roots"; $password = "1234root"; $dbname = "zkw"; $conn = mysqli_connect($servername, $username, $password, $dbname); if (!$conn) { die("连接失败: " . mysqli_connect_error()); } //查询图书 $id = $_GET["id"]; $sql = "SELECT * FROM books WHERE id=$id"; $result = mysqli_query($conn, $sql); $row = mysqli_fetch_assoc($result); //检查用户是否登录 session_start(); if (!isset($_SESSION["username"])) { $bookshelf_text = "登录后可以添加到书架"; } else { $username = $_SESSION["username"]; $sql = "SELECT * FROM bookshelf WHERE username='$username' AND book_id=$id"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { $bookshelf_text = "从书架中移除"; } else { $bookshelf_text = "添加到书架"; } } mysqli_close($conn); ?> <!DOCTYPE html> <html> <head> <title><?php echo $row["name"]; ?></title> </head> <body> <?php echo $row["name"]; ?> <?php echo $row["description"]; ?> <?php echo $bookshelf_text; ?> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)