CSS 布局代码生成

请根据以下设计需求生成可直接使用的HTML+CSS代码：{描述布局需求}。要求：1）使用现代CSS（Flex/Grid），不依赖框架；2）移动端优先的响应式断点；3）语义化HTML标签；4）关键CSS属性添加中文注释说明设计意图；5）处理{特殊状态：空状态/加载中/错误}。