Question

我的问题是： 1）“房子”图像没有覆盖在块上，而是在它们之间进行着色。 2）有两个块，即使我的代码没有列出两个..

HTML doc：

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="home_page_stylesheet.css">
</head>

<body>
    <div>
        <a href="http://www.webapp.com/home">
            <img src="/Users/<<>>/Desktop/web_app/images/icons/home_icon_selected.png"/>
        </a>
    </div>
</body>

CSS doc：

* {
    background-color: #EAE4C5;
}

 div {
    border: 1px solid white;
    border-radius: 5px;
    height: 50px;
    width: 50px;
    background-color: white;
    text-align: center;
    display: inline-block;
}

我最终得到的是：

enter image description here

Answer 1

添加位置：绝对;到你的CSS然后如果你需要移动DIV你可以使用边距。

Answer 2

将主页图标作为背景应用于div。

这可以使用以下CSS代码完成。更新图像的文件路径。

background-image: url('home_icon_selected.png');

为了使整个div可点击，您应该在a标记内包含以下代码：

<a href="http://www.webapp.com/home">
    <div>

    </div>
</a>

考虑为您的div添加一个类标识符，以便您的代码中可以有多个不同的div。

为什么有两个街区？为什么图像没有覆盖块？

2 个答案: