前端-------滑动门

以微信导航为例（效果为：无论导航为几个字，背景都能自适应）
1、代码　
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信滑动门导航</title>
<link rel="stylesheet" href="css/sublime.css"/>
<style type="text/css">
　　*{
　　　　margin: 0;
　　　　padding: 0;
　　　}
　　ul{
　　　　list-style: none;                     /*取消li中文字在不同浏览器中的不同效果*/
　　}
　　body{
　　　　background: url(images/wx.jpg) repeat-x;
　　　　}
　　.nav li{
　　　　float: left;
　　　　margin-left: 15px;
　　　　}
　　.nav li a{
　　　　display: inline-block;                        /*转换为行内块级元素，设置宽高*/
　　　　height: 33px;
　　　　line-height: 33px;                           /*垂直居中*/
　　　　color: #fff;                                      /*文字颜色白色*/
　　　　text-decoration: none;                   /*取消下划线*/
　　　　background: url(images/to.png) no-repeat;            /*背景为左圆角*/
　　　　padding-left: 15px;                        /*文字往右*/
　　　　}
　　.nav span{
　　　　display: inline-block;
　　　　background: url(images/to.png) no-repeat right;          /*背景为右圆角*/
　　　　line-height: 33px;                          /*父级给了可以不写，会继承*/
　　　　height: 33px;                                /*给行高可以不写高度，父亲有可以不写*/
　　　　padding-right: 15px;                   / *文字往右走*/

　　　　}
　　.nav a:hover{
　　　　background-image: url(images/ao.png);
　　　　}
　　.nav a:hover span{

　　　　/*鼠标经过a，a里面的span也要变*/
　　　　background-image: url(images/ao.png);
　　　　}
</style>
</head>

<body>
　　<div>
　　　<ul class='nav'>
　　　　<li>
　　　　　< a href=" ">
　　　　　　<span>首页</span>

　　　　　</ a>
　　　　</li>
　　　　<li>
　　　　　< a href="#">
　　　　　　<span>公众平台</span>

　　　　　</ a>
　　　</ul>
　　</div>
</body>
</html>
2、代码结构
3、页面展示
4、工具：sublime
前端-------滑动门

推荐阅读
