CSS伪对象搞定首字下沉

原创 2007年09月29日 09:33:00

用过word,看过报纸的朋友,是不是对它们的首字下沉效果很感兴趣?

有的时候适当的在web中使用些首字下沉的效果,能为你的web增色不少。

通过伪对象:first-letter可以搞定这个效果:

演示地址:http://www.doyoe.com/model/xhtmlcss/style/first.htm

CSS部分:

.dyfirst {
 width:300px;
 border:1px solid #ddd;
 padding:5px;
 font-size:12px;
}
.dyfirst:first-line {
 color:#050;
}
.dyfirst:first-letter {
 font-size:300%;
 font-weight:bold;
 color:#000;
 float:left;
}

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>CSS Pseudo-Elements 搞定首字下沉</title>
</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>
</body>
</html>

以上的CSS只有.dyfirst:first-letter是用来做首字下沉效果的,其余的两个东东,只是为了让这个效果看起来更明显。同时也把:first-line的用法写了下,毕竟和:first-letter是“胞兄弟”,称不离砣嘛。

用CSS Pseudo-Elements做首字下沉的原理大致就是这样的,这只是一个演示,朋友们可以把效果做得更赞。

 

css first-letter实现首字(字母)下沉效果

css 首字下沉效果原理 首字下沉主要使用到css的first-letter伪元素,然后配合使用font-size和float来设置文字的样式即可实现。 first-letter选择器选取指定元素...

44-首字下沉效果的设置

无标题文档 span{ font-size:2em; float:left; margin:5px; font-weight:bolder; } img{ float:right; ...

CSS制作首字下沉

在杂志排版中,常常能看到首字下沉的效果。 在Web的排版中,也常常能看到上图这样的效果。并且常常看到的是首段首字下沉。那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果。::first-l...
  • LuviaWu
  • LuviaWu
  • 2017年03月16日 19:10
  • 236

韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 对象——function特别说明 1.在js中一切都是对象 2.类(原型对象)其实也是对象,它实际上是Functio...

韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 在上一个博客中未完成的矩阵转置的问题:韩顺平_轻松搞定网页设计(html+css+javascript)_第28...

段落首字大写下沉

  今天要讲的内容是如何实现“首字下沉”,,第一个字是很大的红色楷体,陷于一段文字之首。这种做法在杂志中常见,但是在网页中不那么常见。那么如何实现呢?其实很简单,只有一句CSS就可以了。  Selec...
  • nighted
  • nighted
  • 2011年06月25日 16:37
  • 3535
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS伪对象搞定首字下沉
举报原因:
原因补充:

(最多只允许输入30个字)