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 ...
随机推荐
- This version of the rendering library is more recent than your version of IntelliJ IDEA.
今天往idea里导入其它项目时又遇到了一个问题.单独标记一下. 导入后打开一个布局xml文件,发现不能渲染,报错为: This version of the rendering library is ...
- 【SqlServer】【问题收集】阻止保存要求重新创建表的更改
1 概述 阻止保存要求重新创建表的更改,场景是这样的:假设数据库中有一张员工表EmployeeInfo,如下所示: 其中有个字段EmployeeBirthday,在设计表时,其类型误设为VARCH ...
- 【转载】JAVA中综合接口和抽象类实现的一种“抽象接口”
Muscleape个人总结:(这里的抽象接口是指:使用一个抽象类实现一个接口,是两部分结构) 使用一个抽象类直接实现接口,将接口中的方法区分为实现类必须要实现的和选择性实现的,其他需要实现接口的类型通 ...
- 自学Python2.1-基本数据类型-字符串str(object)
Python str方法总结 class str(object): """ str(object='') -> str str(bytes_or_buffer[, ...
- mybatis中#和$符号的区别(转)
mybatis做为一个轻量级ORM框架在许多项目中使用,因其简单的入门受到了广大开发者的热爱.在近期项目中再做一个相关的开发,碰到了#.$符号这样的问题,之前没怎么注意过,通过学习之后,有了点感悟,分 ...
- 如何连接别人电脑上的Oracle数据库--duende99
需要一些前提条件: 1.对方的主机能被连接(如在同一局域网内) 2.需要知道对方数据库IP.端口号.服务名 3.需要知道对方提供的管理数据库的用户名及密码 连接方法: 1.在本地的oracle安装目录 ...
- 如何高效撤销Git管理的文件在各种状态下的更改
一.背景 企业中我们一般采用分布式版本管理工具git来进行版本管理,在团队协作的过程中,我们难免会遇到误操作,需要撤销更改的情况,那么我们怎么高效的进行撤销修改呢?对于还未提交到暂存区的代码怎么高效撤 ...
- rsync 指定端口拷贝
rsync -aP -e 'ssh -p 2288' ssh-audit.dat 172.18.18.31:/opt/freesvr/audit/sshgw-audit/sbin
- Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题
问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2. ...
- C:函数:功能:实现字符数组中所有字母的倒序存放并输出
前两天小测碰到一道题,建立一个函数,功能:实现字符数组中所有字母的倒序存放并输出,一开始觉得简单跟数字数组差不多,运行一下发现很多格式错误,这些是不必要的错误,现在就来说下,先说一下代码思路:定义一个 ...