HTML 实用指南：3 种超好看的卡片样式推荐

以下为您推荐几种在 HTML 中常见且好看的卡片样式： 1. 简约卡片 ```html <div class="card"> <img src="image.jpg" alt="Image"> <h3>Title</h3> <p>Description</p> <button>Button</button> </div> ``` 样式： ```css .card { border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; width: 300px; } .card img { width: 100%; height: auto; } .card h3 { margin-top: 10px; } .card p { margin-top: 5px; } .card button { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } ``` 2. 带图标卡片 ```html <div class="card"> <i class="fas fa-star"></i> <h3>Title</h3> <p>Description</p> <button>Button</button> </div> ``` 样式： ```css .card { background-color: #f8f9fa; border-radius: 5px; padding: 20px; display: flex; align-items: center; justify-content: space-between; width: 300px; } .card i { font-size: 30px; } .card h3 { margin-left: 20px; } .card p { margin-top: 5px; } .card button { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } ``` 3. 双色卡片 ```html <div class="card"> <div class="card-top"> <h3>Title</h3> </div> <div class="card-bottom"> <p>Description</p> <button>Button</button> </div> </div> ``` 样式： ```css .card { width: 300px; border-radius: 10px; overflow: hidden; } .card-top { background-color: #007bff; color: #fff; padding: 20px; } .card-bottom { background-color: #f8f9fa; padding: 20px; } .card h3 { margin: 0; } .card p { margin-top: 5px; } .card button { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } ``` 您可以根据自己的需求和设计风格对这些样式进行调整和修改。 ######[AI写代码神器 | 835点数解答 | 2024-08-25 09:41:44]