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;线性注意通过精心设计的映射…

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

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

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;然后北桥芯片连接到…

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;真正…

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

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

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

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

嵌入式学习第二十六天!(网络传输: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…

蓝桥杯2023真题(4)

1.景区导游&#xff08;树上前缀和、最近公共祖先&#xff09; 思路 路线&#xff1a;2 -> 6 -> 5 -> 1 1.一个点都不去去掉的花费记作sum 2.去掉第一个点&#xff0c;sum - cost[2 -> 6] 3.去掉第二个点&#xff0c;sum - cost[2 -> 6] - cost[6 -> 5] co…

计算机网络笔记(湖科大教书匠版本)

第一章、 ①三种交换方式 电路交换、分组交换、报文交换&#xff08;被分组交换所取代&#xff09; 1.电路交换&#xff1a;会一直占用通道&#xff0c;不适合计算机之间的数据通信 2.分组交换&#xff1a;通常我们把表示该数据的整块数据称为一个报文。 先把较长的报文划…

下载、安装并配置 Node.js

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

React useMemo钩子指南:优化计算性能

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

萝卜大杂烩 | Polars ,最强Pandas平替(内含实操代码,建议收藏!)

本文来源公众号“萝卜大杂烩”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;Polars (最强Pandas平替) 本文章转自&#xff1a;数据studio 1 介绍 Polars是一个用于操作结构化数据的高性能DataFrame库&#xff0c;可以说是平替…

leetcode 热题 100_旋转图像

题解一&#xff1a; 翻转数组&#xff1a;先将数组沿右上-左下对角线翻转&#xff0c;再将数组上下翻转。 class Solution {public void rotate(int[][] matrix) {int n matrix.length;for (int i 0; i < n; i) {//沿右上-左下对角线翻转for (int j 0; j < n - i - 1…