1 滑动门

用到的背景图片

 

1 滑动门

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .nav {
            width: 800px;
            margin: 100px auto;
        }

        a {
　　　　　　　//我们是滑动门，宽度是内容撑开的 所有这里必须用 行内块元素
            display: inline-block;
            height: 33px;
            background: url(image/to.png) no-repeat;
            padding-left: 15px;
            line-height: 33px;
            color: white;
        }
        a span {
            display: inline-block;
            height: 33px;
　　　　　　　//这里的背景图片需要右对齐
            background: url(image/to.png) no-repeat right top;
            padding-right: 15px;
        }

    </style>
</head>
<body>
<div class="nav">
    <a href=""><span>首页</span></a>
    <a href=""><span>公司简介</span></a>
</div>
</body>
</html>

原理：

a 标签设置左边的背景，padding撑开合适宽度

span 标签设置右边的背景，padding撑开合适宽度，剩下的由文字继续撑开宽度

之所以a包含span是因为 整个导航都是可以点击的

 

posted @ 2021-01-29 08:51  棉花糖88  阅读(69)  评论(0)  编辑  收藏  举报