用CSS实现首字下沉效果，仿word的首字下沉
用過(guò)word的大部分人都知道，word里有一個(gè)首字下沉功能，在文章的排版時(shí)用，有時(shí)能給文章增色不少。
今天我們用css仿word的首字下沉功能，不用修改代碼，只用到css的偽元素:first-letter，即可實(shí)現(xiàn)首字下沉效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>CSS首字下沉</title>
<style type="text/css">
.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"> 對(duì)于世界而言，你是一個(gè)人；但是對(duì)于某個(gè)人，你是他的整個(gè)世界。縱然傷心，也不要愁眉不展，因?yàn)槟悴恢钦l(shuí)會(huì)愛(ài)上你的笑容。 </div>
</body>
</html>
本文轉(zhuǎn)自寒意博客園博客，原文鏈接：http://www.cnblogs.com/hnyei/archive/2012/03/02/2376692.html，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的用CSS实现首字下沉效果，仿word的首字下沉的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 系统中图片上传设计方案
- 下一篇： 经验之谈：Linux运维工程师所需技能