1

编辑：这是一个 jsFiddle：http: //jsfiddle.net/7hSny/

我正在尝试在 CSS 中定位带有图像的链接。这是我喜欢如何拥有它的预览：

预览 http://piclair.com/data/odjkf.jpg

Words Home、Campagne 等需要在菜单栏中居中。HTML 现在可能很难看，我尝试了很多东西，但我无法正确定位它。

这是我的 HTML：

<div id="navigation">
<ul id="nav">
<li><div id="current_page"><p class="navlink"><a href="home.html"><img src="img/Menu_Home_Selected.png"></a></p></div></li>
</ul>

<!-- end of navigation -->
</div>

这是CSS：

#navigation{
background-image: url(img/Navbar.png);
background-repeat: no-repeat;
width:955px;
color: #FFF;
float: left;
border:1px solid blue;
}

#current_page {
margin: -22 0 0 0px; 
width:164px;
min-height: 124px;
background-image: url(img/Selected.png);
background-repeat: no-repeat;
}

#nav {
min-height: 28px;
margin: 5 0 0 -14px;
}

#nav ul, li {
list-style: none;
}

#nav li {
width:164px;
}

.navlink p (
display: block;
margin: 35 35 35 35px;
}

现在它看起来像这样： 预览 http://piclair.com/data/mdc5z.jpg

4

3 回答 3

1

关于您的标记有几件事可以优化（正如您提到的，“丑陋”）。不要在可以使用网络颜色的地方使用图像。对于图像文本，将图像表示的实际文本放入 html 并background-image用于 css 中的实际 jpg。垂直居中并不像应有的那么容易（除非您使用表格单元格），但在很多情况下您可以使用顶部/底部填充或行高。

这是一个更新了一些东西的小提琴。希望这可以帮助。

另外，请查看这篇博客文章，了解各种垂直对齐方法。如果我的不行，其中之一应该对你有用。

于 2013-01-02T16:52:57.363 回答
0

我希望这能解决它。一旦我知道这是否是你想要的，我会更新其余的细节。

http://jsfiddle.net/7hSny/7/

不过我更正了html。

    <div id="navigation">
<ul id="nav">
<li><div id="current_page"><p class="navlink"><a href="home.html"><img src="http://i45.tinypic.com/30ihnkk.png"></a></p></div></li>
</ul>

<!-- end of navigation -->
</div>
于 2013-01-02T14:50:40.823 回答
0

我建议您使用与gettyimages（及其 css spritesheet ）相同的技术并运行一个简单的 css spritesheet。这样，您将更好地利用语义和样式。

考虑一个带有列表的导航：

<ul class='nav'>
  <li class='home'><a href='#'>Home</a></li>
  <li class='campagne'><a href='#'>Campagne</a></li>
  ...
</ul>

然后，您使用简单的 CSS 对其进行样式化：

ul.nav
{
   display: block;
   height: 50px;
   margin: 0;
   padding: 0;
   list-style: none;
}

ul.nav li
{
   float:left;
   display: block;
}

ul.nav li a
{
   display: block;
   height: 100%;
   background: url(img/nav.jpg) no-repeat 0px 0px;
   text-indent: -9999px;
}

然后使用一个简单的精灵表来“绘制”你的按钮（精灵表教程）：

ul.nav li.home a
{
   width: 50px;
   background-position: 0px 0px;
}

ul.nav li.home a:hover { background-position: 0px -50px; }

ul.nav li.campagne a
{
   width: 80px;
   background-position: 50px 0px;
}

ul.nav li.campagne a:hover { background-position: 50px -50px; }
于 2013-01-02T16:24:42.410 回答