0

私はコンピューター サイエンスと Web 開発を専攻している大学生なので、まだすべてを学んでいます。

私のクライアントの 1 人にブロガーがいて、ナビゲーション バーの作成やリンクの作成など、いくつかのことを実行できるかどうか尋ねられました。ナビゲーション バーを作成した後、彼女のコメントがすべてめちゃくちゃになっていることに気付きました。それがナビゲーションバーのCSSなのか、それとも何か他のものなのかはわかりません。

ナビゲーション バーの私のコード:

<style>
#logo-bloglovin:hover,#logo-bloglovin:active { background-position:0 -64px; }

#logo-facebook
{
background-position:-210px 0px;
}

#logo-facebook:hover,#logo-facebook:active { background-position:-210px -64px; }

#logo-instraram
{
background-position:-420px 0px;
}
#logo-instraram:hover,#logo-instraram:active { background-position:-420px -64px; }

#logo-googleplus
{
background-position:-660px 0px;
}

#logo-googleplus:hover,#logo-googleplus:active { background-position:-660px -64px; }

#logo-contact
{

background-position:-880px 0px;
}
#logo-contact:hover,#logo-contact:active { background-position:-880px -64px; }


ul.chicnav {
border: none !important;
display: block;
list-style: none;
}

li{
display: inline-block ;
}

ul.chicnav li a {
width:210px;
height:62px;
text-decoration:none;
display:block;
border: none !important;
background: url('http://i47.tinypic.com/280nmtx.png') 0 0 no-repeat;
}

ul.chicnav li a:hover {
background-color: transparent !important;
}

</style>

<ul class="chicnav">
<li><a href="http://www.bloglovin.com/blog/3798040/chic-fashion-world" id="logo-bloglovin" > </a></li>
<li><a href="http://www.facebook.com/pages/Chic-Fashion-World/248420155275530" id="logo-facebook" > </a></li>
<li><a href="http://instagram.com/borka12/" id="logo-instraram" > </a></li>
<li><a href="https://plus.google.com/109438806289588533953/posts" id="logo-googleplus" > </a></li>
<li><a href="http://chicfashionworld.blogspot.com/p/contact.html" id="logo-contact" > </a></li>

</ul>

ブログはchicfashionworld.comにあります。chicfashionworldtest.blogspot.comでいくつかの改良を加えたテスト ページを作成しました。私に何か提案があれば、教えてください。

4

1 に答える 1

1

OK、これが元のコードで、少しクリーンアップされています。

<style>
#logo-bloglovin:hover, #logo-bloglovin:active{ background-position:0 -64px; }

#logo-facebook{ background-position:-210px 0px; }
#logo-facebook:hover, #logo-facebook:active{ background-position:-210px -64px; }

#logo-instraram{ background-position:-420px 0px; }
#logo-instraram:hover, #logo-instraram:active{ background-position:-420px -64px; }

#logo-googleplus{ background-position:-660px 0px; }
#logo-googleplus:hover, #logo-googleplus:active { background-position:-660px -64px; }

#logo-contact{ background-position:-880px 0px; }
#logo-contact:hover, #logo-contact:active{ background-position:-880px -64px; }


ul.chicnav {
  border: none !important;
  display: block;
  list-style: none;
}

li{ display: inline-block; }

ul.chicnav li a {
  width:210px;
  height:62px;
  text-decoration:none;
  display:block;
  border: none !important;
  background: url('http://i47.tinypic.com/280nmtx.png') 0 0 no-repeat;
}

ul.chicnav li a:hover { background-color: transparent !important;}
</style>

<ul class="chicnav">
  <li><a href="http://www.bloglovin.com/blog/3798040/chic-fashion-world" id="logo-bloglovin" > </a></li>
  <li><a href="http://www.facebook.com/pages/Chic-Fashion-World/248420155275530" id="logo-facebook" > </a></li>
  <li><a href="http://instagram.com/borka12/" id="logo-instraram" > </a></li>
  <li><a href="https://plus.google.com/109438806289588533953/posts" id="logo-googleplus" > </a></li>
  <li><a href="http://chicfashionworld.blogspot.com/p/contact.html" id="logo-contact" > </a></li>
</ul>

23 行目に注意してください。li{ display: inline-block; }? それがあなたの問題の原因だと思います。おそらくそれをに変更しul.chicnav li{ display: inline-block; }ます。その理由は、ナビゲーション内の要素だけでなくli、ページ上のすべての要素を作成しているからです。inline-block

于 2013-02-15T18:32:36.067 に答える