Jquery中文网 > CSS教程 > 经典实例 > 正文 css实现首字下沉实例代码

css实现首字下沉实例代码

发布时间：2020-05-09 编辑：www.jquerycn.cn

jquery中文网为您提供css实现首字下沉实例代码等资源，欢迎您收藏本站，我们将为您提供最新的css实现首字下沉实例代码资源

在css中要实现首字下沉其实很简单我们只要结合float与font-size的大小即可实现首字下沉了，下面我来举几个有意思的实例。

先看个实例上代码。应用到你要沉的那个字就ok了。

例1

代码如下	复制代码
.first { font-size:320%; /字体百分比增大/ float:left; /左浮动/ }

分析：

1.字体增大。

2.左浮动，然后下一行的就提上来了

例2

代码如下	复制代码
.menglong,.menglong2,.menglong3 { width:300px; border:1px solid #ddd; padding:5px; font-size:12px; margin:5px 0; } .menglong:first-line { color:red; } .menglong:first-letter { font-size:350%; font-weight:bold; color:#000; float:left; } .menglong2:first-line { letter-spacing:-2px; } .menglong3{ text-indent:2em; }

html代码：

代码如下

复制代码

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS首字下沉</title>
</head>
<body>
<div class="menglong">2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration</div>
<div class="menglong">首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色</div>
<div class="menglong2">首行缩进，距离更紧密的.首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的</div>
<div class="menglong3">段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。</div>
</body>
</html>

您可能感兴趣的文章：
css实现首字下沉实例代码
 CSS3中first-letter实现首字下沉变大
 首字下沉与首行样式的如何实现？
图片和CSS制作动画按钮
 css学习的一些心得
 文章内容段落首行缩进简单方法
 ASP与JSP的比较(一)
PHP压缩CSS文件示例代码
 利用CSS，不通过replace替换标引HTML标记
 CSS实现让鼠标经过文字上文字渐变切换

上一篇：CSS3不用图片写出圆角和三角形气泡效果下一篇：css文字大小单位px、pt、em 使用说明

[关闭]

css实现首字下沉实例代码

最近更新

浏览排行