语义正确优先选，但仅当卡片代表独立可复用内容单元；日常个人主页用更轻量可控。
卡片结构用 <article></article> 还是 <div>？<p>语义正确优先选 <code><article></article>，但仅当这张名片代表独立、可复用的内容单元（比如嵌入博客侧栏或分享页）；日常个人主页里用 <div class="card"> 更轻量、更可控。别硬套语义标签——<code><article></article> 会自带默认 margin，可能破坏你精心调的间距，反而要重置。怎么让卡片居中又响应式？
别只靠 margin: 0 auto —— 它只对块级元素生效，且不处理垂直居中。推荐用 Flex 布局包裹容器：
.card-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
.card {
width: 100%;
max-width: 360px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (max-width: 480px) {
.card { max-width: 100%; }
}
注意：如果父容器没设高度，align-items: center 不会垂直居中；加 min-height: 100vh 是稳妥做法。
头像、姓名、职位、联系方式怎么排版才不拥挤？
用 CSS Grid 控制行高和间隙比浮动或 inline-block 更可靠，尤其在移动端换行时：
.card-content {
display: grid;
gap: 0.75rem;
padding: 1.5rem;
}
.card-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto;
}
.card-name {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
margin: 0;
}
.card-title {
font-size: 0.95rem;
color: #666;
text-align: center;
margin: 0.25rem 0 0.75rem;
}
.card-contact a {
display: block;
margin: 0.25rem 0;
color: #333;
text-decoration: none;
}
常见坑：<img> 没设 width/height 或 object-fit，头像拉伸变形；<a></a> 默认带下划线和蓝色，不重置会显得杂乱。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
深色模式下卡片背景发灰怎么办？
别只靠 @media (prefers-color-scheme: dark) 改背景色——系统深色模式下，用户也可能手动开了浅色主题。更稳的方式是监听 class 切换：
:root {
--card-bg: #fff;
--card-text: #333;
}
body.dark-mode .card {
background-color: var(--card-bg);
color: var(--card-text);
}
/* JS 触发 */
document.documentElement.classList.add('dark-mode');
关键点：CSS 变量必须定义在 :root，否则在 .dark-mode 下无法继承；直接写死 background: #222 会覆盖变量，失去灵活性。
字体大小、阴影强度、边框颜色这些细节，在深色背景下对比度容易不足，得单独调——不是换个背景色就完事。
