0

我是一名主修计算机科学和网络开发的大学生，所以我还在学习一切。

我的一个客户有一个博主，她问我是否可以做一些事情，比如制作导航栏和链接等等。因此，在我制作导航栏后，我注意到她的评论都搞砸了。我不确定是导航栏中的 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

好的，这是您的原始代码，稍微清理了一下：

<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 回答