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

news2024/11/16 1:44:19

作业三:古诗词

成果展示:

完整代码:

<!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.coloradmin.cn/o/1508857.html

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

相关文章

BUUCTF---easyre1

1.记录一下第一次做逆向题目 2.题目描述&#xff0c;下载附件 3.解压之后是一个可执行文件&#xff0c;先用PE查看是否有壳 4.没有壳&#xff0c;接下来用ida打开&#xff0c;直接拖进ida即可&#xff0c;接下来使用快捷键fnshiftf12查看字符&#xff0c;若是没有出现搜索框&a…

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

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

navicat过期了,直接用idea连接mysql

1、我的是社区版&#xff0c;需要下载一个插件&#xff0c;直接搜索安装即可。 2、找到data source&#xff0c;点击mysql 3、你们熟悉的&#xff0c;输入账户密码&#xff0c;点击test Connection测试是否连接成功 4、这个本来是在右边&#xff0c;但是你可以把他挪到左边。 5…

Neo4j 批量导入数据 从官方文档学习LOAD CSV 命令 小白可食用版

学习LOAD CSV&#x1f680; 在使用Neo4j进行大量数据导入的时候&#xff0c;发现如果用代码自动一行一行的导入效率过低&#xff0c;因此明白了为什么需要用到批量导入功能&#xff0c;在Neo4j中允许批量导入CSV文件格式&#xff0c;刚开始从网上的中看了各种半残的博客或者视频…

Servlet容器部署教程

Servlet容器介绍 Sercvlet是基于java的动态网站开发技术&#xff0c;其所有类和组件都是基于java实现的&#xff0c;要想使用Servlet&#xff0c;就必须提前配置好java运行环境。Servlet基于java&#xff0c;可以使用几乎全部的java API&#xff0c;所以它的功能异常强大&…

Oracle 层级查询(Hierarchical Queries)

如果一张表中的数据存在分级&#xff08;即数据间存在父子关系&#xff09;&#xff0c;利用普通SQL语句显示数据间的层级关系非常复杂&#xff0c;可能需要多次连接才能完整的展示出完成的层级关系&#xff0c;更困难的是你可能不知道数据到底有多少层。而利用Oracle的层级查询…

Android Framework 通过脚本动态修改应用私有文件执行权限

你只活一次 要悦己 脚本配置 Android_source/device/sprd/***/test/test_chmod.rc service test_chmod /vendor/bin/test_chmod.shuser rootdisabledoneshoton property:sys.test_chmodtruestart test_chmodAndroid_source/device/sprd/***/test/test_chmod.sh #!/system/bin/…

【CRC】一文搞懂CRC-8 SAE J1850 ZERO校验和

CRC在线计算 一、什么是 CRC 校验和 CRC —— Cyclic redundancy check 循环冗余校验&#xff0c;一种校验接收到的数据是否完整的算法&#xff0c;广泛应用于数据通信&#xff0c;大概流程如下 二、CRC-8 如何计算 首先&#xff0c;想要确定一个 CRC 算法&#xff0c;我们需…

论文笔记: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 各科主…

web自动化测试框架都是有哪些?

Web自动化测试框架主要有以下几种&#xff1a; 1.Selenium&#xff1a;轻量级的Web自动化测试框架&#xff0c;支持多种Web浏览器和语言的集成。Selenium提供了一个IDE来录制和运行自动化测试脚本&#xff0c;还提供了WebDriver&#xff0c;可以通过编程语言编写自动化测试脚本…

知识积累(四):无

文章目录 1. KL散度2. GELU 激活函数3. 向量运算4. bert4.1 词嵌入4.2 cross-encoder 模型4.3 bert 架构4.4 bert 池化操作 5. Fid 模型&#xff08;Fusion-in-Decoder&#xff09;6. 多分类损失函数6.1 交叉熵损失6.2 softmax 损失 7. t-sne8. NDCG参考资料 1. KL散度 衡量两…

Skia最新版CMake编译

运行示例&#xff1a;example/HelloWorld.cpp Skia: 2024年03月08日 master分支: 993a88a663c817fce23d47394b574e19d9991f2f 使用CMake编译 python tools/git-sync-depsbin/gn gen out/config --idejson --json-ide-script../../gn/gn_to_cmake.py此时output目录会生成CM…

动态规划刷题总结(入门)

目录 什么是动态规划算法 如何判断题目中将使用动态规划算法&#xff1f; 动态规划题目做题步骤 动态规划题目解析 泰波那契数模型 第 N 个泰波那契数 三步问题 使用最小花费爬楼梯 路径问题 不同路径 不同路径 Ⅱ 珠宝的最高价值 下降最短路径和 地下城游…

照片的动态效果怎么弄?分享一个方法快速制作

动态的照片能够吸引注意力&#xff0c;增强视觉效果让信息更加生动有趣。那么&#xff0c;想要让自己手里的照片也变成有动态效果的图片时要怎么操作呢&#xff1f;这时候&#xff0c;只需要使用动态图片制作&#xff08;https://www.gif.cn/&#xff09;工具-GIF中文网&#x…

基于SSM SpringBoot vue家教交流平台

基于SSM SpringBoot vue家教交流平台 系统功能 管理员登录 家长登录注册 学生登录注册 教师登录注册 个人中心 家长信息管理 学生信息管理 教师信息管理 招聘家教管理 应聘家教管理 确认招聘管理 论坛管理 系统管理 我的收藏管理 管理员管理 开发环境和技术 开发语言&#x…

畅享精酿啤酒与意式面包的简单美味

在忙碌的生活中&#xff0c;我们时常渴望寻找那份简单的美好。而Fendi Club啤酒与意式面包的搭配&#xff0c;正是这种美好体验的代表。它们以其简洁的味道和口感&#xff0c;成为了无数人心中的佳品。 Fendi Club啤酒&#xff0c;以其醇厚的口感和细腻的泡沫&#xff0c;成为了…

【MySQL系列 05】Schema 与数据类型优化

良好的数据库 schema 设计和合理的数据类型选择是 SQL 获得高性能的基石。 一、选择优化的数据类型 MySQL 支持的数据类型非常多&#xff0c;选择正确的数据类型对于获得高性能至关重要。不管存储哪种类型的数据&#xff0c;下面几个简单的原则都有助于做出更好的选择。 1. …

软件测试面试需要准备什么?面试有什么技巧?看完面试轻松解决

前言 无论是在校招还是社会企业招聘中&#xff0c;应聘者总是要经过层层的考核才能被聘用。然而&#xff0c;在招聘时&#xff0c;设置的编程以及非技术面试问题&#xff0c;真的有必要吗&#xff1f;如此就能考核出一位开发者的真实水平&#xff1f; 说到底就是考验你的技术以…

LuGre摩擦模型详解

文章目录 原理Matlab 实现原理

家用洗地机如何挑选?介绍几款不错的适用型号

面对繁重的家务清洁&#xff0c;洗地机悄然走进了我们的生活&#xff0c;它以智能的科技与卓越的性能&#xff0c;高效地清洁每一个角落&#xff0c;带来前所未有的居家体验。这不仅是一种清洁工具的革新&#xff0c;更是对舒适生活品质的不懈追求。接下来&#xff0c;就让我们…