Question

我正在创建一个网站，虽然它有一个很酷的导航栏，假设看起来像这样：

编辑 - 意外删除了所有的css代码，只将导航固定在底部 - 编辑

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

＆安培;按钮：

我正在寻找一个全宽导航栏，它可以自动调整到不同的屏幕，位于屏幕的底部，红色按钮处于活动状态或悬停状态，白色按钮正常，其中有一个pokeball线正好位于其上方覆盖按钮

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

Answer 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;
    }

如果您想在导航栏上方显示“球”图像。请使用<span>'div'上方的#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.      
}

Answer 2

所以你想要一个全宽导航栏？元素伸展自动？要么？你为什么用图像来制作颜色？你可以使用背景：红色;悬停或活动时，背景：白色正常状态

网站的自定义导航栏（html / css）

2 个答案: