css页面问题
Posted
技术标签:
【中文标题】css页面问题【英文标题】：css page problem 【发布时间】：2010-09-25 02:44:55 【问题描述】：我在下面粘贴的代码是为了在中间的 2 个链接上显示图像而不显示文本，然后在重置和第四个链接上返回文本。我只为 span 标签设置了 display:none，但它什么也没做。无论如何，不使用框架就可以简单地做我想做的事吗？
编辑：示例
<html>
<head>
<style type="text/css">
.class1color:#000; background-image:url('1.jpg');
.class1 span display: none;
.class2color:#00f; background-image:url('2.jpg');
.class2 span display: none;
.class3color:#0f0; background-image:url('1.jpg');
.class3 span display: none;
.class4color:#f00;
</style>
</head>
<body>
<script type="text/javascript">
function sbox(divid, classname)
document.getElementById(divid).className=classname;
</script>
<div>
<a href="#" onclick="sbox('div1','class1');return false;">Reset</a><br/>
<a href="#" onclick="sbox('div1','class2');return false;">try here</a><br/>
<a href="#" onclick="sbox('div1','class3'); return false;">or here</a><br/>
<a href="#" onclick="sbox('div1','class4');return false;">or maybe here</a>
</div>
<div id="div1" class="class4"><span id="div1_text">Blah blah blah</span></div>
</body>
</html>
【问题讨论】：
我认为您需要修复问题的格式。 您缺少引用的示例。 【参考方案1】：rel 属性应该描述链接与当前文档的关系。它应该具有here 描述的值之一。 DIV 是块级分组元素，而 SPAN 是内联分组元素。 SPAN 允许您出于某种目的（常见样式等）将文本和标签组合在一起，而无需更改标记流。
编辑：这个问题从我下面改变了，所以上面的内容似乎与当前上下文无关。
您需要按照@llandril 所说的做，并给 DIV 一些大小。我建议给 DIV 提供固定的宽度和高度——无论是始终还是在使用显示图像的类之一时。如果要显示整个内容，请使用背景图像的宽度和高度。你可能还需要给它一些内容，但我不这么认为。
我想这就是 class1 的样子。我还没有测试过。
/* in case color needs to apply to other elements */
.class1 color: #000;
div .class1
background-image:url('1.jpg');
width: 60px;
height: 30px;
div .class1 span display: none;
【讨论】：
他不应该切换他的选择器的顺序。他想更改具有 css 类“class1”的对象内跨度的显示，而不是位于跨度内的具有“class1”的对象的显示。他的选择器的顺序对于他正在尝试做的事情是正确的。 我明白你的意思。我想我误读了这个例子，并假设跨度也是 class1。他实际上将任何元素与包含跨度的 className class1 匹配。我倾向于对我的规则更加精确。更新了我的示例。【参考方案2】：div 标签包含一个内容块。 span 标签类似，但包含内联内容。区别？您可以使用 span 在段落中设置短语的样式，但 div 可以包裹该段落并将其与其他段落分开。请参阅 this 获取 div 和 this 获取跨度。
在一些 cmets 之后：这里是，from the horse's mouth:
DIV 和 SPAN 元素与 id 和 class 属性相结合，提供了一种向文档添加结构的通用机制。这些元素将内容定义为内联 (SPAN) 或块级 (DIV)，但不会对内容强加其他表示习语。因此，作者可以将这些元素与样式表、语言属性等结合使用，以根据自己的需要和品味来定制 HTML。
【讨论】：
花一些时间浏览 w3schools.com 对于任何学习这些东西的人来说都是非常有用的。 我不喜欢 w3schools。实际上，我发现 w3.org 上的官方规范更易于浏览。 花时间浏览 w3schools.com 会教你一些非标准信息，并帮助你养成很多坏习惯。【参考方案3】：许多 UA（用户代理）通常不使用 rel 属性，但它指定链接页面与当前页面的关系。
某些伪标准已经出现在这个地方，例如 Mozilla 使用 prefetch relation 来预加载页面。 Google 将 [用于设置？] 它的前几个结果设置为以这种方式预取，因此这些页面应该加载得更快。
其他示例是基于浏览器的导航栏（例如 Opera 有其中之一），带有指向下一个、上一个、内容页面等的链接。这也适用于 <link> 元素
【讨论】：
【参考方案4】：rel也可以用来描述其他语义，见the microformats rel docs
【讨论】：
【参考方案5】：通常，属性 rel 和 rev 分别描述前向和后向链接。例如，在列表的分页中，您可以使用 <a href="..." rel="next">Next</a> 和 <a href="..." rev="prev">Prev</a>
请参阅http://www.w3.org/TR/html401/types.html#type-links 了解您可以使用的一些值。
其他人已经解释了 span/div 标签。实际上使用 span 标签的情况并不多，因为您通常可以根据上下文使用诸如em、strong、code 等短语元素。
【讨论】：
错字：rev="prev" 应该是 rel="prev" 不，不应该。再次阅读我的帖子。另见：w3.org/TR/html401/struct/links.html#h-12.3.1【参考方案6】：DIV 不显示背景图像，因为当您的 span 消失时它没有任何内容。
在 span 之后添加一个不间断空格 ( ) 将为其提供内容。
【讨论】：
以上是关于css页面问题的主要内容，如果未能解决你的问题，请参考以下文章