2022年5月21日Pink老师五彩导航

原创

于 2022-05-21 10:55:45 发布 · 514 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

本文记录了通过B站Pink老师的课程学习的五彩导航栏制作过程，重点介绍了如何将链接元素转换为inline-block，实现文字水平和垂直居中，以及设置背景图片和链接伪类选择器来改变鼠标悬停时的背景效果。通过实例展示了HTML代码和需要注意的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源：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="width=device-width, initial-scale=1.0"<

最低0.47元/天解锁文章

200万优质内容无限畅学