要求：做一个左侧导航折叠效果 效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body,p{ /* body的外面有margin，然后才到html，去掉body的margin，可以让元素与页面顶部就没有间隔 */ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; width: 900px; } li{ width: 100px; height: 420px; float: left; transition: all linear 700ms; } li p{ color: white; background-color: rgba(0,0,0,0.4); width: 100px; height: 420px; font-size: 13px; box-sizing: border-box; padding: 20px 40px; /*第一个参数是上下。让文字按竖直方向排列*/ } li:nth-child(1){ /*设置居中的原因，①就是不管图比li大宽度大还是小，图的中心线和li的中心线重合。②还有就在展示中（即刚一进页面没任何动作之前所展示的样式）如果要显示中心也要设置center，如果只显示左边就不用设置*/ background: url(img/a1.png) no-repeat center top; } li:nth-child(2){ background: url(img/a2.png) no-repeat center top; } li:nth-child(3){ background: url(img/a3.png) no-repeat center top; } li:nth-child(4){ background: url(img/a4.png) no-repeat center top; } </style> </head> <body> <!-- 要求：做一个左侧导航折叠效果 --> <ul> <li style="width: 600px;"> <!--目的是：一打开页面就展现第一个li--> <p>雨红了枫叶 ，枫叶红了山头 ，山头红了整个秋</p> </li> <li> <p>莫愁前路无知己 ,天下谁人不识君 。</p> </li> <li> <p>你能看到多远的过去 ，就能看到多远的未来。</p> </li> <li> <p>编不下去了 。 。 。 。 。</p> </li> </ul> <script src="jquery-1.10.1.min.js"></script> <script> $("li").mouseover(function (){ $(this).css("width","600px").siblings().css("width","100px"); }) </script> </body> </html>