CSS列表及导航条
大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条。
- 垂直导航条
注意要点:
- 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0。
- 以em设置导航列表的宽度。.nav{width:8em;}
- 讲锚的display属性设置为block,这样就可以给它设置宽高了,设置height后与line-height保持相同,达到文字垂直水平居中。
- 去除链接下划线 ,a{text-decoration:none}
- 去除最后一个链接的底边框与列表的底边框形成的双线 .nav .last{border-bottom: 0px;}
- 用a:hover,a:focus与.selected a{}为菜单增加交互效果。
- 简单的水平导航条
注意要点:
- 浮动列表项 使用外边距把他们分开,也可以把display属性设置为inline。
- 控制好li中的元素与li之间的距离。
- 让prev与next链接的样式稍有不同,的用属性选择器寻找他们的rel属性(指定当前文档与被链接文档的关系).home a[rel="prev"],.home a[rel="next"]
- 图形化水平导航条
把垂直导航条变成水平导航条
CSS列表及导航条的更多相关文章
- CSS列表(新闻列表、导航条)常见写法
以下面这个UL做演示 <ul> <li><a href="#"><span>2014-4-1</span>教育</ ...
- ch6 列表和导航条
为列表添加定制的项目符号 可使用list-style-image属性:缺点是对项目符号图像的位置的控制能力不强. 常用的方法:使用list-style-type来关闭项目符号,将定制的项目符号作为背景 ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- CSS水平导航条和纵向导航条
问题描述: 使用CSS制作水平导航条和纵向导航条 问题解决: (1)水平导航条 1.1 效果预览: 1.2 ...
- HTML布局水平导航条1制作
该文是用css制作个导航条,用竖线分隔,导航条是点击的多个区块.步骤:ul里设置需要数量的li,li中加上a链接给ul加样式,去掉默认的前面的点给li设置左浮动,让ul里的li横向排列a链接设置成块状 ...
- 动态menu导航条以及treeview树
1.menu表数据 2.在后台生成html内容后,前台利用nav-h.css生成menu导航条,利用Jquery的treeview插件生成menu树 前台coding: <!DOCTYPE ht ...
- 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- css -- 导航条
1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...
随机推荐
- 秦俊:开放 DevOps 敏捷开发套件,助力开发者驰骋云端
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ DevOps可以让人工智能(AI).大数据(Bigdata).云计算(Cloud)更加高效地落地,越来越多的企业和团队在践行DevOps. ...
- redis的hash类型
1.简单描述 hash是一个string类型的field和value的映射表.添加和删除操作都是O(1)(平均)的复杂度.hash类型特别适合用于存储对象.在field的数量在限制的范围内以及valu ...
- redis的sorted set类型
1.简单描述 和set类型一样,sorted set也是string类型元素的集合,不同的是每个元素都会关联一个double类型的score.sorted set的实现是skip list和hash ...
- pytho核心编程2-1中代码运行问题
书籍是<python核心编程>第三版,学习环境py3.6 2-1 时间戳服务器 附源代码: from socket import * from time import ctime HOST ...
- 开始连载啦~每周2更共11堂iKcamp课|基于Koa2搭建Node.js实战项目教学(含视频)| 课程大纲介绍
- 58、js扩展
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理. 一.js的作用域 任何程序设计语言都有作用域的概念,简单的说,作用 ...
- JMeter获取JSON内容
source("D:\\apache-jmeter-3.0\\用例\\Test.java"); public static void f(){ String response_da ...
- Spring拦截器总结
本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 Spring过滤器WebFilter可以配置中文过滤 拦截器实现步骤 ...
- MQ NameServer模块划分
上图是之前讨论确定的系统架构(后续内容会按照这个架构来叙述),其中: NameServer做Broker的服务发现,即客户端可以通过NameServer拿到Broker的信息 Broker汇报数据到N ...
- mysql5.7-Group Replication
什么是Group Replication 基于组的复制(Group-based Replication)是一种被使用在容错系统中的技术.Replication-group(复制组)是由能够相互通信的多 ...