amazeui学习笔记--css（常用组件16）--文章页Article
一、总结
1、基本使用：文章内容页的排版样式，包括标题、文章元信息、分隔线等样式。
-
.am-article文章内容容器 -
.am-article-hd文章头部，包含标题、元数据等-
.am-article-title文章标题 -
.am-article-meta文章元数据，如作者、发布日期等
-
-
.am-article-bd文章正文部分-
.am-article-lead文章摘要、导读等信息 -
.am-article-divider分隔线
-
<article class="am-article">
<div class="am-article-hd">
<h1 class="am-article-title">永远的蝴蝶</h1>
<p class="am-article-meta">陈启佑（*）</p>
</div> <div class="am-article-bd">
<p class="am-article-lead">...</p>
</div>
</article>
二、文章页Article
Article 文章内容
文章内容页的排版样式，包括标题、文章元信息、分隔线等样式。
-
.am-article文章内容容器 -
.am-article-hd文章头部，包含标题、元数据等-
.am-article-title文章标题 -
.am-article-meta文章元数据，如作者、发布日期等
-
-
.am-article-bd文章正文部分-
.am-article-lead文章摘要、导读等信息 -
.am-article-divider分隔线
-
永远的蝴蝶
陈启佑（*）
《永远的蝴蝶》是*著名作家陈启佑先生的一篇小小说。这是一篇散文化的微型小说，其语言具有较强的抒情色彩，立意含蓄隽永 。作品情节很简单，写的是一个凄美的爱情故事。在一个雨天，“我”的恋人樱子自愿帮“我”到马路对面去寄信。随着一阵拔尖的刹车声，樱子年轻的生命消逝了。
《永远的蝴蝶》原文
那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨，看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。
“谁叫我们只带来一把小伞哪。”她微笑着说，一面撑起伞，准备过马路帮我寄信。从她伞骨渗下来的小雨点，溅在我的眼镜玻璃上。
随着一阵拔尖的煞车声，樱子的一生轻轻地飞了起来。缓缓地，飘落在湿冷的街面上，好像一只夜晚的蝴蝶。
虽然是春天，好像已是秋深了。
她只是过马路去帮我寄信。这简单的行动，却要叫我终身难忘了。我缓缓睁开眼，茫然站在骑楼下，眼里裹着滚烫的泪水。世上所有的车子都停了下来，人潮涌向马路*。没有人知道那躺在街面的，就是我的，蝴蝶。这时她只离我五公尺，竟是那么遥远。更大的雨点溅在我的眼镜上，溅到我的生命里来。
为什么呢？只带一把雨伞？
然而我又看到樱子穿着白色的风衣，撑着伞，静静地过马路了。她是要帮我寄信的。那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？
妈：我打算在下个月和樱子结婚。
作者简介
《永远的蝴蝶》作者陈启佑，笔名渡也、*之助，*省嘉义市人，中国文化大学中国文学博士，曾任教于嘉义农专、*教育学院。
文章赏析
赏析一
《永远的蝴蝶》就像一支低沉而哀怨的悲曲，幽幽道来，委婉动人。读罢此文，脑海中一直浮现着这样一个场景：阴雨中，樱子如蝴蝶般轻轻飞了起来，又缓缓落到了街面上。雨是冰凉的，街面是湿冷的，蝴蝶的飘飞是凄美的，又是令人伤痛的。
赏析二
文章有几点尤值得我们好好品味。一是作品以“雨”为线索，贯穿全文的始终。悲剧因“雨”而生，小说开篇写“雨”，正是对不幸和灾难起因的一个交代。樱子遭遇不幸后，又写“更大的雨点溅在我的眼镜上，溅到我的生命里来”，“成为一生一世的一场雨”。显然，“雨”又成为泪水和痛苦的象征。同时，以“雨”贯穿全文，也造成笼罩全文的阴冷凄凉的氛围。二是作家善于反复运用细节。如三次写到“站在骑楼下”，以此使“我”的情感思绪变化的脉络和层次更加清楚明显；两次写到樱子“穿着白色的风衣，撑着伞”，这是对“我”的心理刻画，突出了樱子美丽清纯的形象，也表达了“我”对樱子永不磨灭的爱。三是高超的谋篇布局技巧。直到作品的结尾处才告诉读者信的内容，这样构思，无疑加重了作品的悲剧色彩，让人哀痛欲绝，心不堪受。正因为作家善于谋篇布局，匠心独运，作品才有了很强的感染力。
<article class="am-article">
<div class="am-article-hd">
<h1 class="am-article-title">永远的蝴蝶</h1>
<p class="am-article-meta">陈启佑（*）</p>
</div>
<div class="am-article-bd">
<p class="am-article-lead">...</p>
</div>
</article>