标签: nav

我想给我的顶部导航菜单按钮单独的颜色.例如,我希望"主页"菜单按钮的颜色与"关于"菜单按钮的颜色不同.有谁可以帮助我这个.我的CSS太可怕了.

有没有任何WordPress插件可以做到这一点.

我希望有人帮助我.提前致谢.

托马斯

我正在开发一个其他人在我之前工作的网站,我必须复制他们制作的导航,但我无法在源代码中找到他们用于导航背景的任何地方.

http://dl.dropbox.com/u/47171002/Untitled.png

问题是我查看了源代码,但无法在任何地方找到它.它不是资源中的图片,它不在HTML中,也不在CSS中.

那导航色是怎么到达那里的？

该网站是www.allaboutwinecellars.com

我试图将我的导航元素设置为中心,但它不适用于旧版本的Internet Explorer或Chrome.它也不会改变风格.我怎样才能让这个中心化并改变？这是代码:

导航:

<nav id="Nav">
    <a href="TMR Library.html">Library</a> |
    <a href="TMR Contact.html">Contact</a> |
    <a href="TMR About.html">About</a>
</nav>

CSS

#Nav {
    margin:0 auto;
    font-size: 40px;
    color: #22b14c;
    font-family: "Papyrus";
}

我希望我的元素具有背景色填充，我尝试了以下操作，但没有用，如何对它应用颜色填充？谢谢

<nav id="Nav" bgcolor="#000000">
        <a href="index.html">Home</a> |
        <a href="Gallery.html">Library</a> |
        <a href="Contact.html">Contact</a> |
        <a href="About.html">About</a>
</nav>

请看看这个:

这是我的HTML:

    <nav id="mainNav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Our Projects</a></li>
            <li><a href="team.html">Our Team</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

而我的css:

#mainNav ul li {
    padding-left: 10px;
}

#mainNav ul li:hover {
    background-color: rgba(0,0,0,.2);
    color: #fff;
    cursor: pointer;
}

仅当我将光标放在文本链接上方并单击时,才会激活链接.我想能够点击较暗的"li"背景中的任何地方并激活相应的链接.这怎么可能？

http://jsfiddle.net/afTqb/

每当我单击导航栏上的文本时,它都可以正常工作,但是在文本周围的彩色框上,它不起作用.如何解决这个问题？

谢谢

// navigation
ul 
{
    text-align: left;
    display: inline;
    padding: 15px 4px 17px 0;
    list-style: none;
}
ul li 
{
    font-family: 'century gothic', arial, sans-serif;
    color: #fff;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #4479BA;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: solid 1px #20538D;
    z-index: 10; 
}
ul li:hover 
{
    background: #3E6FAB;
    color: #fff;
}
ul li …

我一直在尝试使用html5标记格式化新的网页标题/导航栏.我很难让我的CSS正确地格式化.使用div和表我能够产生以下内容:

我想在不使用div或表的情况下生成上面的图像,以下是我的尝试无效的摘要.我相信我的理解display:table-cell是缺少某些东西.

更改为HTML下方,使用下面的CSS属性display:table,display:table-row,display:table-cell,等.导致一个不受欢迎的锚高度 - 我用一些开发工具戳了一下,我相当确定锚高度是问题.(完整的CSS在这个JsFiddle上):

<header>
<nav>
    <img class="logo" src="img.png"/>
    <a href=""><h1>Home</h1></a>
    <a href=""><h1>Blog</h1></a>
    <a href=""><h1>About</h1></a>
    <a href=""><h1>Contact</h1></a>
</nav>
</header>

试图设置锚和标头标签max-height:100px不起作用(以及少数其他尝试),它一直计算到~130px.

请参阅JsFiddle获取代码.

我有一个基于列表的导航栏.看起来像那样:

我想知道如何在屏幕右侧的网站上获取Logout列表点.我已经通过添加清晰的listitems来尝试它,但这只是一个肮脏的解决方法,并不适用于每个屏幕分辨率.

我的列表看起来像这样:

<ul runat="server" id="tabs">
   <li class="test">
   <a href="DetailView.aspx?call=104"><span class="tab">  
      <strong>EnterData</strong></span></a>
   </li>
   <li class="test">
     <a href="Overview.aspx"><span class="tab">
     <strong>Overview</strong></span></a>
   </li>
   <li class="test">
     <a href="Logout.aspx"><span class="tab">
     <strong style="text-align: right">Logout</strong></span></a>
   </li>
</ul> 

我的问题是:我能把这个项目搞定吗？如果这不适用于列表,我会很高兴看到一种不同的解决方案.我希望我能够表明我的问题是可以理解的.谢谢你的回答!

我试图通过媒体查询在这里创建一个响应式设计 - 到目前为止它一直很顺利,虽然我只是碰壁了!我的标题中有一个很长的h1,所以当屏幕变得足够小时,它就不适合 - 并且会破坏响应的想法.

我要问的是,是否可以在获取时更改h1中的内容 - 让我们说500px宽？(例)

现在我的h1是"CARSTEN ANDERSEN",我希望它能以500px改为"CARSTEN".

提前致谢

我正在尝试使用堆叠的导航器来制作带有导航器丸的垂直菜单。问题在于它似乎不起作用。它保持“水平”值。我发现解决方案未实现堆叠的导航，但我需要以这种方式使用。

实现这个：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

我曾尝试使用旧版本，但随后我的网页的其余部分都发生了更改，并且我不想这么做。

<ul class="nav nav-pills nav-stacked">
<li class="nav-item">
<a class="nav-link active" href="#">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 4</a>
</li>
</ul>