左右导航实例

最新推荐文章于 2021-04-21 23:38:25 发布

Cool_xiaocao

最新推荐文章于 2021-04-21 23:38:25 发布

阅读量736

点赞数

分类专栏： web前端文章标签： HTML

本文链接：https://blog.youkuaiyun.com/Cool_xiaocao/article/details/83852093

版权

web前端专栏收录该内容

4 篇文章

订阅专栏

[size=x-large][color=red]带背景图片的横排导航列表[/color][/size]


/* 最外层Div，设置repeat背景图片 */
#nav-list
{
    float:left;
    background:url("../img/nav_bg.gif") repeat-x;
    height:48px;
    width:938px;
}
/* 里层ul，设置居左背景图片 */
#nav-list ul
{
    background:url("../img/nav_l_bg.gif") no-repeat;
    float:left;
    padding-left:10px;
    text-align:center;
}
#nav-list li
{
    float:left;
    line-height:24px;
    height:48px;
    padding:0 12px;
    font-weight:bold;
    font-size:14px;
}
#nav-list li.nav-li-right
{
    background:url("../img/nav_li_right.gif") no-repeat center;
    width:2px;
    padding:0;
}
#nav-list li a
{
    display:block;
    line-height:44px;
    width:88px;
    height:37px;
    color:#FFF;
}
#nav-list li.current a
{
    background:url("../img/nav_li_current.gif") no-repeat;
}
/* 设置鼠标移上去改变背景图 */
#nav-list li a:hover
{
    background:url("../img/nav_li_hover.gif") no-repeat;
    display:block;
    width:88px;
    line-height:44px;
    height:37px;
    color:#FFF;
    text-decoration:none;
}
/* 里层div设置居右背景图片 */
#nav-right
{
    float:right;
    background:url("../img/nav_r_bg.gif") no-repeat;
    height:48px;
    padding-right:9px;
}



<div id="nav-list">
                    <ul>
                        <li class="current"><a href=""><span>首页</span></a></li>
                        <li class="nav-li-right"></li>
                        <li><a href=""><span>关于我们</span></a></li>
                        <li class="nav-li-right"></li>
                        <li><a href=""><span>网站建设</span></a></li>
                        <li class="nav-li-right"></li>
                        <li><a href=""><span>案例展示</span></a></li>
                        <li class="nav-li-right"></li>
                        <li><a href=""><span>域名空间</span></a></li>
                        <li class="nav-li-right"></li>
                        <li><a href=""><span>网站营销</span></a></li>
                        <li class="nav-li-right"></li>
                        <li><a href=""><span>最新动态</span></a></li>
                        <li class="nav-li-right"></li>
                        <li><a href=""><span>联系我们</span></a></li>
                    </ul>
                <div id="nav-right"></div>
            </div>