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

最新推荐文章于 2023-10-14 23:55:04 发布

「已注销」

最新推荐文章于 2023-10-14 23:55:04 发布

阅读量436

点赞数

分类专栏：前端记录文章标签： css css3 html

本文链接：https://blog.csdn.net/zy_tender/article/details/124895541

版权

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

摘要由CSDN通过智能技术生成

来源：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=

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022年5月21日Pink老师五彩导航

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

扫一扫

专栏目录