html+css自定义导航

利用css来编写的导航条，先看看效果：

代码区：

　　html:

<!--导航部分-->
{block name="nav"}
    <nav>
        <div class="nav">
            <ul>
                <li class="first"><a href="{:url('UserManage/index')}"><img src="__PUBLIC__/static/img/logo.jpg"></a></li>
                <li class="menu"><a href="{:url('UserManage/index')}">用户管理</a></li>
                <li class="menu"><a href="{:url('CaseManage/index')}">用例管理</a></li>
                <li class="last">
                    <div id="login_name">
                        <span><i class="layui-icon"></i>&nbsp;{$Think.session.loginUser->name}</span>
                    </div>
                    <div id="logout">
                        <a href="{:url('Login/loginOut')}"><i class="layui-icon"></i>&nbsp;退出</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
{/block}

　　css:

/*导航部分*/
.nav {
    background: #000000;
    height: 60px;
    margin: 0 auto;
}
.nav ul {
    list-style: none;
}
.nav .first {
    float: left;
}
.nav .first img{
    width: 120px;
    height: 60px;
}
.menu {
    float: left;
    line-height: 60px;
    text-align: center;
}
.menu a {
    text-decoration: none;
    color: white;
    display: block;
    width: 85px;
    height: 60px;
    font-size: 15px;
}
.menu a:hover {
    background: #0f0f0f;
    color: green;
}
/*显示用户，退出*/
.nav .last{
    float: right;
    line-height: 60px;
    margin-right: 20px;
    text-align: center;
}
#login_name{
    font-size: 15px;
    color: white;
    display: inline;
}
#logout {
    display: inline;
    margin-left: 20px;
}
#logout a{
    color: white;
    text-decoration: none;
}
/*导航部分*/