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

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

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%的人还看了以下文章

CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

第6课：学习更多HTML元素

vue学习-我的第一个vue代码

第4课：字体

js实现两个页面表单传值并接收

Marquee标签实现跑马灯、滚动公告、通知效果

发表回复