要求:做一个左侧导航折叠效果
效果:
<!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>