利用CSS首字下沉的问题

bujingyun0829 2008-01-09 02:01:36

如何利用CSS实现首字下沉?
下面一个例子是我看的可是在IE6中和 FF1.5中似乎没有作用... 问题出在哪请教高手谢谢!
<p class="one">sssssssssssssssssssssss
ssssssssssssssssssssssssssssss
sssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssss</P>

p.one:first-letter{
float:left;
width:50px;
line-height:30px;
background-color:#666666;}

...全文

441 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

bujingyun0829 2008-01-12

打赏
举报

分数我还是给大家的谢谢大家的回答!

bujingyun0829 2008-01-12

打赏
举报

三楼的朋友你的代码我尝试了但是只是首字变小不是变大下沉降

bujingyun0829 2008-01-12

打赏
举报

我那个格式是放在外面连接的CSS中所以没有写STYLE 呵呵不好意思
p.one:first-letteR 是可以这么写的 p.one first-letter中间的:是不能省去的这样效果没有办法显示

自己今天重新尝试了一下做出来了发现必须把 HEIGHT 和FONT-SIZE 加上才可以
p.one:first-letter{
float:left;
width:50px;
line-height:30px;
background-color:#ff0000;
font-size:40px;
height:40px;}
这样就可以了不过说明一下 IE6中没有办法显示这个效果只有在FF中可以我是FF1.5版本的

yixianggao 2008-01-12

打赏
举报

L@_@K

<!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> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

    <style>

p

{

    font-size: 16px;

    font-family: Courier New;

}

p.one:first-letter

{

    font-size: 12px;

    color: #ff0000;

}

    </style>

</head>

<body>



<p class="one">SSSSSSSSSSSSSSSSSSSSSSS

SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

SSSSSSSSSSSSSSSSSSSSS

SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

SSSSSSSSSSSSSSSSSSSSSSSS</P>



</body>

</html>

一品梅 2008-01-12

打赏
举报

p.one first-letter

homel 2008-01-09

打赏
举报

lz,你的错误原因是没有加style,我将下沉的字母的背景色改为红色了,这样比较明显

<style>
p.one:first-letter{
float:left;
width:50px;
line-height:30px;
background-color:#ff0000;}
</style>
<p class="one"> sssssssssssssssssssssss
ssssssssssssssssssssssssssssss
sssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssss </P>