用CSS实现首字下沉效果，仿word的首字下沉

用过word的大部分人都知道，word里有一个首字下沉功能，在文章的排版时用，有时能给文章增色不少。

今天我们用css仿word的首字下沉功能，不用修改代码，只用到css的伪元素:first-letter，即可实现首字下沉效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CSS首字下沉</title>

.dyfirst {

width:300px;

border:1px solid #ddd;

padding:5px;

font-size:12px;

margin:5px 0;

}

.dyfirst:first-line {

color:#050;

}

.dyfirst:first-letter {

font-size:300%;

font-weight:bold;

color:#000;

float:left;

}

</style>

</head>

<body>

<div class="dyfirst"> To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile. </div>

<div class="dyfirst"> 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 </div>

</body>

</html>

本文转自寒意博客园博客，原文链接：http://www.cnblogs.com/hnyei/archive/2012/03/02/2376692.html，如需转载请自行联系原作者

用CSS实现首字下沉效果，仿word的首字下沉相关推荐

html字体下沉怎么设置,Word表格中字体下沉设置
回答: 字下沉通常用于文档的开头,用"首字下沉"的方法修饰文档,可以将段落开头的第一个或若干个字母.文字为大号字,并以下沉或悬挂方式改变文档的版面样式.被设置成首字下沉的文字实际上 ...
html首行下沉效果,css仿word首字下沉效果示例
css首个文字下沉效果用过word的大部分人都知道,word里有一个首字下沉功能,在文章的排版时用,有时能给文章增色不少. 用css仿word的首字下沉功能,不用修改代码,只用到css的伪元素:fi ...
C++word break断字(基于单词或字符串)(附完整源码)
C++word break断字的实现 C++word break断字的完整源码(定义,实现,main函数测试) C++word break断字的完整源码(定义,实现,main函数测试) #includ ...
css 首字下次,css first-letter实现首字(字母)下沉效果
css 首字下沉效果原理首字下沉主要使用到css的first-letter伪元素,然后配合使用font-size和float来设置文字的样式即可实现. first-letter选择器选取指定元素文本 ...
html首字下沉使用设置类,如何使用CSS实现首字下沉效果？
在CSS中可以使用伪元素::first-letter来选中一段文本的首字,然后使用font-size属性设置首字大小,在通过float属性来将实现下沉效果. 下面我们来看看实现首字下沉的示例: 首字下 ...
HTML首字下沉的编码,css如何实现首字下沉效果？伪元素+浮动实现效果（代码实例）...
在word文档中有一个首字下沉功能,可以在文章的排版时使用,有时能给文章增色不少.那么css可以实现这样的效果吗?本篇文章就给大家介绍css是如何实现首字下沉效果的,让大家可以了解如何用css的伪元素 ...
css中设置首字下沉效果,CSS如何实现首字下沉效果？
我们在开发 web 页面时,如果是涉及到文字段落的开发,需要对文字设置一些特殊样式以增强 web 页面美观,提升用户体验度.那么今天 w3cschool 小编来教大家 CSS 如何实现首字下沉效果. ...
html 首字变大,CSS设置首字放大效果（代码实例）
本章给大家介绍CSS如何设置首字放大效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在很多的文章中,都有一个首字放大的效果,在CSS中同样可以实现该效果. CSS中通过对第一个 ...
[css] 如何使用CSS实现段落首字母或首字放大效果？
[css] 如何使用CSS实现段落首字母或首字放大效果? ::first-letter 伪元素选择器p::first-letter {font-size: 2em;font-weight: bold; ...

用CSS实现首字下沉效果，仿word的首字下沉

用CSS实现首字下沉效果，仿word的首字下沉相关推荐

最新文章

热门文章