* { margin:0; padding:0; } body { background:#7F8C8D; font-family:"Helvetica Neue",sans-serif; color:rgba(255,255,255,.8); text-align:center; } h1 { font-size:42px; margin:30px auto; } #slideshow { width:980px; height:450px; overflow:hidden; margin:0 auto; position:relative; } #slideshow ul,#slideshow ul li,#slideshow-nav { list-style:none; position:absolute; } #slideshow-nav { width:100%; bottom:20px; text-align:center; } #slideshow-nav span { display:inline-block; border-radius:50%; width:15px; height:15px; font-size:0; background:rgba(255,255,255,.3); transition:all .5s; -webkit-transition:all .5s; margin:0 7px; cursor:pointer; user-select:none; /*使圆点不能被选中*/ -webkit-user-select:none; } #slideshow-nav span.active { background:#FFF; } #slideshow,ul,li,img { width:980px; } @media screen and (max-width:979px) { #slideshow,ul,li,img { width:100%; } }