1. 实现步骤与知识点
- 先把链接转换为块级元素
- 再经过鼠标经过给a设置背景颜色,使用a:hover筛选器
- 行高等于合资的高度就能垂直居中 (用line-height设置)
- 行高小于盒子的高度会偏上
- 行高大于盒子的高度会偏下
2. 示例
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
display: block;
width: 230px;
height: 40px;
text-decoration: none;
background-color: rgb(85, 88, 90);
color: white;
text-indent: 2em;
/* 行高等于合资的高度就能垂直居中 */
/* 行高小于盒子的高度会偏上,行高大于盒子的高度会偏下 */
line-height: 40px;
}
a:hover {
background: rgb(255, 103, 0);
}
</style>
</head>
<body>
<!-- 先把链接转换为块级元素,再经过鼠标经过给a设置背景颜色 -->
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
测试效果
写在最后
注:上述笔记均来自黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+web前端视频教程 这一课程的学习记录,主要供自己的学习分享
各位看官,都看到这里了,麻烦动动手指头给博主来个点赞8,您的支持作者最大的创作动力哟! <(^-^)>
才疏学浅,若有纰漏,恳请斧正
本文章仅用于各位同志作为学习交流之用,不作任何商业用途,若涉及版权问题请速与作者联系,望悉知