来源:B站pink老师P127:五彩导航栏
目的:学习记录
练习价值
1)链接属于行内元素,但此时需要宽度高度又不独占一行,涉及模式转换为行内块元素 display: inline-block;
2)其中文字需要水平居中和垂直居中显示,涉及单行文字垂直居中 文字行高等于盒子高度
3)链接需要设置背景图片
4)鼠标经过变化背景图片,设计链接伪类选择器
最终效果
HTML代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=