文章目录
一、标签显示模式示例
1、基本结构
2、设置行内元素宽高
3、设置元素背景
4、设置文字水平居中
5、取消链接文字下划线装饰
6、设置鼠标经过样式
二、文字垂直居中
1、行高测量
2、垂直居中设置...3、文本行高与盒子高度关系
三、完整代码示例
代码示例
显示效果
一、标签显示模式示例
----
实现 横向导航栏 , 要求如下 :
每个导航按钮都有指定的宽高 ,
有默认背景 ,
鼠标移动上去背景和文字都会改变...默认 是 行内元素 ;
2、设置行内元素宽高
链接标签 默认是 行内元素 , 行内元素 的 宽高 就是其本身的宽高 , 为其设置宽高是无效的 ;
如果要为其设置宽高 , 必须将其设置为 行内块元素..., 使用
display: inline-block;
CSS 样式 , 可以将 行内元素 或 块级元素 的 显示样式 转换为 行内块元素 ;
使用 width 和 height 为其设置 宽高 ;...: none;
}
显示效果 :
6、设置鼠标经过样式
通过设置 a:hover 可以设置 链接 在 鼠标经过的样式 ,
下面的样式 用于 设置 鼠标经过时 背景变成红色 ,
