CSS微信滑动门,奇技淫巧

微信滑动门---有点意思哦


可以看到微信官网的导航,每一个标题的背景是一张图片,有意思的是,虽然这些文字的字数并不一样,按照传统思维,这就意味着要截8张长度不同的图片,然鹅。。。。微信并不是这样做的,他们只用了一张图片,如下所示:

CSS微信滑动门,奇技淫巧_第1张图片

没错就是这么长的一张图片,很巧妙的!

他的做法是:用一个a标签包括一个span标签,将a标签的背景图片设置为左对齐,对a中的span标签的背景图片设置为右对齐

我写了一遍,直接上代码!




    
    Title
    


ZTEEN MOZART
言必信

最终实现效果,文字不同仍然可以首尾---呼应


你可能感兴趣的:(HTML和CSS)