【前端效果】各种博文效果记录 📝

图片位置

靠左、靠右、居中

正常设定无法靠左，只能调整大小，估计项目的全局影响，奈何前端水平有限，找不到问题所在

div块 + 设置 float + clear: both

<div style="float: left;"> // left middle right
  <img src="...">
</div>
<br style="clear: both;">

文字效果

使用带style的span应该是最方便的

效果说明	示例代码	显示效果
颜色字体	`<span style="color: rgb(204, 68, 68);">TEXT</span>`	你好👋
粗体文字	`<span style="font-weight: bold;">TEXT</span>`	你好👋
斜体文字	`<span style="font-style: italic;">TEXT</span>`	你好👋
下划线文字	`<span style="text-decoration: underline;">TEXT</span>`	你好👋
删除线文字	`<span style="text-decoration: line-through;">TEXT</span>`	你好👋
字体大小	`<span style="font-size: 24px;">TEXT</span>`	你好👋
背景高亮	`<span style="background-color: yellow;">TEXT</span>`	TEXT
蓝色斜体粗体	`<span style="color: blue; font-style: italic; font-weight: bold;">TEXT</span>`	你好👋
灰色注释风格文字	`<span style="color: gray; font-size: 13px;">TEXT</span>`	你好👋

遮蔽效果

在开头设置css，之后使用 `span标签`

<style>
.reveal-on-hover {
  background-color: black;
  color: black;
  padding: 0 4px;
  border-radius: 2px;
  transition: color 0.3s ease;
  cursor: pointer;
}

.reveal-on-hover:hover {
  color: white;
}
</style>

// ...
 <span class="reveal-on-hover">text</span>
// ...