Question

我在标题下面创建，但它不会显示任何图标，它会在同一个地方显示主页，博客，邮件，联系人链接。

我的HTML文件是

<!DOCTYPE html>
<html>
    <head>
        <title> Index file for header</title>
        <link rel="stylesheet" type="text/css" href="header.css"/>
    </head>
    <body>
        <div id="container">
            <ul id="menu">
                <li><a href="#" class="home">HOME</a></li>
                <li><a href="#" class="blog">BLOG</a></li>
                <li><a href="#" class="mail">MAIL</a></li>
                <li><a href="#" class="contact">CONTACT</a></li>
            </ul>
        </div>
    </body>
</html>

我的CSS文件如下：在容器主页，博客，邮件，联系人菜单中的css文件中显示如下一个。

#container{
    background:url("back.jpg") repeat;  
    background-position:0 0;
    height:178px;
    width:1000px;  
}
ul#menu{
    list-style:none;
    padding:0;
    margin:0;
    position:relative;  
}
ul#menu li a{    
    background-position:left top;
    position:absolute;
    text-indent:70px;
    display:block;
    background-repeat:no-repeat;
    float:left;
    clear:both;
}
ul#menu li a:hover{
    color:white;
    background-position:left center;
}
ul#menu li a .home {
    background-image: url('homeicon.jpg');
    width:50px; height:56px;
    left:80px;
    top:100px;
}
ul#menu li a .blog {
    background-image: url('blogicon.jpg');
    width:50px; height:56px;
    left:80px;
    top:120px;
}
ul#menu li a .mail {
     background-image: url('mailicon.jpg');
     width:50px; height:56px;
     left:80px;
     top:140px;
}  
ul#menu li a .contact {
    background-image: url('contacticon.jpg');
    width:50px; height:56px;
    left:80px;
    top:160px;
}

请给出解决方案。

Answer 1

首次问题变更

ul#menu li a .mail

到

ul#menu li a.mail

正确使用css选择器如下

div p   Selects all <p> elements inside <div> elements

确保imageURL正确并且当前文件夹中有图像。

Answer 2

删除标记a和类标识之间的空格。因为带有背景图像的类是用于标记的，比如ul＃menu。

实施例 ul＃menu li a.home

检查手册：http://www.w3schools.com/css/css_selectors.asp

css图标不会显示在标题中

2 个答案: