* { margin:0; padding:0; } html,body { width:100%; height:100%; overflow:hidden; } .big-box { width:100%; height:500%; text-align:center; position:absolute; } .big-box .item { height:20%; } .big-box .item1 { background-color:red; } .big-box .item2 { background-color:blue; } .big-box .item3 { background-color:purple; } .big-box .item4 { background-color:gold; } .big-box .item5 { background-color:pink; } .controls { list-style:none; position:absolute; top:20%; right:20px; } .controls li { width:50px; height:50px; font:bold 22px/50px "宋体"; text-align:center; background-color:#000; color:#fff; cursor:pointer; } .controls li+li { margin-top:5px; } .controls li.active { background-color:#fff; color:red; }