话不多说，看代码：

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. [iOS 多线程 & 网络 - 2.1] - 解析json

    A.iOS中json的基本使用 1.解析json数据 (1)json反序列化 对象{}格式 {key : value, key : value,...} 的键值对的结构可以反序列化为OC中的NSDic ...

  2. Unity3D之Mecanim动画系统学习笔记（八）：Animator Layers（动画分层）

    解决什么问题? 动画分层可以用来解决什么样的问题呢?试想一下如果你要开发一款第三人称的射击游戏,那么肯定是希望身体的动画分为上下两部分,上方根据瞄准的位置和是否射击进行动画播放,下方根据移动播放动画. ...

  3. hdu 4786 Fibonacci Tree (2013ACMICPC 成都站 F)

    http://acm.hdu.edu.cn/showproblem.php?pid=4786 Fibonacci Tree Time Limit: 4000/2000 MS (Java/Others) ...

  4. Jstl标签的使用

    一． 配置 JSTL 包括两个 JAR 文件, jstl.jar 和 standard.jar .是什么没有必要管,重在应用( 1+1 ? =2 ,我们没有必要深究,只需要知道这么用就行.). 原文引 ...

  5. DX相机变换矩阵推导

    网上很多的推导过程都是错的,所以写一个. 先平移,再旋转就可以,先平移的原因是,如果先旋转的话,坐标系已经改了,所以先平移. 平移的变换和相机的变换是相反的,所以是: 平移完成后,相机的位置就和原点的 ...

  6. Oracle数据库文件恢复与备份思路

    怎样才能对Oracle数据库进行备份?如何才能对删除的数据再进行恢复?这是困扰着很多人的问题.大家都知道,任何数据库在长期使用过程中,都会存在一定的安全隐患.对于数据库管理员来说不能仅寄希望于计算机操 ...

  7. 无线路由器的“克隆MAC地址”是干什么作用的？

    本文章转载:http://blog.sina.com.cn/s/blog_4c900d100102uysb.html 1.问题: 无线路由器的“克隆MAC地址”是干什么作用的?怎样使用? 2.使用背景 ...

  8. linux杂谈（十八）:DNS服务器的配置（一）

    原文地址: http://blog.chinaunix.net/uid-29622064-id-4242123.html 1.DNS服务器简介 域名系统(英文:Domain Name System,縮 ...

  9. PostgreSQL的 initdb 源代码分析之二十五

    继续分析: make_postgres(); 展开: 目的是创建postgres数据库. cmd是:/home/pgsql/project/bin/postgres" --single -F ...

  10. Thread+Handler 线程 消息循环(转载)

    近来找了一些关于android线程间通信的资料,整理学习了一下,并制作了一个简单的例子. andriod提供了 Handler 和 Looper 来满足线程间的通信.例如一个子线程从网络上下载了一副图 ...