1

ナビゲーション バーに問題があります。ページをロードすると、ページがステップのように見えることがありますが、更新すると通常の状態に戻ります。私は何が間違っているのか分からないようです！助けてください！！

ウェブサイトはhttp://www.pearsonfoods.com.au

<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>

<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>

<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>

<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>

<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>

</div>
4

2 に答える 2

0

html

<ul class="nav">
   <li class="current"><a href="index.html">Home</a></li>
   <li> <a href="about.html">About Us</a></li>
   <li> <a href="where.html">Where we sell</a></li>
   <li> <a href="foods.html">Our Foods</a></li>
   <li> <a href="contact.html">Contact Us</a></li>
</ul>​

CSS

.nav {
    width: 900px;
    margin: 0 auto;
}
.nav li {
    background-color: rgba(0, 0, 0, 0.72);
    border-radius: 10px 10px 0px 0px;
    width: 180px;
    float:left;
}
.nav li a{
    color:#fff;
    text-decoration:none;
    text-align:center;
    line-height:50px;
    display:block;
}
.nav li a:hover,.nav li.current a{
    color:red;
}

実行例へのリンク

于 2012-11-15T11:04:54.643 に答える
0

マークアップの形式が正しくありません。<a>「インライン要素」と<div>「ブロック要素」です。ブロック要素はインライン要素内に存在できません。

ナビゲーション リストは、単純な順序付けされていないリストとしてより適切に構成されています。

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About us</a></li>
    <li><a href="index.html">Where we sell</a></li>
</ul>

見る？とてもきれいです:)

<li><a>各ブロック フロー要素としてスタイルを設定しdisplay: block;(これは要素のインライン/ブロック セマンティクスには影響しないことに注意してください。これは厳密には視覚的なものです) float: left;、要素に適用し<li>ます。

于 2012-11-15T11:05:15.110 に答える