css实现首字下沉效果-阿里云开发者社区

css实现首字下沉效果

2017-11-25 757

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

< !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: