css的span问题

html-css05

css的span问题,第1张

====== 针对问题补充 ======

非常抱歉,前两天我写的代码没有测试过,想当然写了一堆东西。看见了你的问题补充之后我试了一下,发现确实有问题。结果用dw搞了半天,愣是没搞出来。最后想了一个变通的办法,要求达到了,就是有点“低级”,呵呵。看看代码吧:

<head>

<style type="text/css">

<!--

body,td,th {

font-size: 12px

}

a:link {

color: #000000

text-decoration: none

}

a:visited {

text-decoration: none

color: #000000

}

a:hover {

text-decoration: none

color: #666666

}

a:active {

text-decoration: none

color: #666666

}

.link6 {

font-family: "Verdana", "Arial", "Helvetica", "sans-serif"

font-size: 16px

color: #4E4E4E

}

.link6:hover{

color:#FFFFFF

background-color: #f58723

text-decoration: none

}

.link6 a:link{

font-size: 16px

color: #4E4E4E

}

.link6 a:visited{

font-size: 16px

color: #4E4E4E

}

.link6 a:hover{

color:#FFFFFF

background-color: #f58723

text-decoration: none

}

.link6 a:active{

color:#FFFFFF

background-color: #f58723

text-decoration: none

}

-->

</style></head>

<body>

<span class="link6"><a href="#">广告业<font style="font-size:10px">(Advertising)</font></a></span>

</body>

link5被我删掉了,呵呵,因为和link6实在太像,而用span和class又搞不出来,所以灵机一动用了font标签,没想到竟然对了。

为什么原来的小字不能变白呢?因为在CSS表定义的时候只是定义了link5的a标签,但是在span内部并没有使用a标签,所以无效。

我试过很多方法,包括用

<div class="link6"><a href="#">广告业<span class="link5">(Advertising)</span></a></div>

这种方法,但只能在点英文字的时候达到要求,而中文字就不行。看来span这个标签还是过于强大了一点,能够屏蔽所有外面的标签的格式。恐怕这就是span“文本内容器”的定义吧。

我CSS也没学很长时间,不知道这些对你有没有帮助。耽误了时间,抱歉啦~~~

给span增加一个class,例如:

<span class="title">文字</span>

然后css里写上:

.title { background: #000 url("背景图片地址")}

有个小窍门 你把<span>[2009-3-5]</span>放在文字前面就可以了 哈哈 给我好评吧

<ul class="newsright">

<li><a href='newsshow.aspx?id=1' title=''><span>[2009-3-5]</span>晨会制度将于6月1日起在全公司..</a></li>

<li><a href='newsshow.aspx?id=3' title=''><span>[2010-9-20]</span>关爱生命、关爱健康</a></li>

<li><a href='newsshow.aspx?id=4' title=''><span>[2010-9-20]</span>我司员工参加宁波保税区企业职工..</a></li>

<li><a href='newsshow.aspx?id=5' title=''><span>[2010-9-20]</span>甘肃省金昌市高副市长一行来我司..</a></li>

<li><a href='newsshow.aspx?id=6' title=''><span>[2010-9-20]</span>我司员工参加宁波第二届职工科技..</a></li>

<li><a href='newsshow.aspx?id=7' title=''><span>[2010-9-20]</span>宁职院—龙星物流第十三期轮岗实..</a></li>

<li><a href='newsshow.aspx?id=8' title=''><span>[2010-9-20]</span>北仑职业高级中学第二期顶岗实训..</a></li>

<li><a href='newsshow.aspx?id=9' title=''><span>[2010-9-20]</span>北仑职业高级中学第二期顶岗实训..</a></li>

</ul>