话不多说，看代码：

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. hdu 3038 How Many Answers Are Wrong

    http://acm.hdu.edu.cn/showproblem.php?pid=3038 How Many Answers Are Wrong Time Limit: 2000/1000 MS ( ...

  2. MVC架构和SSH框架对应关系

    MVC三层架构:模型层(model),控制层(controller)和视图层(view).模型层,用Hibernate框架让来JavaBean在数据库生成表及关联,通过对JavaBean的操作来对数据 ...

  3. HTML中RGB颜色查询对照表

    RGB颜色查询对照表     因为兼容性问题,色阶板功能只能在IE浏览器中运行 RGB颜色对照表   #FFFFFF   #FFFFF0   #FFFFE0   #FFFF00   #FFFAFA   ...

  4. 在数据库各种状态下查询DBID的五大类十种方法汇总

    关于DBID: DBID是DataBase IDentifier的缩写,意思就是数据库的唯一标识符. 这个DBID在数据文件头和控制文件都是存在的,可以用于标示数据文件的归属. 对于不同数据库来说,D ...

  5. Android之基于HTTP协议的下载

    Android之基于HTTP协议的下载 http://www.blogjava.net/zh-weir/archive/2010/05/02/319892.html http://www.qianfa ...

  6. Proactor设计模式：单线程高并发

    Boost::Asio为同步和异步操作提供了并行支持,异步支持基于前摄器模式,这种模式的优点和缺点可能比只同步或反应器方法要低. 让我们检查一下Boost::Asio是如何实现前摄器模式的,没有引用基 ...

  7. 如何彻底隐藏iOS7应用的status bar

    用xcode5开发新的iOS游戏,发现一个坑爹的现象,虽然我已经在info.plist里面把Status bar is initially hidden设置成了YES,但在设备上一跑还是看到丑陋的st ...

  8. 关于 JavaScript 中一个小细节问题 （在控制台中直接 {Name:'王尼玛',Age:20} 对象报错问题）

    在 Chrome 浏览器,大家可能遇到这样一个小问题. 随便输入一个 Object 对象  ,比如 {Name:'王尼玛',Age:20} ,将会报错.之前,也从来没去考虑过到底是为啥原因. 今天,刚 ...

  9. Ehcache（01）——简介、基本操作

    http://haohaoxuexi.iteye.com/blog/2112170 目录 1       CacheManager 1.1      构造方法构建 1.2      静态方法构建 2  ...

  10. 深入了解 Dojo 的服务器推送技术

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...