源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] CSS实现段落首字母、首字放大特效

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2014-12-31 16:27:06 | 显示全部楼层 |阅读模式
这篇文章主要介绍了CSS实现段落首字母、首字放大特效,效果非常不错,需要的朋友可以参考下 摘要:

  段落首字母放大是指放大段落开头的字母或者汉字,主要使用了css的first-letter伪类选择器。

单行放大:

  在第一行内放大,效果如下:

201412311547091.png

201412311547091.png


复制代码代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #FFFFFF;
color: #595959;
}
.contain {
width: 150px;
}
.contain p {
font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.contain p:first-letter {
font-size: 2em;
padding: 0.1em;
color: #000000;
vertical-align: middle;
}
.contain p:first-line {
color: red;
}
.contain p:first-child:first-letter {
color: red;
}
.contain p:first-child:first-line {
color: inherit;
}
</style>
</head>
<body>
<div class="contain">
<p>This is a test article. This is a test article.</p>
<p>This is a test article. This is a test article.</p>
<p>这是一个测试</p>
</div>
</body>
</html>

注意:first-letter支持IE7+,first-line支持IE8+

多行放大:

  效果如下:

201412311547092.png

201412311547092.png


复制代码代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title></p> <p></head>
<body>
<style>
* {
margin:0;
padding:0;
}
body {
font-size:12px;
font-family: Tahoma, Geneva, sans-serif;
padding:200px;
}
p {
width:150px;
color:#000;
font-size:1em;
margin-bottom: 20px;
}
p:first-letter{
float: left;
font-size:2.5em;
padding-right:5px;
text-transform:uppercase;
}
p:first-line{
color:#f00;
}
</style>
<p>This is a test article. This is a test article.This is a test article. This is a test article.This is a test article. This is a test article.</p>
<p>这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。</p>
</body>
</html>

回复

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2022-9-4 17:42:28 | 显示全部楼层
可以,看卡巴
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

221

积分

中级会员

Rank: 3Rank: 3

积分
221
发表于 2022-11-1 17:43:05 | 显示全部楼层
啊啊啊啊啊啊啊啊啊啊啊啊啊啊
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

316

积分

中级会员

Rank: 3Rank: 3

积分
316
发表于 2022-11-6 09:27:26 | 显示全部楼层
好东西可以可以可以可以
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

362

积分

中级会员

Rank: 3Rank: 3

积分
362
发表于 2022-12-8 21:45:06 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

99

积分

注册会员

Rank: 2

积分
99
发表于 2023-1-3 16:54:32 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-4-6 00:57:52 | 显示全部楼层
老大你好你好好你好
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

73

积分

注册会员

Rank: 2

积分
73
发表于 2023-6-23 22:42:29 | 显示全部楼层
66666666666
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2023-8-1 06:58:56 | 显示全部楼层
很不错的源码论坛
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-1 06:50:29 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-29 17:47 , Processed in 0.072587 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表