Question

我尝试使用活动状态向用户显示他们所在的页面。我创建了一个div类＆＃34; nav-active＆＃34;周围和锚标签，如下所示。

<li><div class="nav-active"><a href="index.html">Blog</a></div></li>

我是这样做的，这样我就可以根据导航链接的字符数量使背景动态变化。

.nav-active {
background: #ff4b33; /* Old browsers */
background: -moz-linear-gradient(top,  #ff4b33 0%, #ca2913 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4b33), color-stop(100%,#ca2913)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* IE10+ */
background: linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4b33', endColorstr='#ca2913',GradientType=0 ); /* IE6-9 */

height:70px;
margin-top: -30px;
padding: 0 15px;

因为填充，取决于我在链接上移动的页面。

我确定有更好的方法可以做到这一点，问题是如何？

非常感谢任何帮助。

Answer 1

直接将背景应用于链接样式，如下所示：

<li><a class="nav-active" href="index.html">Blog</a></li>

为防止您的链接根据您所在的页面而改变大小，请为所有链接设置定位，并为.navactive设置背景的样式：

#nav li {
    position: float;
}

#nav li a {
    display: block;
    padding: 0 15px;
    ...
}
#nav li a.nav-active {
    -webkit-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); 
    ...
}

CSS3导航链接背景

1 个答案: