次のように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 として作成し、位置を使用して対応するボタンに作成しようとしましたが、この解決策は壊れやすく、最適なオプションではありません。
より良い解決策を考えることはできますか?