目标
- 实现下列网页样式
成果
- 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
font-family: SimSun;
}
hr{
width: 400px;
height: 10px;
background-color: red;
}
</style>
</head>
<body background="bg.jpg">
<h2>目录</h2>
<ul>
<li><a href="#1">基本信息</a></li>
<li><a href="#2">作品原文</a></li>
<li><a href="#3">注释译文</a></li>
<li><a href="#">作品鉴赏</a></li>
<li><a href="#4">作品简介</a></li>
</ul>
<h2><a id="1">基本信息</a></h2>
<p style="line-height: 2px">【作品名称】《江村即事》</p>
<p style="line-height: 2px">【创作年代】中唐</p>
<p style="line-height: 2px">【作者姓名】司空曙</p>
<p style="line-height: 2px">【作品名称】七言绝句</p>
<h2><a id="2">作品原文</a></h2>
<p style="font-size: 35px;color: #930093;text-align: center"><u>江村即事</u></p>
<p style="font-size: 20px;color: red;text-align: center;font-family: YouYuan">（唐）司空曙 </p>
<hr>
<p style="font-size: 18px;color: blue;text-align: center;font-weight: bold;font-family: LiSu">钓罢归来不系船，</p>
<p style="font-size: 18px;color: blue;text-align: center;font-weight: bold;font-family: LiSu">江村月落正堪眠。</p>
<p style="font-size: 18px;color: blue;text-align: center;font-weight: bold;font-family: LiSu">纵然一夜风吹去，</p>
<p style="font-size: 18px;color: blue;text-align: center;font-weight: bold;font-family: LiSu">只在芦花浅水边。</p>
<h2><a id="3">注释</a></h2>
<ol>
<li>罢：完了。系：系好。</li>
<li>正堪眠：正是睡觉的好时候。</li>
<li>纵然：即使。</li>
<li>即事：以当前的事物为题材所做的诗。</li>
</ol>
<h2><a id="4">作者简介</a></h2>
<p style="text-indent: 2em;">司空曙(约720-790年)，字 文明，或作文初。广平（今河北永年县东南）人，大历十 才子之一，唐代诗人。约唐代宗大历初前后在世。大历年进 士，磊落有奇才，与李约为至交。性耿介，不干权要。家无 担石，晏如也。尝因病中不给，遣其爱姬。韦辠节度剑南， 辟致幕府。授洛阳主簿。未几，迁长林县丞。累官左拾遗。 终水部郎中。曙诗有集二卷，登进士第，不详何年。曾官主 簿。大历五年任左拾遗，贬长林(今湖北荆门西北)丞。贞元 间，在剑南西川节度使韦皋幕任职，官检校水部郎中，终虞 部郎中。曙为卢纶表兄，亦是"大历十才子"之一。其诗多为 行旅赠别之作，长于抒情，多有名句。胡震亨曰："司空虞 部婉雅闲淡，语近性情。"(《唐音癸签》卷七)有《司空文 明诗集》。其诗朴素真挚，情感细腻，多写自然景色和乡情 旅思，长于五律。诗风闲雅疏淡。</p>
<img src="司空曙.jpg">
</body>
</body>
</html>
- 网页展示
除背景图与字体等其他因素外，基本还原了目标网页。