Question

我的css页脚文件如下

body {
    background:url(wood1.jpg) repeat;
}  

#footer {
    position:fixed;
    bottom:0px;
    margin:0px;
    right:0px;
    left:0px;
    padding:0px;
    height:40px;
    width:100%;
    font-family:Arial;
    text-shadow:1px 1px 1px black;
    border-top:1px solid rgba(0,0,0,0.5);
    background:rgba(0,0,0,0.25);
    box-shadow:inset 0 3px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),
    inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 20px rgba(0,0,0,0.3);
} 

#footer_menu.homeButton {
    border:none;
    background:none;
}

#footer-menu.homeButton a {
    background-image: url("button.png");
    background-repeat: no-repeat;
    background-position:center;
    height:70px;
    padding:5px 8px 50px 15px;
    border:none;
    width:70px;
}

#footer_menu.homeButton:hover a {
    background:none;
}

#footer_menu.homeButton a:hover {
    background:url(homebutton2.jpg);
    background-repeat: no-repeat;
    background-position:center;
}

我的页脚html文件是

<!DOCTYPE html>
<html>
<head>
    <title>This is index file for Footer</title>
    <link rel="stylesheet" type="text/css" href="footer1.css"/>
</head>
<body>
    <div id="footer">
        <ul id="footer-menu">
            <li class="homeButton"><a href="#"></a></li>
        </ul>
    </div>
</body>
</html>

当我在浏览器中运行时，它不会显示主页按钮。页脚中出现黑点。请为此问题提供解决方案。什么时候，我会给左上角的背景位置，它不会移动图像。

Answer 1

你的CSS seletor是：

#footer_menu.homeButton

这是一个id为footer_menu的项目和homeButton的类。如果它是一个子元素，那么你应该添加一个空格：

#footer_menu .homeButton

这是一个id为#footer_menu的项目和一个带有homeButton类的子项

Answer 2

在css下方删除点

ul {
    list-style: none
    }

选中此DEMO

如上所述，在选择器之间添加空格。

#footer_menu .homeButton

Answer 3

你必须了解class和id规则以及如何在你的风格中调用主题，如果你想在这个特定的例子中设置你的页脚样式，你必须这样命令：

#footer{ your codes are here }

如果你想在你的div中设置另一个id，你必须知道footer-menu是#footer的孩子，并且必须是这样的命令

#footer > #footer-menu { your codes are here }

如果你想为特定的id和class设置风格，这就是它的风格
#iD > .class { your codes are here }
好好看看这个Css footer not showing up
我认为你必须制作z-index = 1

css页脚图像将无法显示

3 个答案: