通过 sql 查询获取最新 5 篇文章后，在 php 循环中利用索引判断首项，为其分配独立 css 类或结构，实现首图放大、其余统一尺寸的视觉区分效果。
通过 sql 查询获取最新 5 篇文章后，在 php 循环中利用索引判断首项，为其分配独立 css 类或结构，实现首图放大、其余统一尺寸的视觉区分效果。
在构建博客首页或内容聚合页时，常见的设计需求是将最新发布的文章（如“头条”）以更大尺寸、更突出的样式展示，而后续几篇则采用统一的卡片式布局。这不仅提升视觉层次感，也强化了内容优先级。
实现该效果的核心在于：数据查询 + 循环索引识别 + 条件化 HTML/CSS 输出。以下是完整、健壮的实现方案：
✅ 正确的 PHP + MySQLi 实现（含错误处理）
<?php
$mysqli = new mysqli("localhost", "user", "pass", "database");
if ($mysqli->connect_error) {
die("连接失败: " . $mysqli->connect_error);
}
$query = "SELECT id, name, image FROM posts ORDER BY id DESC LIMIT 5";
$result = $mysqli->query($query);
if (!$result) {
die("查询失败: " . $mysqli->error);
}
// 使用 mysqli_fetch_array 需传入结果集，而非 SQL 字符串（原答案此处有误）
$rowIndex = 0;
while ($row = $result->fetch_assoc()) {
$class = ($rowIndex === 0) ? 'post-first' : 'post-standard';
$imgSize = ($rowIndex === 0) ? 'width: 100%; height: 400px; object-fit: cover;'
: 'width: 200px; height: 150px; object-fit: cover;';
echo '<article class="post-item ' . htmlspecialchars($class) . '">';
echo '<img src="' . htmlspecialchars($row['image']) . '" alt="' . htmlspecialchars($row['name']) . '" style="' . $imgSize . '">';
echo '<h3>' . htmlspecialchars($row['name']) . '</h3>';
echo '</article>';
$rowIndex++;
}
$mysqli->close();
?>? 关键说明与注意事项
- 索引逻辑修正：原问答中 $row = 0 写在循环内部会导致每次重置，应使用外部计数器（如 $rowIndex），并在循环末尾递增。
- 安全防护：务必对输出内容使用 htmlspecialchars() 防止 XSS；数据库操作建议改用预处理语句（prepare/bind_param）防范 SQL 注入。
-
CSS 推荐写法（分离关注点）：
.post-first img { width: 100%; height: 400px; object-fit: cover; } .post-standard img { width: 200px; height: 150px; object-fit: cover; }这样可避免内联样式冗余，便于维护和响应式适配。
- 扩展性提示：若需支持更多差异化样式（如第2项加边框、第3项带角标），可将 if/else 改为 switch($rowIndex) 或使用 CSS :nth-child() 配合统一类名。
通过以上方式，你不仅能精准控制首篇文章的视觉权重，还能保持代码清晰、安全、可扩展——这才是生产环境推荐的最佳实践。
