用到的背景图片
1 滑动门
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .nav { 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是因为 整个导航都是可以点击的