web前端练习_古诗词-CSDN博客

本文链接：https://blog.csdn.net/weixin_73921499/article/details/136635242

本博客展示了如何使用HTML和CSS创建《将进酒》古诗页面布局，包括文字排版、图片插入及浮动设置等基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

古诗词

成果展示：

完整代码：

<!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>