每天一个前端小案例Day2|pink老师五彩导航

最新推荐文章于 2024-07-20 18:16:53 发布

否极泰来94

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量59

点赞数

分类专栏：每天一个前端小案例文章标签：前端

本文链接：https://blog.csdn.net/weixin_73732784/article/details/133834066

版权

每天一个前端小案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

案例：

思路：

①得设置4个盒子②盒子可以设置背景图片（backgroundimage）③文字水平垂直居中④鼠标经过换背景图片⑤块内元素转行内块元素

框架：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <a class="one">五彩导航</a>
        <a class="two">五彩导航</a>
        <a class="three">五彩导航</a>
        <a class="four">五彩导航</a>
    </div>
</body>

</html>

样式：

.one {
    display: inline-block;
    background-image: url(imags/bg1.png);
    width: 120px;
    height: 58px;
    text-align: center;
    color: white;
    line-height: 50px;
}

.two {
    display: inline-block;
    background-image: url(imags/bg2.png);
    width: 120px;
    height: 58px;
    text-align: center;
    color: white;
    line-height: 50px;
}

.three {
    display: inline-block;
    background-image: url(imags/bg3.jpg);
    width: 120px;
    height: 58px;
    text-align: center;
    color: white;
    line-height: 50px;
}

.four {
    display: inline-block;
    background-image: url(imags/bg4.png);
    width: 120px;
    height: 58px;
    text-align: center;
    color: white;
    line-height: 50px;
}

.one:hover {
    background-image: url(imags/bg5.png);
}

.two:hover {
    background-image: url(imags/bg6.png);
}

.three:hover {
    background-image: url(imags/bg7.png);
}

.four:hover {
    background-image: url(imags/bg8.png);
}