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:

 

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/102933，如需转载请自行联系原作者