话不多说，看代码：

html部分

<body>

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>

    <li><a href="#">Our Services</a></li>

    <li><a href="#">Our Work</a></li>

    <li><a href="#">News</a></li>

    <li><a class="last" href="#">Contact</a></li>

  </ul>

</body>

css处理

ul {

  padding:;

  margin:;

  list-style: none;

  width: 980px;

  float: left;

  background: #FAA819;

}

ul li {

  float: left;

}

ul a {

  display: block;

  padding: 0.2em;

  line-height: 2.1em;

  text-decoration: none;

  color: #fff;

}

ul a:after {

  content: " |";

}

ul a.last:after {

  content: "";

}

注意的是，如何添加分割线是一个麻烦。可以采用含有分割线的背景图片加载到a标签里，但这样加载出来效果比较慢，也可以采用a:after {content: " |";}，这样其实也有点麻烦，暂时想不出其他好方法。

效果图：

simple水平导航条的更多相关文章

  1. CSS水平导航条和纵向导航条

    问题描述:         使用CSS制作水平导航条和纵向导航条   问题解决:        (1)水平导航条            1.1 效果预览:                   1.2 ...

  2. layui水平导航条三级

    需求 需要做一个顶部的水平导航条,有三级,展开的时候二级和三级一起展开,结果如图: 效果 一级菜单 二级标题   三级菜单 三级菜单 二级标题   三级菜单 三级菜单 一级菜单 二级标题   三级菜单 ...

  3. HTML布局水平导航条2制作

    前两个博文导航条都不是铺满水平的浏览器的,很多导航条样式都是随着浏览器的移动,是100%.此外前两个博文导航条都是块状点击的,也就是给a标签加宽高,设置成块状显示,点击的时候不一定要点文字,只要点击该 ...

  4. HTML布局水平导航条1制作

    该文是用css制作个导航条,用竖线分隔,导航条是点击的多个区块.步骤:ul里设置需要数量的li,li中加上a链接给ul加样式,去掉默认的前面的点给li设置左浮动,让ul里的li横向排列a链接设置成块状 ...

  5. div自定义的滚动条 （水平导航条）

    <!DOCTYPE html> <html> <head> <title></title> <style> div{ /* wi ...

  6. css -- 导航条

    1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...

  7. CSS列表及导航条

    大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条.   垂直导航条 注意要点: 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0. 以em设置 ...

  8. [前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

    在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...

  9. ch6 列表和导航条

    为列表添加定制的项目符号 可使用list-style-image属性:缺点是对项目符号图像的位置的控制能力不强. 常用的方法:使用list-style-type来关闭项目符号,将定制的项目符号作为背景 ...

随机推荐

  1. DATASNAP多表提交之事务控制之通用方法

    ERP系统的单据,总是些主从表结构,有一个主表,N个子表,子表又有子表,形成N层,单据数据提交时,主从表数据都要提交,为了保证数据的完整性,必须提供事务控制,要么都提交成功,有一个提交失败所有的提交都 ...

  2. HDU 4597 Play Game (DP，记忆化搜索，博弈)

    题意:Alice和Bob玩一个游戏,有两个长度为N的正整数数字序列,每次他们两个,只能从其中一个序列,选择两端中的一个拿走.他们都希望可以拿到尽量大的数字之和, 并且他们都足够聪明,每次都选择最优策略 ...

  3. 如何将mysql表结构导出成Excel格式的（并带备注）

    http://www.liangchan.net/liangchan/4561.html 1.使用一个mysql管理工具:SQLyog,点击菜单栏“数据库”下拉的最后一项: 导出的格式如下: 2.要想 ...

  4. redis list 使用

    参考:http://redis.cn/commands.html#list BLPOP key [key ...] timeout删除,并获得该列表中的第一元素,或阻塞,直到有一个可用 BRPOP k ...

  5. Excel设置数据有效性实现单元格下拉菜单的3种方法(转）

    http://blog.csdn.net/cdefu/article/details/4129136 一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的“数据”→“有效性”→出 ...

  6. Educational Codeforces Round 2 E. Lomsat gelral 启发式合并map

    E. Lomsat gelral Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/600/prob ...

  7. Codeforces Round #276 (Div. 1) B. Maximum Value 筛倍数

    B. Maximum Value Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/484/prob ...

  8. delphi 14 内容编辑

    撤销 重做 - 复制 剪切 粘贴 删除 - 全选 不选       ///编辑 ///撤销    WebBrowser1.ExecWB(OLECMDID_REDO ,1); ///重做    WebB ...

  9. 关于MIUI悬浮窗权限问题的解决方案

    先扯会....好久没写Blog了....这段时间有点小忙...瞎忙.....忙的自己都感觉都不应该.....严重影响了生活质量......生活的幸福指数!!!.....到现在还特么的单身!!!求介绍啊 ...

  10. SQL Server日期函数总结

    获得一个月的天数:首先到得一个月最后一天的日期,通过 SQL Server 日期函数 day() 取得日期中的“天 ”部分 获得 2008 年 2 月份的天数:select day(cast('200 ...