0

こんにちは、完璧に機能するナビゲーション バーがありました。次に、ライトボックス効果を追加しました。どちらも完全に機能しますが、私のcssではめちゃくちゃです。CSS をライトボックス効果に div に追加すると、ナビゲーション バーが台無しになります。aタグの関係だと思います。私のコードは以下です

HTML:

<div id="nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#news">Regsiter</a></li>
                <li><a href="#contact">Rules</a></li>
                <li><a href="#about">Photo's</a></li>
                <li><a href="#about">Contact Us</a></li>
            </ul> 
</div>


<div class = "lightbox">
     <a href="images/image1.jpg" rel="lightbox[group]"><img src="images/image1t.jpg" /></a>
     <a href="images/image2.jpg" rel="lightbox[group]"><img src="images/image2t.jpg" /></a>
     <a href="images/image3.jpg" rel="lightbox[group]"><img src="images/image3t.jpg" /></a>
     <a href="images/image4.jpg" rel="lightbox[group]"><img src="images/image4t.jpg" /></a>
     <a href="images/image5.jpg" rel="lightbox[group]"><img src="images/image5t.jpg" /></a>
     <a href="images/image6.jpg" rel="lightbox[group]"><img src="images/image6t.jpg" /></a>
</div>

CSS:

#nav ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

#nav ul li
{
    float:left;
}

#nav a:link,a:visited
{
    display:block;
    width:163.2px;
    height: 35px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#181818;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    line-height: 35px;
}

#nav ul li a:hover
{
    background-color:#989898;
}

// 以下はライトボックスの CSS です

a
{
    border:3px solid #ccc;
    display:block;
    float:left;
    margin:10px;
}

a img
{
    margin:3px;
}

a:hover
{
    border:3px solid #666;
}
img
{
        display:block;
}

私が言ったように。ライト ボックスの CSS を削除すると、ナビゲーション バーは正常に動作します。追加すると、ナビゲーション バーの境界線とすべてが変更されます。両方ともタグが付いていることと関係があると思いますaが、よくわかりません。助けてくれてありがとう。

4

2 に答える 2

1

ライトボックス CSS をライトボックス内の要素にのみ適用します。

.lightbox a{
  border:3px solid #ccc;
  display:block;
  float:left;
  margin:10px;
}

.lightbox a img{
  margin:3px;
}

.lightbox a:hover{
  border:3px solid #666;
}
.lightbox img{
  display:block;
}

デモ: http://jsfiddle.net/42BjW/ (ライトボックス JS を持っていないため、明らかにライトボックス自体が機能していません)

于 2013-04-03T23:32:28.640 に答える
1

.lightbox後のクラスの前にライトボックスCSSを追加するだけです

于 2013-04-03T23:34:07.063 に答える