本文主要是介绍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>这篇关于20240309web前端_第一周作业_古诗词的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
