首页用html，css写一个图书列表

用html，css写一个图书列表

时间: 2023-07-15 17:15:50 浏览: 45

好的，以下是一个简单的图书列表的HTML和CSS代码示例： ```html <!DOCTYPE html> <html> <head> <title>图书列表</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { text-align: center; margin-top: 30px; margin-bottom: 20px; } .container { background-color: #fff; padding: 20px; margin: 0 auto; max-width: 800px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .book { display: flex; align-items: center; margin-bottom: 20px; padding: 10px; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .book img { margin-right: 10px; width: 100px; height: 150px; object-fit: cover; } .book h3 { margin: 0; font-size: 24px; } .book p { margin: 5px 0 0; font-size: 16px; color: #666; } </style> </head> <body> <div class="container"> <h1>图书列表</h1> <div class="book"> <img src="book1.jpg" alt="book1"> <div> <h3>图书1</h3> <p>作者：作者1</p> <p>ISBN：1234567890</p> </div> </div> <div class="book"> <img src="book2.jpg" alt="book2"> <div> <h3>图书2</h3> <p>作者：作者2</p> <p>ISBN：0987654321</p> </div> </div> <div class="book"> <img src="book3.jpg" alt="book3"> <div> <h3>图书3</h3> <p>作者：作者3</p> <p>ISBN：5678901234</p> </div> </div> </div> </body> </html> ``` 这里使用了Flex布局来排列每本书的元素，并使用了一些简单的CSS样式来美化页面。你可以将这段代码复制到一个HTML文件中，并将图片替换为你自己的图书封面，以创建一个自己的图书列表。