gpt4 book ai didi

css 图标不会显示在标题中

转载 作者:行者123 更新时间:2023-11-28 10:19:41 27 4
gpt4 key购买 nike

我在标题下方创建,但它不会显示任何图标,它会在同一位置显示主页、博客、邮件、联系人链接。

我的 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;
}

请给出解决方案

最佳答案

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

例子ul#menu li a.home

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

关于css 图标不会显示在标题中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24082646/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com