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

news/2024/11/29 8:53:45/

作业三:古诗词

成果展示:

完整代码:

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

http://www.ppmy.cn/news/1379667.html

相关文章

udp通信程序(桥接模式)

发送端 #include "head.h"int sockfd 0; pthread_t tid_send; pthread_t tid_recv; struct sockaddr_in recvaddr ; char name[32];void *sendfun(void *arg) {struct msgbuf sendmsg;ssize_t nsize 0;while(1){memset(&sendmsg,0,sizeof(sendmsg));sendmsg.…

C43500 CuZn19Sn铜合金品质保证

C43500 CuZn19Sn铜合金品质保证 80年代以来&#xff0c;由于光纤电缆载流容量大等优点&#xff0c;在通讯干线上不断取代铜电缆&#xff0c;而迅速推广应用。但是&#xff0c;把电能转化为光能&#xff0c;以及输入用户的线路仍需使用大量的铜。随着通讯事业的发展&#xff0c;…

Ubuntu 22.04 server 安装GNOME/XFCE/KDE桌面环境

在Ubuntu Server上安装桌面环境可以通过以下步骤完成&#xff1a; 安装前请确保您已经在/etc/apt/sources.list 文件中启用了Universe和Multiverse软件库。 首先&#xff0c;通过SSH或物理访问方式登录到Ubuntu Server。 确保系统处于最新状态&#xff0c;运行以下命令进行更…

探究精酿啤酒的秘密:原料中的天然酵母与纯净水质

在啤酒的世界中&#xff0c;Fendi Club精酿啤酒以其与众不同的口感和深远的余味吸引了全球的啤酒爱好者。而这一切&#xff0c;都归功于其选用的上好原料&#xff0c;特别是天然酵母和纯净水质。 天然酵母是啤酒的灵魂。与工业生产的啤酒酵母不同&#xff0c;天然酵母富含丰富的…

【设计模式】设计原则和常见的23种经典设计模式

设计模式 1. 设计原则&#xff08;记忆口诀&#xff1a;SOLID&#xff09;【记忆口诀&#xff1a;单开里依接迪合&#xff08;单开礼仪接地和&#xff09;】 &#xff08;1&#xff09;单一职责原则&#xff08;Single Responsibility Principle, SRP&#xff09; &#xff…

Mysql按照月份分组统计数据,当月无数据则填充0

目录 起因实现结论 起因 最近有个需求需要在sql中实现获取近半年的统计数据&#xff0c;本来以为挺简单的&#xff0c;不过这个项目数据基本没有&#xff0c;在此情况下还要实现获取近半年的数据就没办法简单group by了 实现 #如果每个月都有数据的话是比较简单的 SELECT DA…

GPT提示语格式——个人自用

总体格式 指令&#xff1a;将 输入 划分为/翻译为/提取出/... 输出 输出格式&#xff1a;... 输入示例&#xff1a;... 输出示例&#xff1a;... 输入&#xff1a;... 输出&#xff1a;基本概述 示例 指令&#xff1a; 提取以下文本中的介词。 输入&#xff1a;“虽然这些发展…

OpenStack安装步骤

一、准备OpenStack安装环境 1、创建实验用的虚拟机实例。 内存建议16GB&#xff08;8GB也能运行&#xff09;CPU&#xff08;处理器&#xff09;双核且支持虚拟化硬盘容量不低于200GB&#xff08;&#xff01;&#xff09;网络用net桥接模式 运行虚拟机 2、禁用防火墙与SELin…