html - 每个按钮上带有自定义图像或图标的 CSS 菜单

Question

我创建了如下的 Html 菜单

<a href="./football.html">Football</a>
<a href="./basketball-.html">Basketball</a>
<a href="./baseball.html">Baseball</a>

然后我的css文件如下:

#main-nav a
{     
   display: block;
   float: left;
   margin: 125px 0px 0px 0px;
   color: #666666;
   border: 1px #C0C0C0 solid;
   background-color: #EEEEEE;
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   width: 106px;
   height: 78px;
   vertical-align: middle;
   line-height: 78px;
   text-align: center;
}
#main-nav a:hover, #main-nav .active
{
   color: #666666;
   background-color: #C0C0C0;
   border: 1px #C0C0C0 solid;
}

我正在尝试通过在每个相应按钮中添加 30*30 足球图标等来对其进行更多自定义

我曾尝试将每张图片制作成 Div 并使用位置将其制作在相应的按钮中，但这种解决方案很脆弱，不是最佳选择。

有更好的解决方案吗？

Answer 1

你可以试试这段代码:

    <div id='main-nav'> <a href="./football.html">Football<div class='icon'></div></a>

<a href="./basketball-.html">Basketball<div class='icon'></div></a>

<a href="./baseball.html">Baseball<div class='icon'></div></a> 
</div>

whit 这个 css:

#main-nav a {
    display: block;
    float: left;
    margin: 125px 0px 0px 0px;
    color: #666666;
    border: 1px #C0C0C0 solid;
    background-color: #EEEEEE;
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    width: 106px;
    height: 78px;
    vertical-align: middle;
    line-height: 78px;
    text-align: center;
    position : relative;
}
#main-nav a .icon {
    height: 30px;
    width : 30px;
    background : red;//change this for the img.
    position : absolute;
    top : 0;
    left  : 35px;
}
#main-nav a:hover, #main-nav .active {
    color: #666666;
    background-color: #C0C0C0;
    border: 1px #C0C0C0 solid;
}

更改 background: url(/path/to/image) 的红色背景

请看看这个jsfiddle .

注意:包括一个<div>介绍一个<a>它在 html5 中有效，但在 html 4.01 中无效。更多信息 here .