* { margin:0; padding:0; } ul li { list-style:none; } .list img { width:100%; } .box { width:738px; height:168px; border:1px solid #ddd; margin:20px auto; overflow:hidden; position:relative; } .box .scrool { width:1000%; height:168px; } .box .scrool ul li { width:738px; height:168px; float:left; } .box .btn { position:absolute; width:24px; height:24px; background:rgba(0,0,0,0.5); top:84px; color:#ddd; text-align:center; line-height:24px; text-decoration:none; } .box .next { right:0; } .nav { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,0.3); padding-right:4px; border-radius:4px; } .nav a { width:8px; height:8px; background:#fff; display:inline-block; border-radius:50%; margin:2px 0px 2px 2px; } .nav a.active { background:#F0AD4E; }