gpt4 book ai didi

html - 当前菜单页面元素背景未更改 - CSS

转载 作者:太空宇宙 更新时间:2023-11-04 03:57:56 27 4
gpt4 key购买 nike

我正在尝试获取一个小图形来指定查看器使用 css 所在的页面,但它不会突出显示。这是我的代码:

HTML:

 <ul class="side-nav">
<a href="http://www.cieloazulsantafe.com/nav-test.html"><li><span>Home</span></li></a>
<a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
<span>Sample Page</span></li></a>
</ul>

CSS:

 ul.side-nav span{
margin-left: 50px;
text-decoration: none;
color: #fff;
}
ul.side-nav a li{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
list-style: none;
height: 41px;
width: 250px;
line-height: 2.0;
text-decoration: none;
}
ul.side-nav a li:hover{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
ul.side-nav a li.current-menu-item{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;
}

看起来很简单,但我就是无法更改背景。我知道它是因为它是 li 元素,但我猜“当前菜单项”的顺序是错误的。

网址:http://cieloazulsantafe.com/nav-test.html提前致谢。

最佳答案

您必须为主体命名(给它一个 id)和 li 标签,并在您的 css 中分别引用它们。这是最简单的纯 css 方式。

HTML

<body id="home-body"> // ... on your home page

...

<body id="about-body"> // ... on your about page

您的导航

<li id="home-menu">Home</li>
<li id="about-menu">About</li>

CSS

body#home-body li#home-menu, body#about-body li#about-menu { // style of the active menu item }

您可能想看看我对以下问题提供的回答:How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?

编辑: 这是“纯 css”方式;但根据您的需要,这条路上可能还有其他方法。

关于html - 当前菜单页面元素背景未更改 - CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22517379/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com