6. 多列布局/用户界面 - 杂志风格文章布局
6. 多列布局/用户界面 - 杂志风格文章布局
案例：多栏杂志排版
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">body {font-family: "Times New Roman", serif;line-height: 1.6;color: #333;padding: 20px;max-width: 1000px;margin: 0 auto;background: #f9f9f7;}.magazine-article {column-count: 3;column-gap: 40px;column-rule: 1px solid #ddd;text-align: justify;}.article-header {column-span: all;text-align: center;margin-bottom: 30px;}.article-title {font-size: 32px;margin-bottom: 10px;text-shadow: 1px 1px 2px rgba(0,0,0,0.1);}.article-subtitle {font-style: italic;color: #666;margin-bottom: 20px;}.drop-cap::first-letter {font-size: 3em;float: left;line-height: 0.8;margin-right: 8px;color: #8e44ad;font-weight: bold;}.pull-quote {float: right;width: 45%;margin: 0 0 20px 20px;padding: 20px;background: #f0e6ff;border-left: 4px solid #8e44ad;font-size: 1.2em;line-height: 1.5;column-span: none;}.article-image {width: 100%;margin: 20px 0;border-radius: 4px;box-shadow: 0 3px 10px rgba(0,0,0,0.1);break-inside: avoid;}@media (max-width: 768px) {.magazine-article {column-count: 2;}}@media (max-width: 480px) {.magazine-article {column-count: 1;}}</style><body><article class="magazine-article"><header class="article-header"><h1 class="article-title">城市绿化对居民心理健康的影响</h1><p class="article-subtitle">一项为期五年的追踪研究揭示了自然与心理健康的重要联系</p></header><p class="drop-cap">近年来，随着城市化进程的加快，城市居民的心理健康问题日益受到关注。研究表明，城市绿化率与居民的心理健康水平呈显著正相关。</p><div class="pull-quote">"居住在绿化率高的社区的居民，抑郁症状发生率比绿化率低的社区低37%"</div><p>研究人员对五个大城市的2000名居民进行了为期五年的追踪调查，通过定期心理评估和居住环境分析，得出了这一结论...</p><img src="city-park.jpg" class="article-image" alt="城市公园"><p>研究还发现，即使是小型的社区绿地，只要设计合理、维护良好，也能显著提升周边居民的心理健康水平...</p><!-- 更多文章内容... --></article></body>
</html>
