/* ul li以横排显示 */

/* 所有class为menu的div中的ul样式 */
div.menu ul
{
list-style:none; /* 去掉ul前面的符号 */
margin: 0px; /* 与外界元素的距离为0 */
padding: 0px; /* 与内部元素的距离为0 */
width: auto; /* 宽度根据元素内容调整 */
}
/* 所有class为menu的div中的ul中的li样式 */
div.menu ul li
{
float:left; /* 向左漂移,将竖排变为横排 */
}
/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71; /* 背景色 */
border: 1px #4e667d solid; /* 边框 */
color: #dde4ec; /* 文字颜色 */
display: block; /* 此元素将显示为块级元素,此元素前后会带有换行符 */
line-height: 1.35em; /* 行高 */
padding: 4px 20px; /* 内部填充的距离 */
text-decoration: none; /* 不显示超链接下划线 */
white-space: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
div.menu ul li a:hover
{
background-color: #bfcbd6; /* 背景色 */
color: #465c71; /* 文字颜色 */
text-decoration: none; /* 不显示超链接下划线 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
div.menu ul li a:active
{
background-color: #465c71; /* 背景色 */
color: #cfdbe6; /* 文字颜色 */
text-decoration: none; /* 不显示超链接下划线 */
}
<div class="menu">
<ul>
<li><a href="javascript:void(0);">主页</a></li>
<li><a href="javascript:void(0);">工作日志</a></li>
<li><a href="javascript:void(0);">设备运行记录</a></li>
<li><a href="javascript:void(0);">其他</a></li>
</ul>
</div>

ul li做横向导航栏例子的更多相关文章

  1. 用ul、li做横向导航

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  2. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  3. 如何做一个导航栏————浮动跟伪类(hover)事件的应用

    我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...

  4. 利用CSS制作背景变色的横向导航栏

    1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...

  5. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

  6. css3中做3D导航栏

    看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...

  7. 为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

  8. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

  9. 运用<ul><li>做导航栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 解决Xcode在debug时不在断点处停止的方法<转>

    搞了老半天不知道为什么 后来查了一下才解决问题,多谢原创作者的贡献. 新年后的第一发! -------------------------------- 前几天在开发的时候,Xcode设置断点后依然无 ...

  2. ffmpeg一揽子

    avformat_alloc_output_context2().在基于FFmpeg的视音频编码器程序中,该函数通常是第一个调用的函数(除了组件注册函数av_register_all()).avfor ...

  3. linux系统 使用git图形化管理工具———gitk

    运行安装命令: sudo apt-get install gitk 运行命令打开gitk : gitk

  4. 第一天:tomcat相关知识和浏览器的访问机制

    1.tomcat的目录结构 1)bin目录:启动和关闭tomcat以及其他的脚本命令  2)conf目录:存放各种配置文件 a.server.xml配置文件的配置: *<host/>标签: ...

  5. spring分模块开发

  6. Go语言-变量和常量

    我们在这里需要优先说明的是用于声明变量的关键字var,以及用于声明常量的关键字const.要知道,绝大多数的数据类型的值都可以被赋给一个变量,包括函数.而常量则不同,它只能被赋予基本数据类型的值本身. ...

  7. 生产者与消费者-1:N-基于list

    一个生产者/多个消费者: /** * 生产者 */ public class P { private MyStack stack; public P(MyStack stack) { this.sta ...

  8. loj10104 [POI 2008]Blockade

    传送门 分析 我们知道对于一个割点,我们如果去掉它就会使原来的图被分为若干块,则这是我们将所有块包含的点的个数两两相乘即可,而如果不是割点则对于图的连通性没有影响.注意在最后要加上2*(n-1)表示去 ...

  9. Entity Framework Tutorial Basics(24):Update Single Entity

    Update Existing Entity using DBContext in Disconnected Scenario: In this chapter, you will learn how ...

  10. Thread.currentThread().getContextClassLoader() 和 Class.getClassLoader()区别

    查了一些资料也不是太明白两个的区别,但是前者是最安全的用法 打个简单的比方,你一个WEB程序,发布到Tomcat里面运行.首先是执行Tomcat org.apache.catalina.startup ...