美文网首页
2018-04-02导航条和按钮

2018-04-02导航条和按钮

作者: 潘某i人 | 来源:发表于2018-04-02 18:55 被阅读0次

导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>00</title>
    <style type="text/css">
        .box{
            width: 990px;
            height: 32px;
            background-image: url(导航条.png);
            background-repeat: repeat-x;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

代码效果:


image.png

按钮:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123123123123123123123123123123123123123123123</title>
    <style type="text/css">
        a:link{
            display: block;
            width: 93px;
            height: 25px;
            background-image: url(img/btn.png);
        }
        a:hover{
            display: block;
            width: 93px;
            height: 25px;
            background-position: -93px 0px;
        }
        a:active{
            display: block;
            width: 93px;
            height: 25px;
            background-position: -186px 0px;
        }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>
按钮初始样子 鼠标悬浮在按钮上 点击按钮时

相关文章

网友评论

      本文标题:2018-04-02导航条和按钮

      本文链接:https://www.haomeiwen.com/subject/zrixhftx.html