我正在制作一个网站，并且有一个很酷的导航栏，它看起来像这样：
编辑 - 不小心删除了所有的 css 代码，只有导航固定在底部 - 编辑
我设法使它看起来像这样：http://pokemasters.freeiz.com/bare.html 我只是没有想法......我得到了我单独制作的图像，一个导航栏：
&按钮：
我正在寻找一个全宽导航栏，它可以根据不同的屏幕进行调整，位于屏幕底部，活动或悬停时为红色按钮，正常时为白色按钮，上面有 pokeball 线，并且覆盖按钮
有人能指点我正确的方向吗？？
【问题讨论】：
标签： html css customization shape navbar
你想做什么？不清楚。您不需要在#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;
}
如果您想要导航栏上方的“球”图像。请使用#navigation 'div' 上方的<span> 并设置其背景图像'ball' 图像。
<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.
}
【讨论】：
所以你想要一个全宽的导航栏？元素自动拉伸？或者？为什么要使用图像来获得颜色？你可以只使用背景：红色；悬停或活动时，背景：正常状态下为白色
【讨论】：