*{ padding:0; margin: 0; } ul,ol{ list-style-type: none; } a{ text-decoration: none; } .banner{ width: 100%; height: 300px; margin:0 auto; position: relative; overflow: hidden; } .banner .box{ width: 100%; height:100%; } .banner .box li{ position: absolute; left:0; top:0; width: 100%; height: 100%; overflow: hidden; display: none; } .banner .box li.active{ display: block; } .banner .ban-nav{ position: absolute; bottom: 30px; left:50%; margin-left:-50px; display: none; } .banner .ban-nav li{ float: left; width: 15px; height: 15px; border-radius: 50%; background: #5e5e5e; margin-left: 8px; cursor:pointer; } .banner .ban-nav li:first-child{ margin-left:0; } .banner .ban-nav li.on{ background: #8a6d3b; } .banner .ban-btn{ width: 50px; height: 50px; line-height: 50px; text-align: center; background: #515151; color: #ffffff; position: absolute; top:50%; margin-top: -25px; z-index: 1991612; opacity: .7; display: none; } .banner .prev{ left: 15px; } .banner .next{ right: 15px; } /*-----*/ #obj{ width: 300px; height: 100px; margin:0 auto; margin-top:-100px; text-align: center; line-height: 100px; font-size: 36px; color: red; }