案例二:登高千古第一绝句

1.图例

2.代码演示

html 复制代码
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 素材:
    1.大盒子宽度 677px,背景色 #badef5
    2.内容盒子 宽度610px 背景色#fff
     */
    /* 清除元素的内外边距 */
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 677px;
      background-color: #badef5;
      /* 水平居中 */
      margin: 0 auto;
    }

    .content {
      width: 610px;
      background-color: #fff;
      margin: 0 auto;
      /* 内边距 */
      padding: 20px;
    }

    .content img {
      width: 100%;
    }

    .content video {
      width: 100%;
    }
  </style>
</head>

<body>

  <div class="box">
    <!-- 插入图片 -->
    <img src="./pratice/img/img.jpg" alt="登高古诗配图" width="610">
    <div class="content">
      <p>
        杜甫是我国唐代伟大的现实主义诗人,他的诗具有丰富的社会内容、强烈的时代色彩,
        与李白合称"李杜",对后世产生了深远的影响。今天让我们一起停下脚步,
        诵读被誉为"七律之冠"的《登高》,倾听诗圣杜甫的心声。
      </p>

      <div class="shi">
        <h5>登高</h5>
        <p>登高
          【唐】杜甫
        </p>
        <p>
          风急天高猿啸哀,渚清沙白鸟飞回。
        </p>
        <p>
          无边落木萧萧下,不尽长江滚滚来。
        </p>
        <p>
          万里悲秋常作客,百年多病独登台。
        </p>
        <p>
          艰难苦恨繁霜鬓,潦倒新停浊酒杯。
        </p>
      </div>
      <img src="./pratice/img/d1.webp" alt="">
      <p>
        这是一首重阳登高感怀诗。此诗作于公元767年(唐代宗大历二年)秋天,杜甫时在夔州。这是他在五十六岁时写下的。一天他独自登上夔州白帝城外的高台,登高临眺,萧瑟的秋江景色,引发了他身世飘零的感慨,渗入了他老病孤愁的悲哀。于是,就有了这首被誉为"七律之冠"的《登高》。

        诗意:天高风急,猿啸声声似乎蕴含着无限的悲哀,孤洲沙白的河洲上有鸟儿在盘旋。无边无际的落叶纷纷飘坠,望不到头的长江水滚滚奔腾而来。悲对秋景感慨万里漂泊常年为客,一生当中疾病缠身今日独上高台。历尽了艰难苦恨白发长满了双鬓,衰颓满心偏又暂停了浇愁的酒杯。诗中表达了诗人对时光易逝、生命短暂的悲叹,也揭示了诗人对国家兴衰、自身境遇的感慨和忧虑。诗人运用独特的意象和生动的语言,表达了生命的珍贵和对生活的热爱,具有深刻的思想内涵
        和艺术魅力。
      </p>
      <img src="./pratice/img/d2.webp" alt="">


      <p>
        如一般诗篇,《登高》首联写景,开门见山,渲染悲凉气氛。诗中如是写到:风急天高猿啸哀,渚清沙白鸟飞回。这两句都是动静结合,寓静于动中构造了一幅以冷色调着墨的绝妙的水墨画。而从整幅画的构造视角来说,这是一幅描画天地之一处的视野较窄的微观水墨画。
      </p>

      <p>
        颔联进一步表现了秋天的特点。诗人通过描绘落叶和江水,表达了对生命和时间的感悟。落木萧萧和江水滚滚的形象,形象地表现了生命的短暂和时光的流逝。
      </p>

      <p>颈联诗人通过对自身境遇的描写,表达了对生命的感悟。诗人漂泊异乡,孤独无助,面对秋天的景色,更加强化了对生命的思考。而"百年多病独登台"则表达了诗人对自身健康的担忧和对生命的敬畏。</p>

      <p>
        尾联诗人通过描写自己的形象和饮酒的行为,表达了对生活的无奈和对生命的感慨。诗人满头白发、生活艰辛,面对秋天的景色,更加感到生活的艰难和苦恨。而"潦倒新停浊酒杯"则表达了诗人的失意和落寞,对生命的无奈和失望。
      </p>
      <img src="./pratice/img/d3.webp" alt="">
      <p>
        一首《登高》读下来,作者的内心的世界全部都展露在我们的面前,这就是诗圣的情怀,这也是当时诗圣眼中的世界。杜甫是衔接盛唐到中唐转变的伟大诗人,他忧国伤时,善于把时代的灾难,民生的涂炭和个人的不幸结合起来,他的诗歌是安史之乱前后的一部"诗史"。希望同学们和老师一起,追寻诗人伟大的足迹,开拓我们的人生视野,共读诗词,体味中华传统文化的魅力。
      </p>
      <video controls poster="./pratice/poster.jpg">
        <source src="./pratice/img/video.mp4" type="video/mp4">
      </video>



    </div>
  </div>
</body>
相关推荐
子伟-H53 小时前
App开发框架调研对比
前端
桃子不吃李子3 小时前
axios的二次封装
前端·学习·axios
SteveJrong3 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~3 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发3 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii4 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack4 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好4 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O4 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木4 小时前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api