CSS 实现电影信息卡片

/* 电影卡片容器样式 */
.movie-card {
  width: 220px;
  margin: 10px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
}
 
/* 电影卡片标题样式 */
.movie-card .title {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 0 10px;
  color: #333;
}
 
/* 电影卡片信息样式 */
.movie-card .info {
  margin: 0 10px 10px;
  color: #666;
}
 
/* 电影卡片评分样式 */
.movie-card .rating {
  display: flex;
  align-items: center;
  margin: 0 10px 10px;
}
 
/* 电影卡片评分数字样式 */
.movie-card .rating .score {
  margin-right: 5px;
  color: #ffc107;
}
 
/* 电影卡片海报图片样式 */
.movie-card .poster {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
}
 
/* 应用到HTML结构的样式 */
<div class="movie-card">
  <div class="title">电影标题</div>
  <div class="info">
    <span>上映日期: </span><span>2023-04-01</span>
  </div>
  <div class="rating">
    <span class="score">9.5</span><span> / 10</span>
  </div>
  <div class="poster" style="background-image: url('movie-poster-url');"></div>
</div>

这个代码实例展示了如何使用CSS创建一个电影卡片的基本样式。它包括了一个电影卡片的宽度、边框、阴影、圆角、内边距和背景样式。同时，它还展示了如何使用flexbox进行布局，以及如何应用背景图片。这个例子简洁明了，并且注重实用性，是学习CSS布局和样式设计的一个很好的起点。