一个导航条的仿做

时间：2010-09-22 来源：chemdemo

无意中打开一个网站，看到精美的导航条，很多网站都有类似的导航，于是差强人意仿做了一个。

网址：http://www.hongshu.com/

直接查看Demo

下面是HTML结构：

代码

<div id="navigation">
    <div class="corner bg_l"></div>
    <div class="navWrap">
        <div class="menu">
            <ul>
                <li><a href=""><span>首页</span></a></li>
                <li class="line">&nbsp;</li>
                <li><a href=""><span>书库</span></a></li>
                <li class="line">&nbsp;</li>
                <li><a href=""><span>排行榜</span></a></li>
                <li class="line">&nbsp;</li>
                <li><a href=""><span>读者社区</span></a></li>
                <li class="line">&nbsp;</li>
                <li><a href=""><span>作者交流</span></a></li>
                <li class="line">&nbsp;</li>
                <li><a href=""><span>分类频道</span></a></li>
            </ul>
        </div>
        <div class="hot">
            <strong>热门：</strong>
            <ul>
                <li><a href="" class="first">超级变变变</a></li>
                <li><a href="">8月PK大赛</a></li>
                <li><a href="">EBK2电子书</a></li>
                <li><a href="">作者福利计划</a></li>
            </ul>
        </div>
        <div class="subMenu">
            <ul>
                <li><a href="">都市·生活</a>|</li>
                <li><a href="">校园·言情</a>|</li>
                <li><a href="">玄幻·奇幻</a>|</li>
                <li><a href="">历史·军事</a>|</li>
                <li><a href="">科幻·灵异</a>|</li>
                <li><a href="">出版·精品</a></li>
            </ul>
        </div>
    </div>
    <div class="corner bg_r"></div>
</div>

样式如下：

* {
    margin: 0;
    padding: 0;
}
body {
    font: 12px Tahoma, Verdana, Arial, sans-serif;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
li {
    list-style: none;
    float: left;
}
#navigation {
    width: 980px;
    _
    margin: 2em auto;
}
.corner, .navWrap, .menu .line {
    background: url(http://www.hongshu.com/img2/proscenia/head_img.png) no-repeat scroll;
}
.corner {
    float: left;
    width: 10px;
    
}
.bg_l {
    background-position: 100% -161px;
}
.bg_r {
    background-position: 0 -161px;
}
.navWrap {
    background-position: 0 -41px;
    background-repeat: repeat-x;
    float: left;
    width: 960px;
    
    overflow: hidden;
}
.menu {
    float: left;
    
    line-
}
.menu .line {
    background-position: -270px -191px;
    width: 10px;
}
.menu a {
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    line-
    margin: 0 7px;
    padding-left: 8px;/* 宽度自适应的圆角 */
}
.menu a span {
    padding-right: 8px;/* 宽度自适应的圆角 */
}
.menu a:hover {
    background: url(http://www.hongshu.com/img2/proscenia/head_img.png) no-repeat 0 -310px;
    _cursor: pointer;
    line-
    _line-
    float: left;
    text-decoration: none;
}
.menu a:hover span {
    background: url(http://www.hongshu.com/img2/proscenia/head_img.png) 100% -356px;
    float: left;
}
.hot {
    float: right;
    
    line-
}
.hot strong {
    color: #FFFF64;
    float: left;
}
.hot ul {
    display: inline;
}
.hot a {
    color: #FFF;
    margin: 0 10px;
}
.hot .first {
    color: #FF0;
}
.subMenu {
    background: url(http://www.hongshu.com/img2/proscenia/icon.png) no-repeat -17px -23px;
    clear: both;
    color: #F1C094;
    width: 960px;
    
    padding-left: 3em;
}
.subMenu a {
    color: #000;
    line-
    margin: 0 10px;
}
.subMenu a:hover {
    color: #CD3335;
}

感觉没什么技术难点，就是sprites的运用以及宽度自适应的背景（链接悬浮那里），可就这破玩意儿，还弄了3个小时，效率啊...