* { margin:0; padding:0; } body { overflow-x:hidden; } .gallery { width:950px; margin:10px auto; border:1px solid #000; overflow:hidden; padding:20px; border-radius:15px; box-shadow:1px 2px 3px black; } .gallery ul { list-style:none; } .gallery ul li { float:left; width:160px; height:86px; margin-right:30px; margin-bottom:30px; cursor:pointer; padding:5px; } .BLACKCOVER { width:100%; height:100%; background-color:black; opacity:0.6; position:fixed; top:0; left:0; display:none; } .bigShow { position:absolute; top:38.2%; left:50%; width:560px; height:300px; padding:20px; background:white url(juhua.gif) no-repeat center center; margin-top:-150px; margin-left:-280px; box-shadow:1px 2px 3px black; border-radius:15px; display:none; } .bigShow span.close { position:absolute; width:30px; height:30px; background-color:black; color:white; border:1px solid #000; right:-15px; top:-15px; border-radius:50%; font-size:30px; line-height:30px; text-align:center; cursor:pointer; } .bigShow img { display:none; } .bigShow span.leftBtn { position:absolute; width:60px; height:60px; top:50%; left:-30px; margin-top:-30px; background-color:#38C9C3; font-size:60px; text-align:center; line-height:60px; border-radius:50%; cursor:pointer; } .bigShow span.rightBtn { position:absolute; width:60px; height:60px; top:50%; right:-30px; margin-top:-30px; background-color:#38C9C3; font-size:60px; text-align:center; line-height:60px; border-radius:50%; cursor:pointer; }