滑动门的核心技术：
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，以使自由拉伸滑动
利用css精灵（主要是背景位置）和盒子padding撑开宽度，以便适应不同字数的导航栏 一般经典布局 <li> <a href="#"> <span>导航内容</span> </a> </li> 样式设置 a { margin: 100px; display: inline-block; height: 33px; background: url(image/ao.png) no-repeat; padding-left: 15px; } a span { height: 33px; display: inline-block; background: url(image/ao.png) no-repeat right; padding-right: 15px; } 总结： 1. a设置背景左侧， padding撑开合适宽度 2. span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度 3. 之所以a包含span就是因为整个导航都是可以点击的
微信导航栏练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } body { background: url(image/wx.jpg) repeat-x; } .nav { height: 75px; } .nav li { float: left; margin: 0 15px; padding-top: 21px; } .nav li a { display: block; height: 33px; background: url(image/to.png) no-repeat; color: #fff; font-size: 14px; line-height: 33px; text-decoration: none; padding-left: 15px; } .nav li a:hover { background-image: url(image/ao.png); } .nav li a:hover span { background-image: url(image/ao.png); } .nav li a span { display: block; line-height: 33px; background: url(image/to.png) no-repeat right; padding-right: 15px; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#"> <span>首页</span> </a> </li> <li> <a href="#"> <span>帮助与反馈</span> </a> </li> <li> <a href="#"> <span>公众平台</span> </a> </li> <li> <a href="#"> <span>帮助与反馈</span> </a> </li> <li> <a href="#"> <span>公众平台</span> </a> </li> </ul> </div> </body> </html>