大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条。

 
  • 垂直导航条

注意要点:

  1. 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0。
  2. 以em设置导航列表的宽度。.nav{width:8em;}
  3. 讲锚的display属性设置为block,这样就可以给它设置宽高了,设置height后与line-height保持相同,达到文字垂直水平居中。
  4. 去除链接下划线 ,a{text-decoration:none}
  5. 去除最后一个链接的底边框与列表的底边框形成的双线  .nav .last{border-bottom: 0px;}
  6. 用a:hover,a:focus与.selected a{}为菜单增加交互效果。
 
  • 简单的水平导航条

注意要点:

  1. 浮动列表项 使用外边距把他们分开,也可以把display属性设置为inline。
  2. 控制好li中的元素与li之间的距离。
  3. 让prev与next链接的样式稍有不同,的用属性选择器寻找他们的rel属性(指定当前文档与被链接文档的关系).home a[rel="prev"],.home a[rel="next"]
 
 
  • 图形化水平导航条

把垂直导航条变成水平导航条

 
 
 

CSS列表及导航条的更多相关文章

  1. CSS列表(新闻列表、导航条)常见写法

    以下面这个UL做演示 <ul> <li><a href="#"><span>2014-4-1</span>教育</ ...

  2. ch6 列表和导航条

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

  3. 如何使用纯CSS制作特效导航条?

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

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

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

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

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

  6. 动态menu导航条以及treeview树

    1.menu表数据 2.在后台生成html内容后,前台利用nav-h.css生成menu导航条,利用Jquery的treeview插件生成menu树 前台coding: <!DOCTYPE ht ...

  7. 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  8. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  9. css -- 导航条

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

随机推荐

  1. This version of the rendering library is more recent than your version of IntelliJ IDEA.

    今天往idea里导入其它项目时又遇到了一个问题.单独标记一下. 导入后打开一个布局xml文件,发现不能渲染,报错为: This version of the rendering library is ...

  2. 【SqlServer】【问题收集】阻止保存要求重新创建表的更改

    1   概述 阻止保存要求重新创建表的更改,场景是这样的:假设数据库中有一张员工表EmployeeInfo,如下所示: 其中有个字段EmployeeBirthday,在设计表时,其类型误设为VARCH ...

  3. 【转载】JAVA中综合接口和抽象类实现的一种“抽象接口”

    Muscleape个人总结:(这里的抽象接口是指:使用一个抽象类实现一个接口,是两部分结构) 使用一个抽象类直接实现接口,将接口中的方法区分为实现类必须要实现的和选择性实现的,其他需要实现接口的类型通 ...

  4. 自学Python2.1-基本数据类型-字符串str(object)

    Python str方法总结 class str(object): """ str(object='') -> str str(bytes_or_buffer[, ...

  5. mybatis中#和$符号的区别(转)

    mybatis做为一个轻量级ORM框架在许多项目中使用,因其简单的入门受到了广大开发者的热爱.在近期项目中再做一个相关的开发,碰到了#.$符号这样的问题,之前没怎么注意过,通过学习之后,有了点感悟,分 ...

  6. 如何连接别人电脑上的Oracle数据库--duende99

    需要一些前提条件: 1.对方的主机能被连接(如在同一局域网内) 2.需要知道对方数据库IP.端口号.服务名 3.需要知道对方提供的管理数据库的用户名及密码 连接方法: 1.在本地的oracle安装目录 ...

  7. 如何高效撤销Git管理的文件在各种状态下的更改

    一.背景 企业中我们一般采用分布式版本管理工具git来进行版本管理,在团队协作的过程中,我们难免会遇到误操作,需要撤销更改的情况,那么我们怎么高效的进行撤销修改呢?对于还未提交到暂存区的代码怎么高效撤 ...

  8. rsync 指定端口拷贝

    rsync -aP -e 'ssh -p 2288' ssh-audit.dat 172.18.18.31:/opt/freesvr/audit/sshgw-audit/sbin

  9. Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题

    问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1.  将jstree升级到最新的版本,v3.3.4及以上就可以 2. ...

  10. C:函数:功能:实现字符数组中所有字母的倒序存放并输出

    前两天小测碰到一道题,建立一个函数,功能:实现字符数组中所有字母的倒序存放并输出,一开始觉得简单跟数字数组差不多,运行一下发现很多格式错误,这些是不必要的错误,现在就来说下,先说一下代码思路:定义一个 ...