利用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;
}
/*导航部分*/

html+css自定义导航的更多相关文章

  1. 为SharePoint网站创建自定义导航菜单

    转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...

  2. 微信小程序自定义导航栏

    微信小程序需要自定义导航栏,特别是左上角的自定义设置,可以设置返回按钮,菜单按钮,配置如下: 1.在app.json的window属性中增加: navigationStyle:custom 顶部导航栏 ...

  3. Taro多端自定义导航栏Navbar+Tabbar实例

    运用Taro实现多端导航栏/tabbar实例 (H5 + 小程序 + React Native) 最近一直在捣鼓taro开发,虽说官网介绍支持编译到多端,但是网上大多数实例都是H5.小程序,很少有支持 ...

  4. 用CSS做导航菜单的4个理由

    导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...

  5. 03 uniapp自定义导航栏的开发

    在我眼里自定义导航分2类: 原生基础上 || 非原生基础上 总结:项目当中能原生就原生,提高性能 区别 uni-app 自带原生导航栏,在pages.json里配置. 原生导航的体验更好,渲染新页面时 ...

  6. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. 分别用ToolBar和自定义导航栏实现沉浸式状态栏

    一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...

  8. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  9. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

随机推荐

  1. 如果两个人,两台电脑同时登录同一个帐号,同时对同一个账单提交,账单同时被服务器处理,那服务器应该先处理谁的,或者怎么规避这个问题。 非单点登录,重定向,stoken拦截器的问题

    方法一:给用户设置个状态 服务器端坐标记,比如数据库中增加一列,标识是否登陆,登录时先判断这个就行了,不过要考虑非正常退出的情况 http 方法二:在用户表里面 多加一个状态字段,登录成功 改变状态  ...

  2. iptables的启动和关闭【转载】

    原文网址:http://os.51cto.com/art/201103/249049.htm iptables的启动和关闭: 1.启动和关闭iptables 下面将正式使用iptables来创建防火墙 ...

  3. hdu 1028 && hdu 1398 && hdu 1085 && hdu 1171 ——生成函数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1028 就是可以用任意个1.2.3....,所以式子写出来就是这样:(1+x+x^2+...)(1+x^2+ ...

  4. USB CDC & 可变形参

    控制台的三种连接方式: 1.IP网络 2.USB 3.UART 一:介绍USB CDC方式: 1.控制台配置如下: 2.USB Product ID 可以是:0x0000/0x5300/0x0238 ...

  5. [转载]proc_mkdir与proc_create

    1:创建proc文件夹struct proc_dir_entry *proc_mkdir(const char *name, struct proc_dir_entry *parent);参数1:na ...

  6. 机器学习:scikit-learn 文档、深入学习机器学习的思路

    一.scikit-learn 的文档查阅 网页访问 scikit-learn 的文档: scikit-learn.org —— Document —— User Guide: scikit-learn ...

  7. java流类、、、理解不够,流太多不知怎么用好?

    总结:输入流.输出流..子类多.需要加强: package com.da; import java.io.*; public class rtr { public static void main(S ...

  8. WCF宿主Window Service Demo

    尝试了下将服务寄宿在window 服务上.具体步骤如下 整个解决方案截图 一.创建window 服务 Wcf.WinService namespace Wcf.WinService { public ...

  9. C语言在32位和64位机器下数字数据类型的字节数取决于编译器和平台, 主要由编译器决定。

    C语言中数字数据类型的字节数 C声明 32位机器 64位机器 char 1 1 short int 2 2 int   4 4 //整型在32位和64位下都是4个字节 long int   4 8 l ...

  10. 2015.1.15 利用Oracle函数插入表结构 Bulk collect into 不用循环,简洁高效

    如果表结构只对应一个字段,可以 select col1 bulk collect into 变量,不用游标循环,简洁高效 create or replace function get_airway_s ...