css实现首字下沉效果

< !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=utf-8" />
< title >:first-letter---首字符,支持火狐，ie6 </title>
< style type ="text/css" >
p
{
font-size:16px;
color:#7F5125;
font-family:"幼圆","黑体";
border:1px dotted #666;
_border-style:solid;
_border-color:#ccc;
}
p:first-letter
{
color:#3F2812;
font-size:4em;
}
</style>
</head>

< body >
   < p >当你完成了网站的所有制做而且为网站发布了不少具备价值和吸引力的内容以后，你最恼火的问题可能就是没有人来浏览你的网站，你全部的努力彷佛都没有人承认，此时，你该怎么办呢，你必须把本身的网站推广出去，让更多的人知道她，记住她的域名地址并深深地爱上她，然而这一切并非那么容易，要想有效地推广本身的网站，请看... </p>
</body>
</html>

 

 

注意:IE6有个bug

以下

p:first-letter{
color:#3F2812;
font-size:4em;
}

就是在first-letter和{之间若是没有空白的话就不起做用。

 

效果:

FF3

 

 

 

IE6:

 

 

 

 

加个浮动:

< !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=utf-8" />
< title >:first-letter---首字符,支持火狐，ie6 </title>
< style type ="text/css" >
html
{
overflow:auto;
}
p
{
font-size:16px;
color:#7F5125;
font-family:"幼圆","黑体";
border:1px dotted #666;
_border-style:solid;
_border-color:#ccc;
overflow:hidden;
}
p:first-letter
{
color:#3F2812;
font-size:4em;
float:left;
}
</style>
</head>

< body >
   < p >当你完成了网站的所有制做而且为网站发布了不少具备价值和吸引力的内容以后，你最恼火的问题可能就是没有人来浏览你的网站，你全部的努力彷佛都没有人承认，此时，你该怎么办呢，你必须把本身的网站推广出去，让更多的人知道她，记住她的域名地址并深深地爱上她，然而这一切并非那么容易，要想有效地推广本身的网站，请看... </p>
</body>
</html>

 

 

FF3:

 

IE6: