CSS实现段落首字下沉效果的2种方法

CSS实现段落首字下沉效果的2种方法

CSS实现段落首字下沉效果方法一

在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。

#first{font-size:3em;
       font-weight:bold;
       float:left;
       margin-right:20px;
}
<p><span id="first">云</span>计算……</p>

CSS实现段落首字下沉效果方法二

通过伪类设置首字样式

Tips:You can change the code before run.

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3414.html

(1)
江山如画的头像江山如画管理团队
上一篇 2019年3月29日 上午9:45
下一篇 2019年4月3日 上午11:11

99%的人还看了以下文章

  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    7.1K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    7.5K0
  • javascript-快速掌握DOM技术

    Javascript的组成: 1.  js的语法(核心)。 2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本):DOM1,DOM2,DOM3 3. BOM(浏览器模型)  BOM是Browser Object Model的…

    2018年7月17日
    4.1K0
  • js实现两个页面表单传值并接收

    网页制作时,需要两个页面之间传值,通过JS就可轻松实现。 js 实现两个页面表单传值并接收源码 A页面: <input type=”text” id=”txt”> <input type=”button” value=”测试” onclick=”test()”/> <SCRIPT LANGUAGE=”JavaScript”&gt…

    2019年7月10日
    5.0K0
  • 第12课:高度和宽度

    到目前为止,我们还没有在元素尺寸方面给予关注。在这一课,我们将看到为元素定义高度和宽度是十分简单的。 设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度,即在水平方向上的尺寸。 下面是一个简单的例子,它为我们提供了一个可以容纳文本的盒子: div.box {width: 200px;bord…

    2020年2月25日
    5.7K0
  • 第2课:CSS的工作原理

    在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。

    2020年2月22日
    7.9K0

发表回复

登录后才能评论