今天我们来实现一个常见的特殊排版--“首字缩放下沉”，也是要应用到浮动功能，通过这篇文章，你也会了，我们马上进入实操。
第 1 步 - 没有 CSS 格式的一段文本
None
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。
NoneCSS CODE
None
HTML CODE
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None
第 2 步 - 在段落第一个字符添加 SPAN 标签
None
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。
NoneCSS CODE
None
HTML CODE
<p>
<span>在</span>本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None
第 3 步 - 浮动第一个字符
None None
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。
NoneCSS CODE
.dropcap
{
float: left;
width: 1.2em;
}
HTML CODE
<p>
<span class="dropcap">在</span>本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None
第 4 步 - 设定字体大小
None None
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。
NoneCSS CODE
.dropcap
{
float: left;
width: 1.2em;
font-size: 4em;
}
HTML CODE
<p>
<span class="dropcap">在</span>本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None
第 5 步 - 设置行高以对齐段落
None None
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。
NoneCSS CODE
.dropcap
{
float: left;
width: 1.2em;
font-size: 4em;
line-height: 103%;
}
HTML CODE
<p>
<span class="dropcap">在</span>本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
🟢 读者资源专享
这里是我从网络上收集并整理的一些免费节点资源。 如果你需要，可以通过下面的链接下载或订阅使用。
📥 V2ray / Karing / Shadowrocket
📥 Clash Verge
📥 For Shadowrocket
0 评论