此时此刻我想吟诗一首

本文主要是介绍此时此刻我想吟诗一首，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

作者是中原某高校在校大学生，平时就是闲着发发文章，欢迎大家及时提出问题，保证第一时间回复。如果感兴趣，就给博主来个免费的赞吧！

最近有小伙伴出个前端的教程，奈何才疏学浅没有能力，就简简单单写个页面，表达一下我的情调。

作诗

生查子·元夕
欧阳修
去年元夜时①，花市灯如昼②。
月到柳梢头，人约黄昏后。
今年元夜时，月与灯依旧。
不见去年人，泪满春衫袖。
注释
①元夜：正月十五为元宵节。这夜称为元夜、元夕。
②花市：繁华的街市。

赏析

这是首相思词，写去年与情人相会的甜蜜与今日不见情人的痛苦，明白如话，饶有韵味。词的上阕写“去年元夜”的事情，花市的灯像白天一样亮，不但是观灯赏月的好时节，也给恋爱的青年男女以良好的时机，在灯火阑珊处秘密相会。“月到柳梢头，人约黄昏后”二句言有尽而意无穷。柔情密意溢于言表。下阕写“今年元夜”的情景。“月与灯依旧”，虽然只举月与灯，实际应包括二三句的花和柳，是说闹市佳节良宵与去年一样，景物依旧。下一句“不见去年人”“泪满春衫袖”，表情极明显，一个“满”字，将物是人非，旧情难续的感伤表现得淋漓尽致。

上图

在这里插入图片描述

撸代码


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>poem</title><!-- <link rel="stylesheet" href="../css/css.css"> --><style>*{margin: 0;padding: 0;}body{background: url("images/w3b.png") repeat-y,url("images/w3b.png") right repeat-y;}.poem{width: 540px;height: 463px;background: url("images/black.jpg") no-repeat;color: #ffffff;margin: 150px auto 0;padding: 10px 30px;}.poem h1{font-size: 20px;line-height: 40px;}.poem h2{font-size: 18px;line-height: 40px;letter-spacing: 8px;}.poem h3{font-size: 16px;line-height: 40px;}.poem p{font-size: 14px;line-height: 20px;}.poem ul{list-style-type: none;font-size: 14px;line-height: 20px;}.poem sup{color: #ff0000;}.poem span{color: #ff0000;}</style>
</head>
<body><div class="poem"><h1>生查子·元夕</h1><h2>欧阳修</h2><p>去年元夜时<sup>①</sup>，花市灯如昼<sup>②</sup>。<br>月到柳梢头，人约黄昏后。<br>今年元夜时，月与灯依旧。<br>不见去年人，泪满春衫袖。</p><h3>注释</h3><ul><li><span>①</span>元夜：正月十五为元宵节。这夜称为元夜、元夕。</li><li><span>②</span>花市：繁华的街市。</li></ul><h3>赏析</h3><p>这是首相思词，写去年与情人相会的甜蜜与今日不见情人的痛苦，明白如话，饶有韵味。词的上阕写“去年元夜”的事情，花市的灯像白天一样亮，不但是观灯赏月的好时节，也给恋爱的青年男女以良好的时机，在灯火阑珊处秘密相会。“月到柳梢头，人约黄昏后”二句言有尽而意无穷。柔情密意溢于言表。下阕写“今年元夜”的情景。“月与灯依旧”，虽然只举月与灯，实际应包括二三句的花和柳，是说闹市佳节良宵与去年一样，景物依旧。下一句“不见去年人”“泪满春衫袖”，表情极明显，一个“满”字，将物是人非，旧情难续的感伤表现得淋漓尽致。</p></div>
</body>
</html>

我们一起看星星吧

在这里插入图片描述


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>行星系统</title><style type="text/css">body {background: #000;}.sun {width: 280px;height: 280px;margin-top: 200px;margin-left: 300px;border: 1px solid #FFA500;background: #FFA500;border-radius: 50%;box-shadow: 0px 0px 35px #FFA500;animation: action 10s;animation-iteration-count: infinite;animation-timing-function: linear;}@keyframes action {0% {transform: rotate(0deg)}100% {transform: rotate(360deg)}}.earth {border: 1px solid #0000CC;background: #0000CC;box-shadow: 0px 0px 35px #0000CC;width: 40px;height: 40px;border-radius: 50%;margin-left: -90px;animation: actions 5s;animation-iteration-count: infinite;animation-timing-function: linear;}@keyframes actions {0% {transform: rotate(0deg)}100% {transform: rotate(360deg)}}.moon {border: 1px solid #F0F0F0;background: #F0F0F0;box-shadow: 0px 0px 35px #F0F0F0;width: 10px;height: 10px;border-radius: 50%;margin-left: -20px;}</style>
</head>
<body><div class="sun"><div class="earth"><div class="moon"></div></div>
</div></body>
</html>