这种还是希望题主自己写一下的好，不过我下面写了一份可以给题主参考，效果实现和你提供的图片差不多，如下图：
运行效果图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: "楷体";
font-weight: bold;
}
.container {
width: 820px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 32px;
}
.author {
text-align: right;
margin-right: 210px;
line-height: 100px;
}
.poem {
line-height: 50px;
margin-left: 50px;
}
.subTitle {
color: red;
line-height: 100px;
}
.text, .footer {
line-height: 30px;
}
.footer {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>忆江南<sup>(1)</sup></h1>
<p class="author">唐：白居易</p>
<p class="poem">江南好，风景旧曾谙。<sup>(2)</sup>日出江花红胜火，春来江水绿如蓝。<sup>(3)</sup>能不忆江南？</p>
<hr />
<p class="subTitle">作者介绍</p>
<p class="text">  白居易(72-84),学乐天,太原(今属山西)人。唐德宗蝴进士,元和三年(808)拜左扮遗,后赖江州(今属江西)司马,移虑州(今属四川)制史,又为苏州(今属江苏)、冈州(今属陕西大荔)制史。晚居洛阳,自号联吵先生、香山居士,其谢欢治倾向鲜明,重汉喻,尚坦易,为中唐大家,也是平期词人中的佼佼者,所作对后世影响甚大.</p>
<hr />
<p class="subTitle">注释</p>
<p class="text">  (1)据《乐府条录》,此词又名《谢秋旅》 ,系唐季德裕为亡短谢秋娘作,又名《望江角》、《梦江南》等,分单调、双调两体。半词二十七字,双凋五十四字,皆予韵.</p>
<p class="text">  (2)语(音夫）：熟悉。</p>
<p class="text">  (3)蓝:蓝草,其叶可制青绿染科。</p>
<hr />
<p class="subTitle">品评</p>
<p class="text">  此词写江角春色,首句“江南好”,以一个既浅切又团活的“好"字,振尽江南春色的种种佳处,而作者的赞顷之意与向往之情也尽离其中,同时,唯国“好之已苦,方能"忆之不休,因此,此句又已路遇站句“轮不记江角",并与之相关国。次句“尺景旧曾语”,点明江由风景之“好,并非得之传闻,而是作者出较杭州时的激身体验与豪身感受,这就既落实了“好字,又照应了"花-字,不失为勾通一篇意脉的精彩老蛋。三、四两句对江角之"好"进行形象化的汉绎,突出渡绿江吃、江水红绿相缺的明艳色彩,给人以光彩夺目的强烈印象。其中,既有同色间的相互烘托,又有弄包间的相互映材,克分显示了作者善予著色的技巧。 末,以“能不记江南“救束金词,既托出身在洛阳的作者对江南春色的无限赞叹与怀念,又造成一种悠选而又深长的韵味,把读者蒂入余请摇溪的境界中。</p>
<hr />
<p class="footer"><span>猜你喜欢：</span><a href="javascript:;">将进酒</a> <a href="javascript:;">游子吟</a></p>
</div>
</body>
</html>
