css实现首字下沉效果

最新推荐文章于 2022-05-27 00:02:50 发布

weixin_34106122

最新推荐文章于 2022-05-27 00:02:50 发布

阅读量355

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：https://yq.aliyun.com/articles/426122

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