Question

我正在研究如何使用HTML + CSS创建tabless Web模板的教程，我对以下内容有一些疑问：

我的标题包含 div，ID = logo ，如下所示：

        <div id="header">    <!-- HEADER -->
            <div id="logo">     <!-- My Logo -->
                <h1><a href="#">My web site is cool</a></h1>
                <p id="slogan">
                    My web site is finally online
                </p>
            </div>
                            ......
                            OTHER HEADER STUFF
                            ......
        </div> <!-- Close header -->

与 #header div（及其内容）相关，我有以下CSS代码：

/* For the image replacement of the logo */
h1 {
    background: url(../images/logo.jpg) no-repeat;
    text-indent: -9999px;
    width: 224px;
    height: 71px;
}

h1 a {
    display: block;
    width: 258px;
    height: 64px;
    text-decoration: none;
}

因此，此代码放置了一个图片，而不是标签中的我的网站很酷文字。

我有一些问题要理解 h1 a CSS设置，在教程中说这个CSS设置 for h1 a ：

转向阻止（内联）标题中链接的显示模式，因此我可以设置宽度和高度，现在可以点击徽标的图像

这件事对我来说不是很清楚，我有以下疑问：

我是否要将a元素（内联）转换为块元素，以使其具有相同的基础图像维度（logo.jpg）？

TNX

安德烈

Answer 1

举个例子，

默认情况下，a元素为inline，因此，如果您要执行类似

的操作

CSS

a {background:red; height:210px; width:200px;}

HTML

<a href="#">test</a>

您会注意到width和height属性不起作用。现在要将此元素调整为该宽度，您需要将元素的display属性设置为display:block或display:inline-block

<强> JSFiddle Demo Example

<强> HTML ：

<a href="#">Without display:inline block, width and height set.</a>
<br><br>
<a href="#" class="inline-block">With display:inline block, width and height set.</a>
<br><br>
<a href="#" class="block">With display:block, width and height set.</a>

<强> CSS ：

a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }

Answer 2

如果您要关联图片，则无需提供a高度/宽度甚至display:block。但是，你真的不应该把图像放在h1之内。您最好在a块内h1（使用display:block）并将背景设置为图像，然后隐藏文本。对于网站的用户来说，没有太大区别，但它会从HTML代码中删除图像，使屏幕阅读器更容易，并且在语义上更正确。所以你的代码是：

a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }

关于如何使用CSS使图像可点击的一些疑问

2 个答案: