首页 > 代码库 > html+css自定义导航
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> {$Think.session.loginUser->name}</span> </div> <div id="logout"> <a href="{:url(‘Login/loginOut‘)}"><i class="layui-icon"></i> 退出</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自定义导航
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。