CSS 五彩导航

Posted m0_50484391

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 五彩导航相关的知识,希望对你有一定的参考价值。

源代码:
下面展示一些 内联代码片

<!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>
        a
            display: inline-block;
            color: rgb(252, 248, 248);
            width: 118px;
            height: 56px;
            text-align:center;
            font-size: 20px;
            text-decoration: none;
            line-height: 48px;
        
        .demo1
            background-image: url(./image/bg1.png);
        
        .demo1:hover
            background-image: url(./image/bg5.png);
        
        .demo2
            background-image: url(./image/bg2.png);
        
        .demo2:hover
            background-image: url(./image/bg5.png);
        
        .demo3
            background-image: url(./image/bg3.png);
        
        .demo3:hover
            background-image: url(./image/bg6.png);
        
        .demo4
            background-image: url(./image/bg4.png);
        
        .demo4:hover
            background-image: url(./image/bg7.png);
        
    </style>
</head>
<body>
    <a href="" class="demo1">五彩导航</a>
    <a href="" class="demo2">五彩导航</a>
    <a href="" class="demo3">五彩导航</a>
    <a href="" class="demo4">五彩导航</a>
</body>
</html>

原图:

移动按钮在第二个上时:

以上是关于CSS 五彩导航的主要内容,如果未能解决你的问题,请参考以下文章

CSS 五彩导航

前端css综合案例1-7:新闻页面五彩导航产品模块快报模块学成在线首页CSS三角土豆案例

五彩导航案例

求通达信五彩k线

CRT彩显却能表现五彩缤纷的颜色,请问这基于啥原理

五彩斑斓的黑