20240309web前端_第一周作业_古诗词

作业三:古诗词

成果展示:

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将进酒</title>
</head>
<body>
    <b style="font-size: 50px; line-height: 100px;">将进酒</b>
    <b style="font-size: 40px;">君不见黄河之水天上来</b><br>
    <img src="../作业/img2/将进酒-李白.png"
    style="float: left;">
    <p style="font-size: 150%;line-height: 56px;">
        君不见黄河之水天上来,奔流到海不复回。<br>
        君不见高堂明镜悲白发,朝如青丝暮成雪。<br>
        人生得意须尽欢,莫使金樽空对月。<br>
        天生我材必有用,千金散尽还复来。<br>
        烹羊宰牛且为乐,会须一饮三百杯。<br>
        岑夫子,丹丘生,将进酒,杯莫停。<br>
        与君歌一曲,请君为我侧耳听。<br>
        钟鼓馔玉不足贵,但愿长醉不复醒。<br>
        古来圣贤皆寂寞,惟有饮者留其名。<br>
        陈王昔时宴平乐,斗酒十千恣欢谑。<br>
        五花马,千金裘,<br>
        呼儿将出换美酒,与尔同销万古愁。<br></p>
</body>
</html>

解析:

古诗词网页主要是文字标签和图片标签的使用使,使用font-size改变文字的字号大小,line-height调整文字上下的间距,b标签给文字加粗

    <b style="font-size: 50px; line-height: 100px;">将进酒</b>
    <b style="font-size: 40px;">君不见黄河之水天上来</b><br>

img标签插入图片,src写入图片来源路径

由题,需要文字与图片平行显示,首先要将图片调整成左浮动的属性,float属性指定了元素的浮动方式,float:left表示将图像左浮动。左浮动意味着图像会尽量向左边对齐,并腾出周围的空间,其他内容(例如文本)会围绕图像来显示。

    <img src="../作业/img2/将进酒-李白.png"
    style="float: left;">

正文部分,调整字号大小,文字的上下边距,使其与图片平行显示,内容部分注意换行

    <p style="font-size: 150%;line-height: 56px;">
        君不见黄河之水天上来,奔流到海不复回。<br>
        君不见高堂明镜悲白发,朝如青丝暮成雪。<br>
        人生得意须尽欢,莫使金樽空对月。<br>
        天生我材必有用,千金散尽还复来。<br>
        烹羊宰牛且为乐,会须一饮三百杯。<br>
        岑夫子,丹丘生,将进酒,杯莫停。<br>
        与君歌一曲,请君为我侧耳听。<br>
        钟鼓馔玉不足贵,但愿长醉不复醒。<br>
        古来圣贤皆寂寞,惟有饮者留其名。<br>
        陈王昔时宴平乐,斗酒十千恣欢谑。<br>
        五花马,千金裘,<br>
        呼儿将出换美酒,与尔同销万古愁。<br></p>

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2024-03-13 03:02:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-13 03:02:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-13 03:02:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-13 03:02:01       18 阅读

热门阅读

  1. mysql根据时间段生成时间

    2024-03-13 03:02:01       19 阅读
  2. Mysql数据库的优点

    2024-03-13 03:02:01       21 阅读
  3. 嵌入式36——TCP

    2024-03-13 03:02:01       18 阅读
  4. 数组的数据输入

    2024-03-13 03:02:01       19 阅读
  5. python | 类与对象

    2024-03-13 03:02:01       17 阅读
  6. 算法学习日记 1 BFS算法 宽度优先算法 简介

    2024-03-13 03:02:01       21 阅读
  7. 路由算法与路由协议

    2024-03-13 03:02:01       17 阅读
  8. C++和rust的比较

    2024-03-13 03:02:01       20 阅读
  9. Vue中Class绑定和style绑定的方式

    2024-03-13 03:02:01       20 阅读
  10. 面试如何介绍MVCC

    2024-03-13 03:02:01       20 阅读