灯火互联
管理员
管理员
  • 注册日期2011-07-27
  • 发帖数41778
  • QQ
  • 火币41290枚
  • 粉丝1086
  • 关注100
  • 终身成就奖
  • 最爱沙发
  • 忠实会员
  • 灌水天才奖
  • 贴图大师奖
  • 原创先锋奖
  • 特殊贡献奖
  • 宣传大使奖
  • 优秀斑竹奖
  • 社区明星
阅读:4036回复:0

CSS实战:用CSS实现首字下沉效果,仿word的首字下沉

楼主#
更多 发布于:2011-10-02 15:22


用过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">
<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"> 对于世界而言,你是一个人;但是对于某个人,你是他的整个世界。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。 </div>
</body>
</html>


喜欢0 评分0
游客

返回顶部