求仿gsmarena移动端书籍缩略图的HTML+CSS实现方案

数据老陈

2026-8-5

实现类似gsmarena移动端的书籍缩略图样式

以下是适配移动端的书籍缩略图HTML和CSS代码，还原你想要的卡片式样式：

HTML结构

<!-- 单本书籍卡片 -->
<div class="book-card">
  <div class="book-thumb-wrap">
    <img src="你的书籍图片地址" alt="书籍封面">
  </div>
  <h3 class="book-name">书籍名称</h3>
</div>

CSS样式

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 卡片核心样式 */
.book-card {
  width: 100%;
  max-width: 180px;
  margin: 8px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  background-color: #fff;
  transition: transform 0.2s ease;
}

/* 缩略图容器 */
.book-thumb-wrap {
  width: 100%;
  height: 230px;
  overflow: hidden;
}

.book-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 书籍标题 */
.book-name {
  padding: 8px 10px;
  font-size: 13px;
  color: #2d2d2d;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 移动端触摸反馈 */
.book-card:active {
  transform: scale(0.97);
}

/* 小屏设备适配 */
@media (max-width: 480px) {
  .book-card {
    max-width: 150px;
  }
  .book-thumb-wrap {
    height: 190px;
  }
}