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: