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

江山如画 • 2019年4月2日下午3:56 • 网页制作 • 阅读 14545

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

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

#first{font-size:3em;
       font-weight:bold;
       float:left;
       margin-right:20px;
}

<p><span id="first">云</span>计算……</p>

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

通过伪类设置首字样式

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首字下沉</title> <style type="text/css"> #container{ width:900px; margin:0 auto; } #container p:first-letter{ font-size:3em; font-weight:bold; float:left; margin-right:20px; } </style> </head> <body> <div id="container"> <p >云计算（英语：Cloud Computing），是一种基于互联网的计算方式，通过这种方式，共享的软硬件资源和信息可以按需提供给计算机和其他设备。云计算是继1980年代大型计算机到客户端-服务器的大转变之后的又一种巨变。用户不再需要了解“云”中基础设施的细节，不必具有相应的专业知识，也无需直接进行控制。云计算描述了一种基于互联网的新的IT服务增加、使用和交付模式，通常涉及通过互联网来提供动态易扩展而且经常是虚拟化的资源。</p> </div> </body> </html>

Tips:You can change the code before run.

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

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

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

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

99%的人还看了以下文章

javascript-快速掌握DOM技术

CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

PS图片转页面CSS+HTML的步骤

美观简洁的bootstrap 表单验证代码

跟永哥学HTML5（6）：H5表单及表单验证

CSS3 transform:rotate()制作旋转图片

发表回复