1

我有一个导航栏，对于一个特定的元素，我希望使用 5 种颜色为线条着色，而不是默认的白色下划线，并且想知道这是否可能？

结构如下：

HTML

<div id="underlinemenu" class="clearfix">
    <ul>
        <li class="page_item page-item-67">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-69 current_page_item">
            <a href="#">The Blogs</a>
        </li>
        <li class="page_item page-item-60">
             <a href="#">Meet the Bloggers</a>
        </li>
        <li class="page_item page-item-2">
            <a href="#">Gallery</a>
        </li>
    </ul>
</div>​

CSS

#underlinemenu{
    padding:0;
    margin:0;
    padding-bottom: 30px;
    font-size: 14px;
}

#underlinemenu ul{
    float: left;
    font-weight: bold;
    width: 770px;
    height: 57px;
    background-color: #242129;
    margin: -14px 0 -30px 0;
}


#underlinemenu ul li{
    display: inline;
    float: left;
    color: #ffffff;
    padding: 21px 40px 0px 8px; 
}

#underlinemenu ul li a{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
}

#underlinemenu ul li a:hover{
    color: #ffffff;
    padding-bottom: 16px;
    border-bottom: 3px solid #ffffff;
}

.current_page_item {
    color: #ffffff;
    padding: 21px 10px 16px 5px !important;
    margin: 0 30px 0 3px;
    border-bottom: 3px solid #ffffff;
}

​</p>

小提琴

http://jsfiddle.net/SMrYF/

颜色代码

#a3ad24
#4594cc
#c4262e
#d9709c
#ffa100

任何帮助深表感谢。

更新

样机可以在这里找到：http: //img59.imageshack.us/img59/2866/navbarf.jpg

4

4 回答 4

2

-剪掉之前的答案-

好的，所以我想出了一个替代解决方案。我使用了五个位于每个底部的 div，li宽度为 20%。看起来像一个丑陋的解决方案，但是，嘿，它的工作原理！

http://jsfiddle.net/VdMPL/6/

于 2012-08-13T15:07:34.673 回答
1

几个选项

  • 添加背景图像而不是底部边框（使用静态图像文件）。
  • 为背景图像添加线性渐变（IE9 及更早版本不支持）。
  • 使用border-image样式（IE9 及更早版本不支持）。

如果超链接不是固定宽度，您可以设置background-size（IE9 及更早版本不支持），或为每个超链接添加一个 img 标签（静态，或使用 JS 或 jQuery）并将其缩放为 100% 宽度和固定高度。

使用线性渐变将涉及定义 10 个渐变点（每种颜色 2 个）（假设可以指定超过 2 个渐变点）。

于 2012-08-13T15:40:31.967 回答
1

纯 CSS2 选项

利用伪元素。添加position: relative;到.current_page_item（或者li如果您打算将其用于悬停）。然后...

新答案（解决 IE 错误）

添加以下代码会产生在此小提琴中看到的结果。它与原始答案的不同之处在于让伪元素使用自己的底部边框来制作颜色，而不是background-color伪元素的颜色。这似乎解决了 IE 的愚蠢问题。

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 20%;
    bottom: -3px;
    left: 20%;
    border-bottom: 3px solid #4594cc;
}

.current_page_item:after {    
    left: 40%;
    border-bottom-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;    
    border-bottom-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;    
    border-bottom-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {   
    border-bottom-color: #ffffff;
}

原始答案（在 IE 中有错误，因为它似乎无法理解height: 3px）

添加以下代码（不确定您是否需要hover当前页面的代码，但如果需要我包括在内）会产生在这个小提琴中看到的结果：

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 3px;
    width: 20%;
    bottom: -3px;
    left: 20%;
    background-color: #4594cc;
}

.current_page_item:after {    
    left: 40%;
    background-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;
    background-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;
    background-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {
    background-color: #ffffff;
}

注意：我注意到 IE 在某些情况下似乎存在足够智能来确定高度3px和4px高度之间的差异的问题，这会导致1px在某些点上出现恼人的错位。

于 2012-08-13T16:45:59.450 回答
1

你也可以做一些不圣洁的事情并使用 CSS 渐变。这是一个在 Safari/Chrome 中唯一有效的被破解的小提琴：http: //jsfiddle.net/ASLs3/1/

但正如其他人所说，您可能应该只使用背景图片。

于 2012-08-13T22:50:45.677 回答