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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FLatten Transformer_ Vision Transformer using Focused Linear Attention

paper: https://arxiv.org/abs/2308.00442 code: https://github.com/LeapLabTHU/FLatten-Transformer 摘要 当将transformer模型应用于视觉任务时&#xff0c;自注意的二次计算复杂度( n 2 n^2 n2)一直是一个持续存在的挑战。另一方面&#xff0c;线性注意通过精心设计的映射…

事务的特性,API、隔离级别、传播行为

一、事务 1、事务的介绍 事务就是用户定义的一系列执行SQL语句的操作, 这些操作要么完全地执行&#xff0c;要么完全地都不执行&#xff0c; 它是一个不可分割的工作执行单元。 2、事务的使用场景 例如在日常生活中&#xff0c;有时我们需要进行银行转账&#xff0c;这个银行转…

就业班 2401--3.11 Linux Day15--ftp数据传输测试server和client+谷歌验证码登录远程连接

文件服务器 路漫漫其修远兮&#xff0c;吾将上下而求索.构建NFS远程共享存储 一、NFS介绍 文件系统级别共享&#xff08;是NAS存储&#xff09; --------- 已经做好了格式化&#xff0c;可以直接用。 速度慢比如&#xff1a;nfs&#xff0c;sambaNFS NFS&#xff1a;Networ…

用A*算法求解八数码问题

用A*算法求解八数码问题 实现两种启发函数实现A*算法测试 实现两种启发函数 采取两种策略实现启发函数&#xff1a; 策略1&#xff1a;不在目标位置的数字个数策略2&#xff1a;曼哈顿距离&#xff08;将数字直接移动到对应位置的步数总数&#xff09; # 策略1: 不在目标位置…

蓝桥杯每日一题 (递推、递归、)

3777. 砖块&#xff08;每日一题&#xff09; 后面if条件判断很巧妙&#xff0c;只要有一种成立就不管另一种了。 #include<bits/stdc.h> using namespace std; //3777. 砖块 //跟贪心差不多 string s; int t,n;void update(char &c) {if(cW)cB;else cW; }bool che…

shell文本处理工具-shell三剑客1

shell脚本常用基础命令2 shell脚本常用基础命令 shell脚本常用基础命令2一、grep用法二、sed用法2.1p参数 &#xff08;显示&#xff09;n参数&#xff08;只显示处理过的行&#xff09; 文本处理三剑客&#xff1a;grep sed awk 一、grep用法 grep -E egrep (扩展搜索正文表…

NUMA简介

NUMA 1 什么是NUMA 早期的计算机&#xff0c;内存控制器还没有整合进 CPU&#xff0c;所有的内存访问都需要经过北桥芯片来完成。如下图所示&#xff0c;CPU 通过前端总线&#xff08;FSB&#xff0c;Front Side Bus&#xff09;连接到北桥芯片&#xff0c;然后北桥芯片连接到…

如何查看一个进程有几个子进程

要查看一个进程有多少个子进程&#xff0c;一种方法是通过在命令行上使用 ps 命令结合 pgrep 命令。 pgrep -P <parent_pid> | wc -l其中&#xff1a; <parent_pid> 是你要查看的父进程的进程号&#xff08;PID&#xff09;。 这个命令会列出指定父进程的所有子…

Java集合详解(单列集合 | 双列集合 | Collections集合工具类)

○ 前言&#xff1a; 在开发实践中&#xff0c;我们需要一些能够动态增长长度的容器来保存我们的数据&#xff0c;java中为了解决数据存储单一的情况&#xff0c;java中就提供了不同结构的集合类&#xff0c;可以让我们根据不同的场景进行数据存储的选择&#xff0c;如Java中提…

xpath基础入门

一、XPath是什么 XPath 定位 HTML 文档中的元素的工具 XPath 是一种表达语言&#xff0c;旨在支持XML文档的查询或转换。 XPath由万维网联盟(W3C) 于 1999 年定义。 XPath支持 XML 的应用程序&#xff08;例如 Web 浏览器&#xff09;和许多编程语言都支持 XPath。 XPath 语言…

Tensorflow2.0笔记 - 均方差MSE和交叉熵CROSS ENTROPHY作为损失函数

本笔记主要记录使用MSE和交叉熵作为loss function时的梯度计算方法。 import tensorflow as tf import numpy as nptf.__version__#softmax函数使用 #参考资料&#xff1a;https://blog.csdn.net/u013230189/article/details/82835717 #简单例子&#xff1a; #假设输出的LOGIT…

24计算机考研调剂 | 佳木斯大学

佳木斯大学计算机科学与技术、电子信息招调剂生 考研调剂招生信息 学校:佳木斯大学 专业:工学->电子信息 年级:2024 招生人数:- 招生状态:正在招生中 联系方式:********* (为保护个人隐私,联系方式仅限APP查看) 补充内容 黑龙江省自主智能与信息处理重点实验室马慧彬…

maven 安装

maven 安装 maven 下载解压添加自定义仓库位置修改配置文件环境变量配置测试idea 设置 maven 下载 下载 Apache Maven 解压 添加自定义仓库位置 repository 修改配置文件 修改 maven\conf\settings.xml 文件&#xff0c; 主要是 localRepository (更改自己路径) 和 mirro…

基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程(五)——多条件搜索并分页展示

前后端数据交互 书接上文&#xff0c;我们上节课通过前后端数据交互实现了分页查询和单条件搜索分页查询的功能&#xff0c;最后留了个小尾巴&#xff0c;就是把其他两个搜索条件&#xff08;email,address&#xff09;也加进来&#xff0c;实现多条件搜索并分页展示。这节课我…

计算机网络-第5章 运输层(1)

主要内容&#xff1a;进程之间的通信与端口、UDP协议、TCP协议、可靠传输原理&#xff08;停止等待协议、ARQ协议&#xff09;、TCP报文首部、TCP三大题&#xff1a;滑动窗口、流量控制、拥塞控制机制 5.1 运输层协议概述 运输层向它上面的应用层提供通信服务&#xff0c;真正…

java技术面试100问?

当今软件开发领域中&#xff0c;Java作为一门广泛应用的编程语言&#xff0c;已经成为了众多企业和开发者的首选。其稳定性、可靠性以及丰富的生态系统&#xff0c;使其成为了构建各种类型应用的理想选择。然而&#xff0c;要想在竞争激烈的技术行业中脱颖而出&#xff0c;除了…

深入理解React中的useState:函数组件状态管理的利器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

24计算机考研调剂 | 燕山大学【211】

燕山大学接收调剂研究生 考研调剂招生信息 学校:燕山大学 专业:工学->电子科学与技术->物理电子学 年级:2024 招生人数:5 招生状态:正在招生中 联系方式:********* (为保护个人隐私,联系方式仅限APP查看) 补充内容 要求考生一志愿报考211及以上全国重点院校&…

代码随想录算法训练营第四十八天| 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II

文章目录 1.买卖股票的最佳时机2.买卖股票的最佳时机II 1.买卖股票的最佳时机 给定一个数组 prices&#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择某一天买入这只股票&#xff0c;并选择在未来的某一个不同的日子卖出该股票。设计一个算…

嵌入式学习第二十六天!(网络传输:TCP编程、HTTP协议)

TCP通信&#xff1a; 1. TCP发端&#xff1a; socket -> connect -> send -> recv -> close 2. TCP收端&#xff1a; socket -> bind -> listen -> accept -> recv -> send -> close 3. TCP需要用到的函数&#xff1a; 1. co…