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>
