14Blogger网页架构设计之Float--浮动可缩放的首字下沉效果 （十）

arsncao 六月 13, 2023

今天我们来实现一个常见的特殊排版--“首字缩放下沉”，也是要应用到浮动功能，通过这篇文章，你也会了，我们马上进入实操。




本文索引
None

第 1 步 - 没有 CSS 格式的一段文本


None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

None
CSS CODE
None

HTML CODE

<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 2 步 - 在段落第一个字符添加 SPAN 标签


None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

None
CSS CODE
None

HTML CODE

<p>
<span>在</span>本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 3 步 - 浮动第一个字符


None None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

None
CSS CODE
.dropcap
{
float: left;
width: 1.2em;
}

HTML CODE

<p>
<span class="dropcap">在</span>本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 4 步 - 设定字体大小


None None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

None
CSS CODE
.dropcap
{
float: left;
width: 1.2em;
font-size: 4em;
}

HTML CODE

<p>
<span class="dropcap">在</span>本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 5 步 - 设置行高以对齐段落


None None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

None
CSS CODE
.dropcap
{
float: left;
width: 1.2em;
font-size: 4em;
line-height: 103%;
}

HTML CODE

<p>
<span class="dropcap">在</span>本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None
None None

油管频道👉 https://bit.ly/2XNfakc 看最新视频，白嫖最新节点！

请朋友们优先使用订阅，特别是手机用户，更方便更快捷！




发表评论

0 评论

发表评论