0

我正在制作一个网站，并且有一个很酷的导航栏，它看起来像这样：

编辑 - 不小心删除了所有的 css 代码，只有导航固定在底部 - 编辑

我设法让它看起来像这样： http: //pokemasters.freeiz.com/bare.html 我只是没有想法了......我得到了我单独制作的图像，一个导航栏：

＆ 纽扣：

我正在寻找一个全宽导航栏，它可以根据不同的屏幕进行自我调整，位于屏幕底部，活动或悬停时为红色按钮，正常时为白色按钮，该 pokeball 线位于其顶部并覆盖按钮

有人可以指出我正确的方向吗？

4

2 回答 2

1

你想做什么？不清楚。您不需要使用图像 #navigation li a.profile 代替它，您可以使用背景颜色。

#navigation li a.profile {
    width: 240px;
    background-color:#ffffff;
    text-decoration: none;
    }
    #navigation li a.profile:hover {
    background-color:red;
    background-position: -240px;
    text-decoration: none;
    }
    #navigation li a.profile:current {
    background-color:#cccccc;
    background-position: -240px;
    background-repeat: no-repeat;
    text-decoration: none;
    }

或者如果你想全宽导航栏。

#navigation ul {
    list-style: none;
    text-align: center;
    width:100%;
    }

    #navigation li {
    display: inline;
    width:16.6%;
    border-right:1px solid #ccc;
    }
    #navigation li:last-child{
    border-right:none;
    }

如果您想要导航栏上方的“球”图像。请使用“div”的<span>正上方并设置其背景图像“球”图像。#navigation

的财产<span class=ball_Img>

.ball_Img{
  background:url('whatever');
  position:relative;
  z-index:5;
}

#navigation{
 .......//property previous define please write here.
position:relative;
top:-50px;  // you can change according to your situation.      
}
于 2013-11-01T09:33:23.070 回答
0

所以你想要一个全宽的导航栏？元素拉伸自动？或者？你为什么要使用图像来获得颜色？你可以只使用背景：红色；悬停或活动时，背景：正常状态下为白色

于 2013-11-01T08:56:15.983 回答