Question

我下面粘贴的代码是为了在没有文字的中间2个链接上显示图像，并在重置和第四个链接上返回文本。我只为span标记设置了display：none，但它什么也没做。无论如何，在没有使用框架的情况下，无论如何都可以完成我的工作吗？

编辑：示例

<html>
    <head>
        <style type="text/css">
                .class1{color:#000; background-image:url('1.jpg');}
        .class1 span { display: none;}
                .class2{color:#00f; background-image:url('2.jpg');}
        .class2 span { display: none;}
                .class3{color:#0f0; background-image:url('1.jpg');}
        .class3 span { display: none;}
                .class4{color:#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>

Answer 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;}

Answer 2

div标签包含一个内容块。 span标记类似，但包含内联内容。区别？您可以使用span来设置段落内的短语，但div可以包装该段落并将其与其他段落分开。有关div的信息，请参见this，有关信息，请参见this。

经过一些评论：这里是from the horse's mouth:

DIV和SPAN元素与id和class属性一起提供了向文档添加结构的通用机制。这些元素将内容定义为内联（SPAN）或块级（DIV），但不对内容强加其他表示习语。因此，作者可以将这些元素与样式表，lang属性等结合使用，以根据自己的需要和品味定制HTML。

Answer 3

许多UA（用户代理）通常不使用rel属性，但是它指定链接页面与当前页面的关系。

某些伪标准已经出现在这个地方，例如Mozilla使用prefetch relation来预加载页面。谷歌设置[用于设置？]它的前几个结果以这种方式预取，因此这些页面应该加载更快。

其他示例是基于浏览器的导航栏（Opera例如其中之一），其中包含指向下一页，上一页，内容页等的链接。这也适用于<link>元素

Answer 4

rel也可用于描述其他语义，请参阅the microformats rel docs

Answer 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等短语元素。

Answer 6

DIV不会显示背景图片，因为当您的范围消失时，它没有任何内容。

在跨度之后添加非中断空格（＆amp; nbsp;）将为其提供内容。

css页面问题

6 个答案: