1

html/css コードに問題があります。私はポートフォリオ Web サイトを作成しており、上部に水平ナビゲーション バーがあり、.png画像はナビゲーション ボタンとmouse-on/mouse-over効果 (文字はマウスでグレーに変わるはずです) として表示されます。ボタンを水平に並べるのにかなり苦労しましたが、本来あるべき場所に配置されましたが、突然リンクとして機能しなくなり、mouse-on/mouse-over効果がなくなりました.

これは私のコードです：

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<html>
<head>
<title>Menu</title>
<style type="text/css">

body 

{background-image:url('menubg.png');}

{background-color:#FFFFFF;}

#navlist{margin:0;position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:relative;top:0;}
#navlist li, #navlist a{height:64px;display:inline-block;}


#about{left:0px;width:145px;}
#about{background:url('about1.png')}
#about a:hover{background: url('about2.png')}

#amfi{left:0px;width:168px;}
#amfi{background:url('amfi1.png')}
#amfi a:hover{background: url('amfi2.png')}

#personal{left:0px;width:202px;}
#personal{background:url('personal1.png')}
#personal a:hover{background: url('personal2.png')}

#inspiration{left:0px;width:202px;}
#inspiration{background:url('inspiration1.png')}
#inspiration a:hover{background: url('inspiration2.png')}

#cv{left:0px;width:65px;}
#cv{background:url('cv1.png')}
#cv a:hover{background: url('cv2.png')}

#contact{left:0px;width:128px;}
#contact{background:url('contact1.png')}
#contact a:hover{background: url('contact2.png')}
</style>
</head>

<body>
<ul id="navlist">
  <li id="about"><a href="about.htm" target="main"></a></li>
  <li id="amfi"><a href="amfi.htm" target="main"></a></li>
  <li id="personal"><a href="personal.htm" target="main"></a></li>
  <li id="inspiration"><a href="inspiration.htm" target="main"></a></li>
  <li id="cv"><a href="cv.htm" target="main"></a></li>
  <li id="contact"><a href="contact.php" target="main"></a></li>
</ul>
</body>
</html>

これは私のウェブサイトです。ここで、私の問題を見ることができます。

あなたが私を助けることができれば、私は本当に感謝しています!

4

4 に答える 4

0

このようにしてみてください 

#about{left:0px;width:145px;}
#about{background:url('about1.png')}
#about:hover{background: url('about2.png')}

または、このように

#about a{left:0px;width:145px;}
#about a{background:url('about1.png')}
#about a:hover{background: url('about2.png')}
于 2013-07-03T12:37:48.633 に答える
0

あなた<a>には何もwidthありませんheight。何らかの方法でそれらを宣言する瞬間、すべてがうまくいくでしょう 。例の代わりに、要素にプロパティwidthを与えることをお勧めしますheight<a><li>#about a{width:145px;height:64px}#about{width:145px;height:64px}

于 2013-07-03T12:42:51.263 に答える