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

来源: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">
    <title>五彩导航title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中 */
            line-height: 50px;
            color: #fff;
            text-decoration: none;
        }
        /* 由于每个背景图片都不同,所有设置不同的class */
        .nav .bg1 {
            background: url(images/color_nav1.png) no-repeat;
        }
        /* 鼠标一经过,更换背景图片,但还是不平铺 */
        .nav .bg1:hover {
            background-image: url(images/color_nav11.png);
        }
        .nav .bg2 {
            background: url(images/color_nav2.png) no-repeat;
        }
        .nav .bg2:hover {
            background-image: url(images/color_nav22.png);
        }
        .nav .bg3 {
            background: url(images/color_nav3.png) no-repeat;
        }
        .nav .bg3:hover {
            background-image: url(images/color_nav33.png);
        }
        .nav .bg4 {
            background: url(images/color_nav4.png) no-repeat;
        }
        .nav .bg4:hover {
            background-image: url(images/color_nav11.png);
        }
    style>
head>
<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航a>
        <a href="#" class="bg2">五彩导航a>
        <a href="#" class="bg3">五彩导航a>
        <a href="#" class="bg4">五彩导航a>
    div>
body>
html>

注意点

由于背景图片的不规则,导致若要使得文字居中,需要使行高小于盒子高度,使得文字偏上

  • 当文字行高等于盒子高度时,效果如下:
.nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中 */
            line-height: 58px;
            color: #fff;
            text-decoration: none;
        }

你可能感兴趣的:(前端记录,css,css3,html)