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

 
  • 垂直导航条

注意要点:

  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. 秦俊:开放 DevOps 敏捷开发套件,助力开发者驰骋云端

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ DevOps可以让人工智能(AI).大数据(Bigdata).云计算(Cloud)更加高效地落地,越来越多的企业和团队在践行DevOps. ...

  2. redis的hash类型

    1.简单描述 hash是一个string类型的field和value的映射表.添加和删除操作都是O(1)(平均)的复杂度.hash类型特别适合用于存储对象.在field的数量在限制的范围内以及valu ...

  3. redis的sorted set类型

    1.简单描述 和set类型一样,sorted set也是string类型元素的集合,不同的是每个元素都会关联一个double类型的score.sorted set的实现是skip list和hash ...

  4. pytho核心编程2-1中代码运行问题

    书籍是<python核心编程>第三版,学习环境py3.6 2-1 时间戳服务器 附源代码: from socket import * from time import ctime HOST ...

  5. 开始连载啦~每周2更共11堂iKcamp课|基于Koa2搭建Node.js实战项目教学(含视频)| 课程大纲介绍

  6. 58、js扩展

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理. 一.js的作用域 任何程序设计语言都有作用域的概念,简单的说,作用 ...

  7. JMeter获取JSON内容

    source("D:\\apache-jmeter-3.0\\用例\\Test.java"); public static void f(){ String response_da ...

  8. Spring拦截器总结

    本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 Spring过滤器WebFilter可以配置中文过滤 拦截器实现步骤 ...

  9. MQ NameServer模块划分

    上图是之前讨论确定的系统架构(后续内容会按照这个架构来叙述),其中: NameServer做Broker的服务发现,即客户端可以通过NameServer拿到Broker的信息 Broker汇报数据到N ...

  10. mysql5.7-Group Replication

    什么是Group Replication 基于组的复制(Group-based Replication)是一种被使用在容错系统中的技术.Replication-group(复制组)是由能够相互通信的多 ...