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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/448598.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

冒泡排序的理解与实现【C语言、C++、java】

冒泡排序介绍 冒泡排序(Bubble Sort)&#xff0c;又被称为气泡排序或泡沫排序。 它是一种较简单的排序算法。它会遍历若干次要排序的数列&#xff0c;每次遍历时&#xff0c;它都会从前往后依次的比较相邻两个数的大小&#xff1b;如果前者比后者大&#xff0c;则交换它们的位…

【教程】使用小米换机来迁移数据

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 1、在新旧手机上都下载安装小米换机app&#xff1a;小米换机-小米应用商店 2、在新手机上&#xff0c;选择旧手机类型 3、授予权限 4、在旧手机上&#xff0c;授予权限 4、输入锁屏密码 5、选择发现的新手机 6、等…

后端八股笔记------Redis

Redis八股 上两种都有可能导致脏数据 所以使用两次删除缓存的技术&#xff0c;延时是因为数据库有主从问题需要更新&#xff0c;无法达到完全的强一致性&#xff0c;只能达到控制一致性。 一般放入缓存中的数据都是读多写少的数据 业务逻辑代码&#x1f447; 写锁&#x1f4…

论文笔记:Evaluating the Performance of Large Language Models on GAOKAO Benchmark

1 论文思路 采用zero-shot prompting的方式&#xff0c;将试题转化为ChatGPT的输入 对于数学题&#xff0c;将公式转化为latex输入 主观题由专业教师打分 2 数据 2010~2022年&#xff0c;一共13年间的全国A卷和全国B卷 3 结论 3.1 不同模型的zeroshot 高考总分 3.2 各科主…

Helix QAC—源码级静态自动化测试工具

Helix QAC概述 Helix QAC是一款源码级静态自动化测试工具&#xff0c;主要用于C/C代码的完全自动化静态分析工作&#xff0c;提供一个高效、健壮和自动化的环境来引入和执行编码标准。Helix QAC根据尽早、更频繁测试的理念&#xff0c;在软件生命周期最早期软件开发阶段应用识别…

03:HAL---中断

目录 一:中断 1:简历 2:AFIO 3:EXTI 4:NVIC基本结构 5:使用步骤 6:设计中断函数 二:中断的应用 A:对外式红外传感计数器 1:硬件介绍 2:计数代码 B:旋转编码计数器 1:硬件介绍 2:旋转编码器代码 C:按键控制LED D:代码总结 一:中断 1:简历 中断&#xff1a;在主程序…

数据分析-Pandas如何画图验证数据随机性

数据分析-Pandas如何画图验证数据随机性 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表…

地球系统模式(CESM)

目前通用地球系统模式&#xff08;Community Earth System Model&#xff0c;CESM&#xff09;在研究地球的过去、现在和未来的气候状况中具有越来越普遍的应用。CESM由美国NCAR于2010年07月推出以来&#xff0c;一直受到气候学界的密切关注。近年升级的CESM2.0在大气、陆地、海…

ctfshow web入门 php特性总结

1.web89 intval函数的利用&#xff0c;intval函数获取变量的整数值&#xff0c;失败时返回0&#xff0c;空的数组返回&#xff0c;非空数组返回1 num[]1 intval ( mixed $var [, int $base 10 ] ) : int Note: 如果 base 是 0&#xff0c;通过检测 var 的格式来决定使用的进…

论文解读:NAND闪存中读电压和LDPC纠错码的高效设计-2

在NAND闪存中&#xff0c;理论结果表明&#xff0c;LDPC解码器的性能可通过密度进化&#xff08;Density Evolution, DE&#xff09;技术进行详尽分析。针对MLC NAND闪存&#xff0c;研究者首先建立了一个离散无记忆信道模型&#xff0c;将存储单元的阈值电压划分为七个区间&am…

前端学习之HTML 下拉框 文本框

注&#xff1a;注释是对下列代码中标签的解释 下拉框 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>下拉框</title> </head> <body><!--使用&#xff1a;select标签option标…

通信总线协议之CAN-FD协议详解

文章目录 通信总线之CAN-FD总线协议详解1. CAN-FD 简介1.1 什么是CAN FD1.2 CAN FD的特点 2. CAN-FD总线协议2.1 帧起始2.2 仲裁段2.3 控制段2.4 数据段2.5 CRC段2.6 ACK段2.7 帧结束 3. 如何从传统的CAN升级到CAN FD 通信总线之CAN-FD总线协议详解 1. CAN-FD 简介 1.1 什么是…

AJAX学习(三)

版权声明 本文章来源于B站上的某马课程&#xff0c;由本人整理&#xff0c;仅供学习交流使用。如涉及侵权问题&#xff0c;请立即与本人联系&#xff0c;本人将积极配合删除相关内容。感谢理解和支持&#xff0c;本人致力于维护原创作品的权益&#xff0c;共同营造一个尊重知识…

SpringBoot 多环境的配置(附带有截图)

文章目录 概要整体配置流程配置详细说明技术细节小结 概要 多环境开发 在实际项目开发中&#xff0c;一般需要针对不同的运行环境&#xff0c;如开发环境、测试环境、生产环境等&#xff0c;每个运行环境的数据库等配置都不相同&#xff0c;每次发布测试、更新生产都需要手动…

精酿啤酒:酿造工艺的与众不同之处与魅力

Fendi Club啤酒的酿造工艺具有与众不同之处和魅力&#xff0c;这些特点使得啤酒口感与众不同、品质卓着。 Fendi Club啤酒采用与众不同的原料配方。他们精选上好麦芽、酵母和啤酒花&#xff0c;并按照与众不同的比例进行搭配。这种与众不同的原料配方为啤酒提供了丰富的口感和…

LLM推理框架Triton Inference Server学习笔记(一): Triton Inference Server整体架构初识

官方文档查阅: TritonInferenceServer文档 1. 写在前面 这篇文章开始进行大语言模型(Large Language Model, LLM)的学习笔记整理&#xff0c;这次想从Triton Inference Server框架开始&#xff0c;因为最近工作上用到了一些大模型部署方面的知识&#xff0c; 所以就快速补充了…

记一次用Arthas排查Redis连接数增加问题(附:redis连接池优化)

手打不易&#xff0c;如果转摘&#xff0c;请注明出处&#xff01; 注明原文&#xff1a;https://zhangxiaofan.blog.csdn.net/article/details/136493572 前言 有一次生产环境发包后&#xff0c;发现redis连接数变多了&#xff0c;由于改的代码比较多&#xff0c;不确定是哪…

下载、安装并配置 Node.js

文章目录 1. 下载2. 自定义安装3. 添加环境变量4. 验证5. 修改下载位置6. npm 换源7. 测试 ➡️➡️➡️来源&#xff1a;Simplilearn.com Node.js 是一个开源、跨平台的 JavaScript 运行时环境和库&#xff0c;用于在客户端浏览器之外运行 web 应用程序。 Ryan Dahl 在2009年开…

2024.3.11 C++作业

1、提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数要求使用C风格字符串完成 #include <iostream>using namespace std;int main() {char str[20];cout << "please enter the str:";gets(str);in…

YoloV7改进策略:Block改进|自研Block,涨点超猛|代码详解|附结构图

涨点效果 参考模型 参考的Block,如下图: 我对Block做了修改,修改后的结构图如下: 代码详解 from timm.models.layers import DropPathfrom torch import Tensor def channel_shuffle(x: Tensor, groups: