话不多说,看代码:

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. Hibernate HQL和原生SQL查询的一点区别

    1.createSQLQuery 1.1默认查询的结果为BigDecimal 1.2通过addScalar("CGD_ID", StandardBasicTypes.LONG)可以 ...

  2. hash_map vs unordered_map vs map vs unordered_set

    hash_map vs unordered_map 这两个的内部结构都是采用哈希表来实现.unordered_map在C++11的时候被引入标准库了,而hash_map没有,所以建议还是使用unord ...

  3. 【LINUX】编程笔记

      a storage class can only be specified for objects and functions extern修饰一个struct报错,错误原因如上,C++中存储类修 ...

  4. 安卓任意两个或多个Fragment之间的交互与刷新界面

    平时项目中遇到一个问题:在子fragment中刷新父fragment的界面,通俗的说也就是在任何一个fragment中来刷新另一个fragment.大家都知道activity和fragment之间的交 ...

  5. 在DWZ框架中整合kindeditor复文本框控件

    今天上午在DWZ框架中整合kindeditor复文本框控件,发现上传图片是老是提示 “上传中,请稍候...”,上网查看别人说可能是文件路径问题,在想以前在其他项目中用这个控件一直没问题,到这里怎么会出 ...

  6. iptables实战系列:通过NAT转发实现私网对外发布信息

    原文地址: http://os.51cto.com/art/201109/289486.htm [51CTO独家特稿]本文将介绍一个使用iptables实现NAT转发功能的案例. 本文假设读者已经对N ...

  7. 【转】部署web项目到weblogic上启动错误

    启动weblogic报错:java.lang.ClassCastException: com.sun.faces.application.WebappLifecycleListener cannot ...

  8. JAVA-开发环境搭建之JDK安装配置教程

    在进行java开发前先要搭建java的开发环境 下载java的开发环境eclipse 安装&配置环境变量 1,JDK安装

  9. C语言调用Lua函数

    记得上学时,初中英文课本中,上网叫做surfing the internet,中文叫网上冲浪. 那个时期,人们常常称互联网为赛博空间.现在工作了,大量的零碎时间用于上微博,知乎,QQ.这些碎片化的阅读 ...

  10. iOS开发——UI_swift篇&TableView自定义聊天界面

    TableView自定义聊天界面   1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 ...