如何使用图像和标签（HTML和CSS）创建菜单？

问题描述：

我有一个小问题，我试图制作一个菜单，图像和其他项目与标签，如附图所示，但它不工作。如何使用图像和标签（HTML和CSS）创建菜单？

下图显示了它是如何目前。有错误。

我试过这个代码，但我的 “图片项目” 不站在旁边的 “标签项”：

.sprite-icons { 
 
    background: url(../images/icons/sprite-icons_menu.png) no-repeat top left; 
 
    -webkit-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    width: 33px; height: 30px; 
 
} 
 

 
.sprite-icons.icon_home { 
 
    background-position: 0px 0px; 
 
} 
 
    
 
.icon_home:hover{ 
 
    background-position: -48px 0px; 
 
} 
 
    
 
.sprite-icons.icon_home_active { 
 
    background-position: -48px 0px; 
 
} 
 

 
.sf-menu{ 
 
\t border-bottom: 1px solid black; 
 
\t list-style-type:none; 
 
\t line-height: 1.0; 
 
\t text-align: center; 
 
\t padding: 10px 10px 8px 10px; 
 
\t float: left; 
 
\t width: 99%; 
 
} 
 

 
.sf-menu a{ 
 
\t text-decoration: none; 
 
\t color: #606060; 
 
\t -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; 
 
} 
 

 
.sf-menu a:hover{ 
 
\t color: #ffffff; 
 
\t background-color: #ee1c24; 
 
\t padding: 10px 6px 6px 6px; 
 
\t 
 
} 
 

 
.sf-menu li{ 
 
\t display: inline; 
 
\t padding: 20px; 
 
}

<nav> 
 
    <ul class="sf-menu"> 
 
    <li><a href="" title="Home"> 
 
     <div class="sprite-icons icon_home"> 
 
     </div></a> 
 
    </li> 
 
    <li><a href="">A EMPRESA</a></li> 
 
    <li><a href="">SERVIÇOS</a></li> 
 
    <li><a href="">SISTEMA</a></li> 
 
    <li><a href="">TRABALHE CONOSCO</a></li> 
 
    <li><a href="">CONTATO</a></li> 
 
    </ul> 
 
</nav>

哪有我解决这个问题？

答

更好的解决方案应该是使用伪元素

:before

例子：

ul li 
 
{ 
 
    display: inline-block; 
 
} 
 
.icon-tutti:before { 
 
    content: "\e908"; 
 
} 
 

 
span [class^=icon-] { 
 
    font-size: 1.3em; 
 
    margin-right: 10px; 
 
    color: #ff653e; 
 
}

<ul> 
 
\t <li><a href="#"><span class="icon-tutti"></span></a></li> 
 
     <li><a href="#">Second Element</a></li>    
 
     <li><a href="#">Third Element</a></li> 
 

 
</ul>

您也可以使用图片网址作为内容，但使用的图标应该会更好。例如尝试fontAwesome。

但是图像是菜单的一项，而单词是菜单的其他项目。该图像与菜单中的其他项无关。每个项目导致不同的页面。 –

对不起，我没有注意到。在任何情况下，你可以添加一个类到菜单中的第一个项目，并使用：before在我的答案中显示。只要删除标签“全部”。我将编辑我的示例。 –

如何使用图像和标签（HTML和CSS）创建菜单？

相关推荐