html+css自訂導航

標籤：span   nbsp   顯示   ack   導航   20px   利用   margin   png   

    利用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">&#xe612;</i>&nbsp;{$Think.session.loginUser->name}</span>                    </div>                    <div id="logout">                        <a href="{:url(‘Login/loginOut‘)}"><i class="layui-icon">&#xe609;</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;}/*導航部分*/

 

html+css自訂導航