CSS控制段落第一个字母放大显示特效

发布时间：2018-08-17 22:44 所属栏目：121 来源：站长网

导读：CSS控制段落第一个字母放大显示特效，我们经常看到一些报纸、杂志上有这样的效果，也就是把一段话的第一个字母重点显示出来，不是单纯的变成大写，而是放大，你或许需要先运行一下本代码看看效果就明白了。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHT

　　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> <title>Pseudo-Elements</title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <style> body { background-color: #FFFFFF; color: #595959; } #content p { font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif; } #content p:first-letter { font-size: 2em; padding: 0.1em; color: #000000; vertical-align: middle; } #content p:first-line { color: #191970; } #content p:first-child { margin-left: 2em; } #content p:first-child:first-line { color: inherit; } </style> </head> <body> <div id="content"> <p>Welcome to http://www.veryhuo.com</p> <p>This is a bike.</p> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）